Exercises (Part 2): JavaScript for the Web

Warm-up 1

Instructions

In your script.js file:

1. Using let, declare a variable named mainTitle.
2. Using document.querySelector(), select a level 1 heading element (h1) and store it in mainTitle.
3. Using console.log(), print out the value of the h1 element's innerText property.
4. add() the picked class to the h1 element's classList.
5. NEW: What happens if you assign (=) a new value to the innerText property?

Warm-up 2

Consider the following array:

let warmupArray = [ 'waffle', 'flapjack', 'pancake',
	'crêpe', 'hotcake', 'griddle cake', 'blintz' ];

1. What is the element at index 4? How can we access it using bracket notation?
2. What is the index of 'waffle'?
3. What is the index of 'blintz'? How can we express it using warmupArray's length property?

Exercise 6

Pre-made CSS classes: is-collapsible, collapsible.

 for (initialization; condition; afterthought) { ... }

Instructions

This webpage has a number of section elements that have been marked with the class is-collapsible to signal that they are compatible with this behaviour. In this exercise, we will use a for loop to prepare our webpage for having collapsible section elements.

1. Open your script.js file and comment out any code from previous exercises. We will be building on our new JavaScript code.
2. Select all elements with the is-collapsible class, store the result in a variable, and use a for loop to add() the collapsible class to each selected element.

Exercise 7

Instructions

For section elements that are collapsible, whether or not they are open or closed is based on the presence (or absence) of the open class on the section element's header element.

In this exercise, we will use event listeners to create usable buttons for the collapsible section elements. Your task is as follows:

1. Create a callback function for addEventListener() that will toggle() the open class on the currentTarget of the event it is provided (e.g., event.currentTarget).
2. Select all header elements that are descendant of elements with the collapsible class and store them in a variable. Hint:_ Descendant selectors follow the pattern .className elementName
3. Add a 'click' event listener to each of these elements, providing the callback function you created above as the listener function.

Hint(s)

• Listeners are added to elements using the addEventListener() method of an element. For a mouse click listener (a click event), this typically looks like:

someElement.addEventListener('click', listenerFunctionName)

• listenerFunctionName— the name of the function that gets run when the specified event is detected (called a callback function).
• Function creation:

function functionName (parameterA, parameterB, ...){
 // function code
}

• function— JavaScript's keyword for declaring functions.
• functionName— the name of the function that's being created; used to run (call) the function.
• (parameterA, ....)— information that the function needs to run properly.
• { function code }— code to run when the function is called.

Exercise 8

Instructions

The section that contains the elements needed for next exercise's image slideshow is currently hidden. To prepare your webpage for the next exercise, and as a review of some of the things we've covered, your task is as follows:

• Select the element with ID 'relaxing-images' and remove() the hidden class from it. This element contains everything needed for the slideshow feature.

That's it for this exercise! 🎉

Exercise 9

Instructions

The slide show's initial state should display the element with the first image and hide all other elements. To get the slideshow ready for use, your task is as follows:

1. Inside this section, the slideshow images are each a list item (li) element, they are all contained in an element with the carousel-list class.
2. Create a variable named imgs to save this collection.
3. Then, except for the first, hide each element using the hidden class.

Hint(s)

The selector: '.carousel-list li' matches the appropriate list item elements for the slideshow!

Exercise 10

Instructions

Building on your code from Exercise 9:

1. Add a 'click' event listener to .carousel-list that uses a callback function named goToNextSibling.
2. Create a variable, currentImg, and store the first slideshow list item element in it.
3. Then, create the function goToNextSibling which:
   • Hides currentImg using the hidden class.
   • remove()s the hidden class from the nextElementSibling of currentImg.
   • Updates (reassigns) currentImg to its nextElementSibling.

If need be, use the code scaffold below to get started:

let imgs = document.querySelectorAll('.carousel-list li');
// ...rest of exercise 6 code here...

let currentImg = imgs[0]
function goToNextSibling(event) { 
  // ...your click listener code goes here...
};
document.querySelector('.carousel-list').addEventListener('click', goToNextSibling);

Exercise 11

Instructions

Let's put conditional statements to use. Your task is to fill in the else block in the goToNextSibling function, below:

function goToNextSibling(event) {
  currentImg.classList.add('hidden');

  if (currentImg.nextElementSibling) { // <-- this line has been added for you

    currentImg.nextElementSibling.classList.remove('hidden');
    currentImg = currentImg.nextElementSibling;

  } else { // <-- this line has been added for you

    // your code goes here!

  }
}

First sibling element:

currentImg.parentElement.firstElementChild