Practice the vanilla JavaScript techniques you learned in the guide.
- Get the first element that has a class of
.bg-redand a[data-sandwich]value oftuna. - Get the all of the
<divs>that have a[data-sandwich]value ofham. - Log the results of both to the console.
- Get the all of the
<divs>that have a[data-sandwich]value ofham. - Loop through each one and log it in the console.
- Get the all of the
<divs>that have a[data-sandwich]value ofham. - Loop through each one.
- If it has a class of
.bg-red, remove it. - If it has a class of
.bg-blue, change it to.bg-red. - If it has a class of
.bg-navy, change it to.bg-green.
- Get the all of the
<divs>. - Loop through each one.
- Check the element's height.
- If it's less than
25px, set thebackground-colortodarkslategrey. - If it's greater than or equal to
25px, set thebackground-colortopurple.
- Get all
<divs>. - Loop through each one.
- If it has an attribute of
[data-sandwich], give it a class of.bg-green. - If the
[data-sandwich]attribute isham, remove all classes.
- Listen for
clickevents. - If the clicked element has a data attribute of
[data-click-me]: a. Change thebackground-colorto the value of[data-click-me]. b. Update the value of[data-click-me]to the previous background color.
- Get the first element with an attribute of
[data-snack]equal tochips. - Add to the existing HTML with a short note about chips.
- Get all form elements.
- If the form is a text input, change the type to
password. - if the form is a checkbox, check it.
- If it's a radio button, check if it's the selected option. If it is, log the value in the console.
- If it's a textarea, give it a value.
- Get the element with an ID of
#d3. - Get all of the elements parents.
- Add the
.bg-greenclass to all of them until you get to thedocument.body.
- Get the element with an ID of
#wrapper. - Get all of the direct decendants only.
- Log the decendants in the console
- Get the list item with an ID of #item-3
- Get all of that list item's siblings
- Log the siblings in the console
- Add two of your favorite books to the array of books.
- Add a new key,
balloons, to thepartyListobject, with a balloon color - Merge the
partyListUpdatedobject with thepartyListobject, and don't loose any of the keys or values. - Log
booksand the complete party list to the console.
- Whenever a div with the .find-me class enters the viewport, change it's background color to
purpleand it's color to white.
- Get every element on the page with a class of
.find-me. - For each element, calculate it's distance from the top of the page.
- Log that distance in the console.
- Get the
[data-photo-album]container from the DOM. - Get photos from https://jsonplaceholder.typicode.com/.
- Display the first 10 photos in the photo album container (nothing fancy, just one after the other).