As part of my coding journey, I’ve been diving into the key concept of loops in JavaScript. Recently, I had the opportunity to build a small web app that reminds me of a digital encyclopedia or Pokédex, but instead of featuring fictional creatures, it showcases real animals from around the world. It’s been an great experience learning how to manipulate data and create interactive user interfaces.

At the heart of this project is an array of objects called animalsArr, which contains information about various animals, including their names, classes (mammal, bird, reptile), diet (herbivore or not), continent of origin, YouTube video embed codes, and descriptions. It’s like having a mini-encyclopedia right at your fingertips!

To bring this data to life, I used JavaScript to dynamically generate a grid of clickable animal images. Here’s a snippet of the code that makes it happen:

for (let i = 0; i < animalsArr.length; i++) {
    const animal = animalsArr[i];
    const filename = animal.name.toLowerCase().replace(' ', '-');
    const img = `<img onclick="swapImage(${i})" src="images/${filename}.jpg" />`;
    animalPicDiv.innerHTML += img; 
}

In this loop, we iterate through each object in the animalsArr array. For each animal, we create an <img> tag with the appropriate file name (derived from the animal’s name) and add an onclick event that calls the swapImage function with the current index i. This allows us to keep track of which animal was clicked.

The real magic happens in the swapImage function:

function swapImage(i) {
    const animal = animalsArr[i];
    animalNameHeading.textContent = animal.name;
    animalDescriptionParagraph.textContent = animal.desc;
    videoPlayerDiv.innerHTML = `<iframe width="560" height="315" src="https://www.youtube.com/embed/${animal.youTube}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
}

When an animal image is clicked, this function is called with the corresponding index i. It retrieves the animal object from the animalsArr array and updates the heading and description elements with the animal’s name and description. Additionally, it dynamically generates an <iframe> tag to embed the animal’s YouTube video, using the youTube property from the object.

It’s cool to see how a simple array of objects can be transformed into an engaging and informative web app. The power of loops and JavaScript’s ability to manipulate the DOM make it possible to create interactive experiences like this.

Building this animal encyclopedia has been a great exercise, and it’s just the beginning. The possibilities are endless when it comes to creating dynamic web applications using JavaScript. I’m stoked to explore more advanced concepts and build even more exciting projects in the future.

If you’re curious about the code behind this project or want to learn more about loops and working with arrays of objects in JavaScript, feel free to check out the complete source code on the repo! Happy coding, and keep let’s keep exploring the wonders of the animal kingdom!