When visitors click the carousel buttons, change the image and page styles and also update a progress bar of images.
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.
- 0
- 1
- 2
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 itssrc
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.