-
Do NOT alter the HTML or CSS and do not use an outside library.
-
Finish setting up the info object in the script.js file
- Following the format of the first item in the info object, complete the other 3 profiles with 3 other people in your breakout room
- Remember to create all the same properties as for the first profile, and the same method
-
Create a variable to reference the div with the id: #content
-
Create a variable called firstPerson to reference the first tag using the id: #first
- We will be treating this a tag like we have been using tags
-
Setup the first onclick event for the #first tag
- Hint: remember to prevent refresh
- Inside of this event, create FOUR new elements stored under different variables:
- Create a tag
- Create 3 different
tags
- Create a
- Set the innerHTML for the first
tag you created to display person #1's first and last name in a sentence
- ex: "My name is Francisco Bermúdez"
- Set the innerHTML for the next
tag to display a sentence stating the height of the person
- Set the innerHTML for the final
tag to display a sentence stating their favorite food, and color
- Using your knowledge about changing CSS with JS change the following styles for our that we made:
- color: "white"
- fontSize = "50px"
- margin = "5% 20% 5% 20%"
- padding = "30px"
- border = "solid black 5px"
- IMPORTANT: we have now created these 4 elements, but we have to add them to our HTML
- We want to put our 3
tags inside of our
, then add ourto our #content, HOW do we do that???- First, using appendChild add our 3
tags to our
- Then, add our to our #content :)
- First, using appendChild add our 3
- We want to put our 3
-
Now that we have completed one of our profiles, the next step is to repeat steps 4 - 5 for the other 3 people
-
EXTRA CREDIT: edit your code so that only ONE profile can be displayed at a time!
-
EXTRA EXTRA CREDIT: Add a to our profiles in addition to the 3
tags, when the button is pressed it should run the methods that we wrote for all of our profiles
muhammmadasc21 / objects_project Goto Github PK
View Code? Open in Web Editor NEWThis project forked from francisco-bk/objects_project