Let's get to know each other and talk about our favorite things!
Use JavaScript For Loops, Event Listeners, and Arrays to communicate what your favorite things are on click of a button.
To complete this project, students should have the following:
- Basic understanding of HTML structure and attributes.
- Basic understanding of Flex Box
- Basic understanding of JavaScript and DOM
- Introduction to For Loops
To complete this exercise, fulfill the following requirements:
- Set up your project file structure through the command line.
- Create the following:
- HTML, CSS, JS file
- Link all of your files correctly.
- Create the following in your HTML. The following elements are indented showing their nesting relationships. When you have finished coding your HTML, you should have 1 container with 3 divs of class "section" inside, and each section should have an h1 and button element:
- div with a class of "container"
- div with a class of "section"
- h1 with id of "response1"
- button with id of "button1" and text of "My favorite desserts are..."
- div with a class of "section"
- h1 with id of "response2"
- button with id of "button2" and text of "My favorite foods are..."
- div with a class of "section"
- h1 with id of "response3"
- button with id of "button3" and text of "My favorite games are..."
- div with a class of "section"
To complete the second part of this exercise, fulfill the following requirements:
In your CSS file, do the following:
- Target the container class.
- Set the width to 100% and height to 600px.
- Activate flex box! Hint: Use the property 'display'.
- Center your objects horizontally and vertically!
- Target the section class.
- Activate flex box!
- Center your objects horizontally and vertically!
- Set the proper direction of your
flex-direction
property so that it looks visually pleasing.
To complete the third part of this exercise, fulfill the following requirements:
In your JS file, do the following:
- Store your button1, button2, and button3 in variables. Hint: Use
document.getElementById()!
- Store your response1, response2, and response3 divs in variables. Hint: Use
document.getElementById()!
- Create a variable called 'favoriteDesserts'. Store an array of 3 strings, each string will be one of your favorite desserts.
- Create a variable called 'favoriteFoods'. Store an array of 3 strings, each string will be one of your favorite foods.
- Create a variable called 'favoriteGames'. Store an array of 3 strings, each string will be one of your favorite games.
- Add an Event Listener to button1 that will listen for a click. When button1 is clicked, change the
innerHTML
of response1 to "Look in the console!". Then, create a for loop that will iterate through the length of the favoriteDesserts array and console.log every element in that array using i. - Add an Event Listener to button2 that will listen for a click. When button2 is clicked, change the
innerHTML
of response2 to "Look in the console!". Then, create a for loop that will iterate through the length of the favoriteFoods array and console.log every element in that array using i. - Add an Event Listener to button3 that will listen for a click. When button3 is clicked, change the
innerHTML
of response3 to "look in the console!". Then, create a for loop that will iterate through the length of the favoriteGames array and console.log every element in that array using i.
- Add pictures!
- Pretty up the page!
- Instead of changing the response innerHTML to "Look in the console!", change the response innerHTML to show the 1st, 2nd, and 3rd elements in the array. Hint: Ex. You can add strings together to form a new string. If the elements in the array are strings, you could do arr[0]+arr[1]...etc. to form a new string!