Variables are names that are associated with a value and that value can change.
In JS, you can use variables to hold the values of text/string, numbers, or objects.
A variable is used to store information for later use, similar to storing values for x and y in algebra.
Start by declaring the variable in your JS code like this:
The key to using variables it to give them a meaningful name, so that it is easy to understand in your code.
Must begin with a letter
Names are case sensitive (Ex: FirstName does not equal firstName)
No spaces in the name - if using multiple words just put them together
Start with a lowercase letter and capitalize the first letter of any other words used in the name (Ex: firstName, lastName)
Make sure the name is meaningful (Ex: firstName means more than x or y)
Input - gives the user a textbox to type into
<input id="inputName" placeholder="What you want the text on the input to be goes here"></input>
Button - used to allow the user to make something happen
<button onclick='functionName();'>Text on the Button Goes Here</button>
Functions are blocks of code designed to perform a specific task.
Functions are executed when something calls it (clicking a button, clicking a hyperlink, hovering, etc.)
For example, if you are on Amazon placing an order, when you click Submit your order is processed. Clicking the Submit button would call a function that would process your order (charge your credit card, ship the order, etc.).
1) Use the Codepen we created together as a starting point. If you don’t have that, you can click here.
2) Add or change the following things about your website:
a. Add a 3rd Input to your HTML to collect some other type of info about the user (age, date of birth, favorite food, etc.)b. Add a Variable to your JS to store that 3rd inputc. Add a line of code to your displayMessage function that will pull the user’s response into the JSd. Update the welcome message to include that new piece of information about the user.
3) Make sure you test your website to make sure it looks and works like you want it to. Double-check that your welcome message displays with good punctuation, spelling, and spacing.
4) You can submit a link to your codepen. Be sure to save your work occasionally!!
Print this document and follow the instructions.