Mastering JavaScript Arrays and Loops: Build an Image Carousel with Save & Remove Features

JavaScript Arrays and Loops: A Hands-On Tutorial for CPSC1520

Arrays are the backbone of data storage in JavaScript. Whether you're building a photo gallery, a to-do list, or even a music playlist, understanding how to loop through arrays and manipulate them is essential. In this tutorial, we'll walk through a practical exercise: creating an image carousel, saving favorite images to a list, and removing them. Along the way, you'll master forEach, includes, splice, and event listeners. Let's dive in!

What You'll Learn

• How to create and modify an array of image names
• How to render images to the DOM using loops
• How to prevent duplicate entries in a saved list
• How to remove items from an array by index
• How to keep the UI in sync with your data

Step 1: Build the Carousel with an Array of Images

First, you need an array of image filenames. In the starter code, you'll find an images array. Modify it to include the names of your images (e.g., 'cat.jpg', 'dog.jpg', 'polar-bear.jpg'). No need to include the full path—just the filenames.

let images = ['cat.jpg', 'dog.jpg', 'polar-bear.jpg'];

Next, create a function called renderCarousel. This function will loop through the images array and call createCarouselItem for each image, passing the image name as an argument. A for loop or forEach works perfectly here.

function renderCarousel() {
    images.forEach(image => {
        createCarouselItem(image);
    });
}
renderCarousel();

After calling renderCarousel(), the page should display the images in a carousel layout. This is your first win: you've used an array and a loop to dynamically generate HTML!

Step 2: Save Images to 'My Images' Without Duplicates

Now, let's add interactivity. When a user clicks on an image in the carousel, it should be saved to a separate list called savedImages. An event listener is already set up to capture the click and provide the itemIndex of the clicked image. Your job is to check if that image is already in savedImages using the includes() method.

function saveImage(itemIndex) {
    const imageName = images[itemIndex];
    if (!savedImages.includes(imageName)) {
        savedImages.push(imageName);
        renderImageList();
    }
}

Notice the condition: if (!savedImages.includes(imageName)). This prevents duplicates—clicking 'cat' three times adds it only once. After adding, we call renderImageList() to update the displayed list.

Step 3: Render the Saved Images List

The renderImageList function loops through savedImages and calls addToSavedImageList for each saved image. Before calling the loop, clear the inner HTML of the saved list container to avoid stacking duplicates.

function renderImageList() {
    savedList.innerHTML = '';
    savedImages.forEach(image => {
        addToSavedImageList(image);
    });
}

Now, every time you save an image, the list refreshes and shows exactly the unique images you've saved.

Step 4: Remove Images from 'My Images'

Finally, we need a remove feature. Each saved image item has a remove button that triggers an event with itemIndexToRemove. Use the splice() method to remove that item from the savedImages array, then re-render the list.

function removeImage(indexToRemove) {
    savedImages.splice(indexToRemove, 1);
    renderImageList();
}

splice(index, 1) removes exactly one element at the given index. After removal, the list updates instantly.

Why This Matters: Real-World Analogies

Think of arrays like a playlist in a music app. You add songs (images), check if a song is already in your favorites (includes), and remove songs you're tired of (splice). Loops are like playing each song one by one—they let you process every item efficiently. This pattern appears everywhere: in e-commerce shopping carts, social media timelines, and even in AI training datasets where you filter unique entries.

Common Pitfalls and Tips

• Forgetting to re-render: Always call your render function after modifying the array.
• Using == instead of ===: Strict equality avoids type coercion bugs.
• Not clearing innerHTML: If you don't clear the container before looping, items will stack.

Conclusion

You've just built a fully functional image carousel with save and remove features using JavaScript arrays and loops. This exercise covers core concepts that you'll use in every JavaScript project. Keep practicing with different data—like student names, game scores, or trending hashtags—and you'll become a pro in no time.

Happy coding!