Exercises (Part 1): JavaScript for the Web

Exercise 0

Instructions

Note: JavaScript normally loads and runs when a web page loads. All of our JavaScript code will go in 👉 script.js 👈, a file that has already been setup to load when our project loads. In your code editor, re-open script.js if you closed it. Starting on a new/blank line below the code that's already written:

1. Use the console object's log() method, console.log("..."), to log the message "Hello world!".
2. Open the console at the bottom of the preview pane and verify that your message was logged.
3. Modify your code from step 1 to log a new message of your choosing!

console.log('some message');

Exercise 1

Instructions

document.querySelector('someSelector');

For this exercise, you will use console.log() and document.querySelector()☝ to select specific DOM elements and read their properties.

1. Select the main element. What is the value of its childElementCount property?
2. Select an element with the dark class. What is the value of its id property?
3. Select a p (paragraph) element that's inside an element with ID relaxing-images. What is the value of its innerText property?

Hint(s)

Selector hints:

• Class selector: ._dotclassName
• Element selector: #_hashelementId

Exercise 1.5

Instructions

document.querySelector('selector').someProperty = 'value';

Use the assignment operator = to change properties of DOM elements.

1. Select an h1 element and set its innerText property to "Hi! I'm <name> and I'm learning JavaScript!"
2. Repeat step 1 for an h2 element, using your own message. Hint: Don't forget the quotation marks ("...")!

• Bonus 1: Select an img (image) element inside an element with ID html-basics and set its src property to "https://picsum.photos/200".
• Bonus 2: For step 1, change the innerHTML property (instead of innerText) and wrap your name in <span class='big'>...</span> or <em>...</em> tags, e.g., "Hi! I'm <em>name</em>..."

Hint(s)

Selector hints:

• Bonus 1 selector:

"#html-basics img"

• Bonus 2 full message (using both span and em):

"Hi! I'm <span class='big'>name</span> and I'm learning <em>JavaScript!</em>"

Note: manual line breaks can be inserted using \n for innerText and <br> for innerHTML.

Exercise 2

Pre-made CSS classes to use: picked, hidden, fun.

Instructions

document.querySelector('someSelector').classList.add('className');

For this exercise, you will use JavaScript to select DOM elements and modify their classList property.

To start, open the tab with your project. Then, select...

1. ...an h1, h2, section, or main element from your project's DOM, and add() the picked class to it.
2. ...an element with the hidden class and remove() it.
3. ...the element with ID using-css and toggle() the fun class on it.

_Finally, for each of the steps above, what happens if you run the exact same code multiple times? (Try it!)

Hint(s)

An element's classList property contains a list of its classes.

• add('classToAdd')— adds classToAdd to the classList. If it is already there, nothing happens
• remove('classToRemove')— removes classToRemove from the classList. If it isn't there, nothing happens.
• toggle('classToToggle')— if classToToggle is in the classList, it is removed; if classToToggle isn't there, it is added.

document.querySelector('someSelector').classList.add('classToAdd');
document.querySelector('someSelector').classList.remove('classToRemove');
document.querySelector('someSelector').classList.toggle('classToToggle');

Exercise 3

Instructions

Pre-made CSS classes to use: hidden, transparent, fun.

In your script.js file, start by commenting out the line of code that was added in the previous exercise. Now:

1. Use let to declare a variable named hiddenSection.
2. Use querySelector() to select an element with the hidden class and assign (=) it to hiddenSection.
3. Using the hiddenSection variable:
   • toggle() the hidden class
   • remove() the transparent class
   • add() the fun class

Hint(s)

Don't forget— add(), remove(), and toggle() are accessed through the classList property!

• Variables are created (declared) using the let keyword, followed by another word which beocmes the variable's name.
• Variables are start with an undefined value and are assigned values using the assignment operator, =.
• Using a single statement to both declare a variable and assign it a value is called initializing:

let newVariable = valueOfVariable;

Exercise 4

Instructions

In your script.js file, first comment out the code from the previous exercise. Now:

1. Use let to declare a variable named headings.
2. Use the querySelectorAll() method to select all h2 elements and assign (=) the returned list of elements to headings.
3. Using the headings variable, do the following:
   • a. log() the number of elements (its length property) in headings.
   • b. add() the picked class to the third element in the array.
   • c. log() the value of the innerText property of the element at index 1.
   • d. toggle() the hidden class on the parent element (use the parentElement property) of the element at index 0.

Hint(s)

An array is an ordered collection of data. A NodeList isn't an array, but it behaves similarly enough for our purposes.

• document.querySelectorAll('someSelector')— returns a list of all elements matching the pattern defined by someSelector
• myArray[index]— retrieves an element from myArray in the position specified specified by index inside the square brackets ([])

Exercise 5

Pre-made CSS classes: message, reveal.

Instructions

In this exercise, we will use a for loop to reveal a HIDDEN MESSAGE on this web page! First, comment out any code from previous exercises. Now:

1. The words of the HIDDEN MESSAGE are spread through the page's section elements, but they all have the message class.
2. Use let to declare a variable named words.
3. Assign words the result of a querySelectorAll() that would match all the hidden words.
4. Using a for loop, add() the reveal class to each element in your words variable.
5. Read the HIDDEN MESSAGE! : )

Hint(s)

for loop syntax to loop through an array or list (e.g., myArray):

for (let index = 0; index < myArray.length; index = index + 1) {
 // code to repeat
}