What i learnt from my first software development project...

So as part of the software development program I am currently undergoing, we were given a project to do pertaining to what we have covered so far in HTML, CSS and JavaScript.The project required that the app we create be a HTML/CSS/JS front end that accesses data from a public API. Being new to the programming world, this was a bit daunting,but i did my best.I encountered a few problems here and there especially in debugging my code as well as interacted with new topics of interest. One of those was how to add click event listeners to dynamically created elements.

For my project, I created an online book store whose data was mainly populated from the API. For each book, I had placed a heart icon to turn red and add an item to the wish list when clicked. However, when the click event was placed in the div where the data was to be sent,it was unresponsive.

The HTML for existing data is as below:

<div class="books-list">                    <div class="book-card">                        <img src="assets/images/480x720.jpeg" alt="book-1">                        <div class="book-detail">                            <h3>The Stars Below</h3>                            <h4>by David Baldacci</h4>                            <div class="wishlist-details">                                <i class="fa fa-heart-o" aria-hidden="true"></i>                                <p class="hide">Add to wish list</p>                            </div>                        </div>                    </div>          </div>

The JS that works to change the heart icon to red and add the book to the wish list is as below.

 const booksList = document.querySelector('.books-list');    booksList.addEventListener('click', e => {        if (e.target.className === 'fa fa-heart-o') {            e.target.className = 'fa fa-heart';        } else if (e.target.className === 'fa fa-heart') {            e.target.className = 'fa fa-heart-o';        }    })

From the code snippet above, we can see that the event is to occur on the books-list div with the target being the icon. This however did not work for the newly created elements fetched from the API by the asynchronous function which takes time to be loaded, and thus the event does not find its target.

I came across this post that really helped. It proposes the use of event bubbling which is done by adding the event listener to a parent element that is higher up. To ensure that it is only handled at the div containing the icon, the class is specified. Therefore, instead of the

 const booksList = document.querySelector('.books-list');

I placed the event listener on the main tag within which the div is and specified the class of the target. i.e

  const main = document.querySelector('main');    main.addEventListener('click', e => {        if (e.target.classList.contains('fa-heart-o')) {            e.target.classList.remove('fa-heart-o');            e.target.classList.add('fa-heart');            e.target.nextElementSibling.classList.remove('hide');            e.target.nextElementSibling.classList.add('hide1');        } else if (e.target.classList.contains('fa-heart')) {            e.target.classList.remove('fa-heart');            e.target.classList.add('fa-heart-o');            e.target.nextElementSibling.classList.remove('hide1');            e.target.nextElementSibling.classList.add('hide');        }    })

After this correction, the click event responded seamlessly for each of the newly added elements .