To practice the foundations of DOM manipulation here's an extra assignment.
Select the <h1>
tag and make it say hello class!
By using DOM manipulation, add a <p>
tag to the body and set it's content to "Today we're going to solidify our DOM skills!".
Loop over all the students in the ./script.js
files and create a <h3>
element for each of them with their first and last name.
There's an image set up for every student. They are hosted on https://wd-ft-feb.s3.eu-central-1.amazonaws.com/
. You can find the image of the student by lowercasing the firstname and adding it to the url. Elena's picture is for example hosted on https://wd-ft-feb.s3.eu-central-1.amazonaws.com/alena.png
. You have to create an image and set the attribute. Use the documentation on mozilla or w3schools if you forgot how to change te attribute of an html tag.
These's images are a bit big and they need a little picture frame. Change the styling by using dom manipulation. Set the width to 200px
and the border to 5px solid black
.
Create a button straight in the HTML. It should say "Choose favorite student". If you click on this button, a favorite student should be picked out at random (we don't have any real favorites ^^). Make that student appear at the top of the page. If you click on that button again, a new student should be picked out.