thacash | learn to code

When visitors click the carousel buttons, change the image and page styles and also update a progress bar of images.

javascript-carousel-1 javascript-carousel-2 javascript-carousel-3

Refactor Subtitles

In index.js, refactor subtitles from an array of strings to an array of objects.

Inside each object, put one key named text and the value should be one of your subtitles from the array of strings.

W3 Schools arrays
Mozilla arrays
W3 Schools objects
Mozilla objects
const subtitles = [
  { text: "darn glad to meet you" },
  { text: "thanks for stopping by my site" },
  { text: "check out what i make" },
];

Refactor the line that sets the subtitleHtml.textContent when the page first loads.

Add .text to subtitles[i].

Stack Overflow textContent and objects
Geeks for Geeks indexed collections
Mozilla indexed collections
Mozilla access item by index
const subtitleHtml = document.getElementById("subtitleHtml");
subtitleHtml.textContent = subtitles[i].text;

Upvote our Stack Overflow post linked above!

Save.

Refresh.

Look at the browser to make sure the first subtitle appears from the array of objects.

Update Button Functions

In moveLeft, update the line that sets subtitleHtml.textContent

W3 Schools if / else
W3 Schools comparisons
W3 Schools numbers
W3 Schools arithmetic
W3 Schools classList
const moveLeft = () => {
  if (i > 0) {
    i = i - 1;
    subtitleHtml.textContent = subtitles[i].text;
  }

  if (i === 0) {
    leftButton.classList.add("carousel-button-disabled");
  }

  if (i === subtitles.length - 2) {
    rightButton.classList.remove("carousel-button-disabled");
  }
};

In moveRight, update the line that sets subtitleHtml.textContent

W3 Schools for loop
Stack Overflow length - 1 
Mozilla length
Mozilla zero-based indexing
const moveRight = () => {
  if (i < subtitles.length - 1) {
    i = i + 1;
    subtitleHtml.textContent = subtitles[i].text;
  }

  if (i === subtitles.length - 1) {
    rightButton.classList.add("carousel-button-disabled");
  }

  if (i === 1) {
    leftButton.classList.remove("carousel-button-disabled");
  }
};

Get Image By Id

In index.html, add an id attribute to the img tag and set it equal to "mainImage".

W3 Schools img tag
W3 Schools id attribute
<img
  src="./images/main-image.png"
  alt="A street"
  class="title-image"
  height="auto"
  width="200"
  id="mainImage"
/>

In index.js, where you get the buttons by id, also get the main image.

Create a variable named mainImage and set it equal to time img element.

Console log mainImage.

W3 Schools get element by id
Mozilla get element by id
const leftButton = document.getElementById("leftButton");
const rightButton = document.getElementById("rightButton");
const mainImage = document.getElementById("mainImage");
console.log(mainImage);

Save.

Refresh.

Look in the browser console for the img element.

Add Image Files

Add two more images to the images subfolder.

Name them main-image-two.png and main-image-three.png.

Use whatever image file extensions you want.

Use images that are the same dimensions. Try taking them all from the same camera or cropping them.

You should have three images in the images folder.

Here are the images in this example

main-image.png
main-image-two.png
main-image-three.jpg

Add the image files to the array of subtitle objects.

const subtitles = [
  {
    text: "darn glad to meet you",
    image: "main-image.png",
  },
  {
    text: "thanks for stopping by my site",
    image: "main-image-two.png",
  },
  {
    text: "check out what i make",
    image: "main-image-three.jpg",
  },
];

Update Images In Carousel

In index.js, add a line of code in moveLeft and moveRight that sets the src attribute for mainImage to the image path using a template string.

Here is what the line looks like.

W3 Schools string templates
Mozilla string templates
// Use template string to set the image path
// Template strings are like string concatenation, just different syntax
mainImage.src = `./images/${subtitles[i].image}`;

Here is the line in moveLeft and moveRight.

const moveLeft = () => {
  if (i > 0) {
    i = i - 1;
    subtitleHtml.textContent = subtitles[i].text;
    mainImage.src = `./images/${subtitles[i].image}`;
  }

  if (i === 0) {
    leftButton.classList.add("carousel-button-disabled");
  }

  if (i === subtitles.length - 2) {
    rightButton.classList.remove("carousel-button-disabled");
  }
};

const moveRight = () => {
  if (i < subtitles.length - 1) {
    i = i + 1;
    subtitleHtml.textContent = subtitles[i].text;
    mainImage.src = `./images/${subtitles[i].image}`;
  }

  if (i === subtitles.length - 1) {
    rightButton.classList.add("carousel-button-disabled");
  }

  if (i === 1) {
    leftButton.classList.remove("carousel-button-disabled");
  }
};

Save.

Refresh.

Click the right and left buttons and look for the image to change.

Create Page Style Alternatives

In styles.css, create three new classes named .page-title-wrapper-one, .page-title-wrapper-two, and .page-title-wrapper-three.

Give them background-color and color values different from one another.

Delete the background-color and color from the existing .page-title-wrapper class.

Place the three new classes below .page-title-wrapper.

.page-title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;

  /* Add position relative */
  position: relative;
}

.page-title-wrapper-one {
  background-color: black;
  color: aliceblue;
}

.page-title-wrapper-two {
  background-color: darkslategray;
  color: pink;
}

.page-title-wrapper-three {
  background-color: #425c7b;
  color: yellow;
}

In index.html, update the class list for pageWrapper to include .page-title-wrapper-one.

Stack Overflow multiple css classes
W3 Schools html css classes
<div id="pageWrapper" class="page-title-wrapper page-title-wrapper-one">

In index.js, add the styles to the array of subtitle objects.

const subtitles = [
  {
    text: "darn glad to meet you",
    image: "main-image.png",
    styles: "page-title-wrapper-one"
  },
  {
    text: "thanks for stopping by my site",
    image: "main-image-two.png",
    styles: "page-title-wrapper-two"
  },
  {
    text: "check out what i make",
    image: "main-image-three.jpg",
    styles: "page-title-wrapper-three"
  },
];

Get Page By Id

In index.html, add an id attribute to the page wrapper div tag and set it equal to "pageWrapper".

<div id="pageWrapper" class="page-title-wrapper">

In index.js, where you get the buttons and image by id, also get the page wrapper.

Create a variable named mainImage and set it equal to the img element.

Console log pageWrapper.

const leftButton = document.getElementById("leftButton");
const rightButton = document.getElementById("rightButton");
const mainImage = document.getElementById("mainImage");
const pageWrapper = document.getElementById("pageWrapper");
console.log(pageWrapper);

Save.

Refresh.

Look in the browser console for the page wrapper element.

Update Styles In Carousel

In index.js, add a line of code in moveLeft and moveRight that sets the class attribute of pageWrapper equal to page-title-wrapper plus the styles of the subtitle object using a template string.

Here is what the line looks like.

W3 Schools string templates
Stack Overflow string templates vs concatenation
// Use template string to set the className
// Template strings are like string concatenation, just different syntax
pageWrapper.className = `page-title-wrapper ${subtitles[i].styles}`;

Here is the line in moveLeft and moveRight.

const moveLeft = () => {
  if (i > 0) {
    i = i - 1;
    subtitleHtml.textContent = subtitles[i].text;
    mainImage.src = `./images/${subtitles[i].image}`;
    pageWrapper.className = `page-title-wrapper ${subtitles[i].styles}`;
  }

  if (i === 0) {
    leftButton.classList.add("carousel-button-disabled");
  }

  if (i === subtitles.length - 2) {
    rightButton.classList.remove("carousel-button-disabled");
  }
};

const moveRight = () => {
  if (i < subtitles.length - 1) {
    i = i + 1;
    subtitleHtml.textContent = subtitles[i].text;
    mainImage.src = `./images/${subtitles[i].image}`;
    pageWrapper.className = `page-title-wrapper ${subtitles[i].styles}`;
  }

  if (i === subtitles.length - 1) {
    rightButton.classList.add("carousel-button-disabled");
  }

  if (i === 1) {
    leftButton.classList.remove("carousel-button-disabled");
  }
};

Save.

Refresh.

Click the right and left buttons and look for the styles to change.

Create Progress Bar

In index.html, below the .carousel-wrapper add a new div with an id equal to progressBar.

<div id="progressBar"></div>

In index.js, where you get the other elements by id, also get the progress bar.

Create a variable named progressBar and set it equal to the progress bar element.

Console log progressBar.

const leftButton = document.getElementById("leftButton");
const rightButton = document.getElementById("rightButton");
const mainImage = document.getElementById("mainImage");
const pageWrapper = document.getElementById("pageWrapper");
const progressBar = document.getElementById("progressBar");
console.log(progressBar);

Save.

Refresh.

Look in the browser console for the progress bar.

Delete the console log from your code.

Import Progress Bar

In index.js, at the bottom of the file create a variable named loadProgressBar and set it equal to an arrow function definition.

W3 Schools arrow function
Mozilla arrow function
W3 Schools function keyword
Stack Overflow arrow functions when to use
const loadProgressBar = () => {};

In the body of loadProgressBar, console log progressBar.

After the function definition, call the function.

Mozilla defining functions
Mozilla calling functions
const loadProgressBar = () => {
  console.log(progressBar);
};

loadProgressBar();

Save.

Refresh.

Look for the progressBar element in the browser console.

Load Progress Bar

In loadProgressBar, below the console log add a for loop.

In each iteration of the for loop, console log the index position.

W3 Schools for loop
Mozilla for loop
Mozilla indexed collections
Mozilla access item by index
const loadProgressBar = () => {
  console.log(progressBar);
  for (let index = 0; index < subtitles.length; index++) {
    console.log(index);
  }
};

loadProgressBar();

Save.

Refresh.

Look in the browser console for the following.

In each iteration of the for loop, add to the console log the object at that index position.

const loadProgressBar = () => {
  console.log(progressBar);
  for (let index = 0; index < subtitles.length; index++) {
    console.log(index, subtitles[index]);
  }
};

loadProgressBar();

Save.

Refresh.

Look in the browser console for the following.

0 {text: 'darn glad to meet you', image: 'main-image.png', styles: 'page-title-wrapper-one'}
1 {text: 'thanks for stopping by my site', image: 'main-image-two.png', styles: 'page-title-wrapper-two'}
2 {text: 'check out what i make', image: 'main-image-three.jpg', styles: 'page-title-wrapper-three'}

In each iteration of the for loop, refactor the body of the loop to console log the following.

The index
The image for the object at that index
A new img element with its src equal to the object image

W3 Schools create element
Mozilla create element
W3 Schools Relative Path
const loadProgressBar = () => {
  console.log(progressBar);
  for (let index = 0; index < subtitles.length; index++) {
    const newImage = document.createElement("img");
    newImage.src = `./images/${subtitles[index].image}`;
    console.log(index, subtitles[index].image, newImage);
  }
};

loadProgressBar();

Display Progress Bar

In styles.css, add a new class named .progress-image.

Set the following styles.

.progress-image {
  border-radius: 50%;
  height: 20px;
  width: 20px;
  margin: 10px;
  opacity: 0.5;
}

In index.js, add to loadProgressBar a line that applies the progress-image class to newImage.

Add another line that appends newImage to progressBar.

W3 Schools className
Mozilla append
Mozilla prepend
const loadProgressBar = () => {
  console.log(progressBar);
  for (let index = 0; index < subtitles.length; index++) {
    const newImage = document.createElement("img");
    newImage.src = `./images/${subtitles[index].image}`;
    
    // This line applies the new class
    newImage.className = "progress-image";
    
    // This line appends the new image to the progress bar
    progressBar.append(newImage);
    
    console.log(index, subtitles[index].image, newImage);
  }
};

loadProgressBar();

Save the file.

Refresh the browser.

Look in the console for three little images horizontally aligned below the subtitle.

Update Progress Bar

In index.js, at the bottom of the code add a function definition named updateProgressBar.

const updateProgressBar = () => {};

Add to the body a line of code that gets all the elements with the class named progress-image.

Console log the collection of image elements.

W3 Schools getElementsByClassName
Mozilla getElementsByClassName
const updateProgressBar = () => {
  const imagesCollection = document.getElementsByClassName("progress-image");
  console.log(imagesCollection);
};

In moveRight, call updateProgressBar each time you add 1 to i.

const moveRight = () => {
  if (i < subtitles.length - 1) {
    i = i + 1;
    subtitleHtml.textContent = subtitles[i].text;
    mainImage.src = `./images/${subtitles[i].image}`;
    pageWrapper.className = `page-title-wrapper ${subtitles[i].styles}`;
    
    // This is the new line that calls updateProgressBar
    updateProgressBar();
  }

  if (i === subtitles.length - 1) {
    rightButton.classList.add("carousel-button-disabled");
  }

  if (i === 1) {
    leftButton.classList.remove("carousel-button-disabled");
  }
};

Save.

Refresh.

Click right.

Look in the browser for the collection of three img elements.

It should look like this.

HTMLCollection(3) [img.progress-image, img.progress-image, img.progress-image]
0: img.progress-image
1: img.progress-image
2: img.progress-image
length: 3

In updateProgressBar, replace the console log with a for loop that console logs the following.

The i carousel counter
The index from the for loop
The item at that index in imagesCollection

const updateProgressBar = () => {
  const imagesCollection = document.getElementsByClassName("progress-image");
  for (let index = 0; index < imagesCollection.length; index++) {
    console.log(index, imagesCollection[index]);
  }
};

Save.

Refresh.

Click right once.

Look in the browser for this.

1 0 <img src="./images/main-image.png" class="progress-image">
1 1 <img src="./images/main-image-two.png" class="progress-image">
1 2 <img src="./images/main-image-three.jpg" class="progress-image">

Click right again.

Look in the browser for this.

2 0 <img src="./images/main-image.png" class="progress-image">
2 1 <img src="./images/main-image-two.png" class="progress-image">
2 2 <img src="./images/main-image-three.jpg" class="progress-image">

Display Progress Update

In styles.css, create a new class named .progress-image-selected.

Give it opacity equal to 1.

Put it below .progress-image.

.progress-image {
  border-radius: 50%;
  height: 20px;
  width: 20px;
  margin: 10px;
  opacity: 0.5;
}

.progress-image-selected {
  opacity: 1;
}

In loadProgressBar, inside the for loop on the line right above the append, write an if condition that checks if index is the first index position in the array of subtitles.

If the condition is true, add the "progress-image-selected" style class.

const loadProgressBar = () => {
  console.log(progressBar);
  for (let index = 0; index < subtitles.length; index++) {
    const newImage = document.createElement("img");
    newImage.src = `./images/${subtitles[index].image}`;
    newImage.className = "progress-image";
    if (index === 0) {
      newImage.classList.add("progress-image-selected");
    }
    progressBar.append(newImage);
  }
};

Save the file and refresh the browser.

The left image should be bright and the other two dark.

In updateProgressBar, in the for loop add if / else blocks.

The if block should check if i equals index.

If the condition is true, add "progress-image-selected" to the img element in that iteration of the loop.

In the else block, remove "progress-image-selected" from the img element in that iteration of the loop.

const updateProgressBar = () => {
  const imagesCollection = document.getElementsByClassName("progress-image");
  for (let index = 0; index < imagesCollection.length; index++) {
    console.log(i, index, imagesCollection[index]);
    if (i === index) {
      imagesCollection[index].classList.add("progress-image-selected");
    } else {
      imagesCollection[index].classList.remove("progress-image-selected");
    }
  }
};

Save the file and refresh the browser.

Click the right button.

The images should change brightness as you click.

In moveLeft, add the line of code that calls updateProgressBar after each time i decreases by 1.

const moveLeft = () => {
  if (i > 0) {
    i = i - 1;
    subtitleHtml.textContent = subtitles[i].text;
    mainImage.src = `./images/${subtitles[i].image}`;
    pageWrapper.className = `page-title-wrapper ${subtitles[i].styles}`;
    
    // This is the new line that updates the progress bar
    updateProgressBar();
  }

  if (i === 0) {
    leftButton.classList.add("carousel-button-disabled");
  }

  if (i === subtitles.length - 2) {
    rightButton.classList.remove("carousel-button-disabled");
  }
};

Save the file and refresh the browser.

Click the right button.

The images should change brightness as you click.

Click the left button. The images should change styles in the browser.

expand carousel

portfolio website

expand carousel

Refactor Subtitles

Upvote our Stack Overflow post linked above!

Update Button Functions

Get Image By Id

Add Image Files

Use whatever image file extensions you want.

Use images that are the same dimensions. Try taking them all from the same camera or cropping them.

Update Images In Carousel

Create Page Style Alternatives

Get Page By Id

Update Styles In Carousel

Create Progress Bar

Import Progress Bar

Load Progress Bar

Display Progress Bar

Update Progress Bar

Display Progress Update