{"name":"Introduction To Coding 8-15-2024","description":"Unleash your coding creativity in the CodePlayground 3000! Explore the magic of coding through interactive examples of variables, arrays, loops, and functions. Comment and uncomment your way to coding mastery!","photo":"https://jippity.s3.amazonaws.com/BuildCode.gif","view_count":0,"fork_count":0,"expires_at":null,"created_at":"2024-08-15T14:08:01.202130Z","updated_at":"2024-08-15T14:08:01.202135Z","user_id":5,"status":"PRIVATE","parent_id":462,"id":2695,"user":{"photo":null,"email":null,"recess_id":"b5574579-4904-b775-ad8e-eff5c085f819","created_at":"2023-12-12T12:00:51.087995Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"theop","id":5,"password_hash":null,"updated_at":"2023-12-12T12:00:51.087997Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"//Welcome to JavaScript! In JS, comments begin with double slashes: // and end automatically whenever a line ends.\n\n/*\nYou can make multi-line comments (paragraphs) like this.\nOpen the comment with a / and a *, and close it with the same thing in reverse.\n*/\n\n//Click \"Run\" in the top right.\n\n//console.log(\"You just ran your first line of JavaScript!\")\n\n//JavaScript is a great first language and it's probably where you'll do most of your work in Jippity.\n//If you don't want to see that message in the console next time you run your program, comment it out.\n\n/*\nThe three main ideas you need to get started with JS are:\n1. Functions\n2. Variables\n3. \"if\" statements\n\nLet's look at these one at a time.\n\n1.\nFunctions are blocks of code that run when we ask them to.\nThey are like the *verbs* of coding.\n\nThere's a function named \"myFirstFunc\" below.\n\nWe know it's a function because of the word \"function.\"\n\nWe know it's called myFirstFunc because of the text after \"function.\"\n\nYou'll see what the () is for soon.\n\nThe \"curly brace\" { opens a block of code. The function myFirstFunc is everything between { and }\n\nEvery function you write will look like this:\n*/\n\nfunction myFirstFunc() {\n //code;\n //more code;\n //even more code;\n}\n\n/*\nAsking a function to run is \"calling\" a function.\nWe call a function by typing its name and a pair of (), finishing with a ;\nLike this:\n*/\n\nmyFirstFunc();\n\n/*\nSince there is no code inside myFirstFunc() yet, nothing happens when we call it.\n\nHowever, the function setup() below *does* contain code and will run when we call it.\n\nThe library we are using by default, p5.js, automatically calls two functions when we hit \"Run.\"\nIt runs the setup() function once at the beginning.\nIt also runs the draw() function over and over (usually 60 times a second) in order to update images on the screen.\nIf these functions don't exist, nothing bad happens.\n\nYou can even call functions inside of other functions. Let's do that now!\n\nRight now, setup() does very little.\nYour first task is to *uncomment* the valid line of code in there -- delete the //s.\nClick \"Run\" in the top right of this page -- do you see a \"Hello, world!\" message?\nNotice that every line of code ends with a ; -- a \"semicolon.\"\n\nGet in the habit of writing comments to explain your code. \nNow please explain, in your own words, what each of those lines does, in comments.\nTip: change the numbers and text you see inside (parentheses) to figure out what each line does.\ncreateCanvas() is a function that comes with p5.js.\nSo is background().\nconsole.log() is built into all JavaScript.\n*/\n\n//If you face an error, feel free to ask Jippity for help using the chat window in the bottom left.\n//But please be specific if you do! Jippity needs precise instructions. It's a computer after all!\n\nfunction setup() {\n // comment here: what does createCanvas() do?\n createCanvas(800, 600);\n // comment here: what does background() do?\n background(200);\n // comment here: what does console.log() do?\n //console.log(\"Hello, world!\");\n}\n\n\n/*\nWell done. You wrote and called your first function!\nSoon we will check out the built-in draw() function, which is special because it runs over and over in a loop\n(so that images can move and interact on screen).\n*/\n\n//////////////////////////////////////////////////\n\n/* \n2.\nIf functions are verbs, *variables* are nouns.\nVariables *store information* in the computer's memory, and give that information a name.\n\nCheck out the code below, and uncomment the second line. \n*/\n\nlet x = 10;\n//console.log(x);\n\n/*\nThe first line creates and names a variable.\nThe word \"let\" creates a variable with the name that follows it. In this case, x.\nThe equals sign *assigns* the variable a value. \nIt is not an equation like in math. It is a *command*.\n\"Make x the number 10.\"\nWhen that line runs, the computer remembers that x is 10.\n\nThe second line calls the function console.log() and asks it to log the variable x.\nMake sure to uncomment that line, then click \"Run.\" \nYou should see the number 10 printed in the console. \nYou might see text from earlier as well.\nIf that bothers you, just comment out those console.log() lines.\n*/\n\n//////////////////////////////////////////////\n\n\n//There is so much you can do with variables.\n\nlet numberOfFingers = 5;\n//uncomment the line below and click \"Run.\"\n//console.log(\"I have \" + numberOfFingers + \" fingers on my hand.\")\n\n/*\nnote: variable names need to start with a lowercase letter.\nuppercase is for something else that you'll see later.\n\nIf you declare a variable with \"let,\" you can change its value later.\nRead through this example.\n*/\nlet a = 4;\nlet b = 7;\nlet c = 1000000;\n//Now we are going to change the value of c.\n//Notice that we do NOT use the word \"let\" this time.\nc = a + b;\n//Uncomment the next line. What do you expect to happen?\n//console.log(\"The value of c is \" + c);\n\n/*\nLast one. It's a bit weird.\nRemember that = is not an equals sign like in math! It's a one-way command.\n*/\n\nlet boink = 14;\nlet dingle = 8;\nboink = boink - dingle;\n//What will happen if we uncomment the next line? Make a prediction!\n//console.log(boink);\n\n/*\nVariables don't have to just be numbers. \nThey can be text (wrapped in double quotes \"like this\"), or\nfancier types of data, like true/false, or lists, or the output of a function.\nWhenever you need to save a piece of information in code, make a variable for it.\n*/\n\n//////////////////////////////////////////////\n\n/*\n3.\nThe last idea you need to get off the ground is the \"if\" statement.\nif statements are like controllers that turn code off and on depending on a condition.\nFor instance, you might want to run code in a game ONLY IF the game is not paused.\nOr, you might want a textbox to pop up ONLY IF the mouse is in a certain spot.\n\nMost of the time, we set up if statements to check if a variable has the value we want.\nIt is often convenient to set up a variable that can just be true or false, for this purpose.\nCheck out the code below. What do you have to change to make it print the message?\n*/\n\nlet flipper = false;\n\nif (flipper === true) {\n console.log(\"You got it!\")\n}\n\n/*\nThe code inside the () after \"if\" -- that's called the \"condition.\"\nWe use triple equals === to compare values in JavaScript.\nIn this case, we are comparing the value of flipper to the value 'true'.\nIf flipper is the same as true, we execute all the code surrounded by { }.\nIf flipper and true do NOT match, we do nothing.\n*/\n\n/////////////////////////////////////////////////////////\n\n/*\nLet's put it all together. Functions, variables, and if statements.\nNotice that there's a bunch of code below here. It's been here the whole time.\nBut it wasn't running. Why not?\n\nTo see what that code does, change turnOnDraw to true and click run.\n\nYour last task is to read through all that code and figure out what it's doing.\nThen, try to edit some pieces of it. Play around and have fun!\n*/\n\nlet turnOnDraw = false;\n\n//When we use p5.js, draw() runs over and over again automatically.\nfunction draw() {\n //We check, using ===, if turnOnDraw has been set to true.\n if (turnOnDraw === true) { //If it is true, we do everythig surrounded by these { }\n frameRate(2); //Draw a new picture 2 times every second.\n noStroke(); //Turn off outlines.\n const diameter = Math.random() * width / 2; //Set up some variables with \"const.\"\n const xPos = Math.random() * width; //\"const\" is like \"let\" except you cannot change a const later.\n const yPos = Math.random() * height; //Math.random() generates a random decimal between 0 and 1.\n const col = getRandomColor(); //We call a function that is written below.\n fill(col); //fill() sets the color we will use to draw.\n ellipse(xPos, yPos, diameter, diameter); //ellipse() draws a circle or oval on screen.\n } else { //We do everything here if turnOnDraw is NOT true. In other words, if it is false.\n text(\"Nothing is crashing. Nice! Check out the code and keep working.\", 100, 100); //Print text on screen.\n }\n} //This ends the draw function.\n\n\n/*\nThis is a function that spits out a random RGB color.\nWe could have written all this code in draw() but it's cleaner to separate different tasks into different functions.\n*/\nfunction getRandomColor() {\n const r = Math.floor(Math.random() * 256);\n const g = Math.floor(Math.random() * 256);\n const b = Math.floor(Math.random() * 256);\n return color(r, g, b); //colors in JavaScript are often represented as a combo of three numbers: red, green, and blue.\n}\n\n//When you're finished here, click on style.css up top for a very brief look at CSS.\n\n","style.css":"/*\nCSS is a language for visual styling of things like text and buttons. \nIt works with HTML to make your web pages beautiful. \nThe CSS code below affects the text labeled with

in your HTML.\nUncomment the rest of that code to see what you can do with CSS.\nFeel free to adjust numbers and colors!\n/\nh1 {\n color: blue;\n /\n border: 2px solid black;\n border-radius: 50px;\n padding: 10px;\n display: inline-block; \n /\n}\n\n/\nThat's all for this part of the introduction to coding in Jippity.\nThe best part is that you're not alone! \nYou don't have to master all the details all at once; you have an amazing AI partner.\nAsk for help whenever you need it, but be as specific as you can.\nIt's not magic -- it's a computer.\nYou are the magic!\n\nHappy coding.\n*/","index.html":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n \n \n \n Welcome to Jippity\n \n \n \n\n\n \n

Welcome to Jippity!

\n \n \n \n \n \n\n \n\n"},"chat_history":[],"assets":[],"messages_sent":0,"comments":[],"steps":[]}