Hey everyone , welcome again . In this article we will continue our library building with vanilla javascript part 1 . If you haven’t read the first part then click here and read the first part .

In the first part we have covered the designing part of library building and wrote some methods to register our library whenever the library is included in the html file .

Now in this article we will add event listeners to our next and prev buttons which we have selected with document.querySelector() javascript method .

The Outcome of javascript Library

build own library with vanilla javasript - bepractical.tech

Building Next Button Logic of Library

next.addEventListener('click',() => {
    if((images.length -1) == secptr){
        fetch(`https://source.unsplash.com/1600x900/?${topic}`).then(response => {
            images.push(response.url);
            image.src = response.url
        })
        secptr++;
        checkClass(secptr);
    }else{
        secptr++;
        image.src = images[secptr];
        checkClass(secptr);

    }
            
})

In the above code we have added an click() event listener on next button . So when user clicks on next button , it will check if the value of secptr is equal to the size of images list .

If true then then it will call fetch() and request a new image from unsplash API .Then after recieving the image it will , show the image to user , append it’s source in images list and increment the secptr counter by 1.

If false then it means the secptr is in between the 0 and last index of images list thus by incrementing it’s value by 1 next image from the images list will be shown to the user .

Building Prev Button Logic of Library

Now similarly we will add the click() event listener to the prev button so whenever user clicks on prev button it will show him the prev image from the image list. The prev button will disabled when user reaches the last image .

 prev.addEventListener('click',(e) => {
     if(e.target.classList[3] == "disabled"){
        return null
     }else{
        secptr--;
        if(secptr == 0 || secptr == -1){
            prev.classList.add("disabled");
        }
        image.src = images[secptr];
     }
})

In the above code we have added the click() event listener on prev button and then first of all we’ve checked for if the user is already at the last image or not .

If true then it will disable the prev button and prevents the user to go prev further .

If false then we’ve decremented the value of secptr by 1 and again checked if it’s value is 0 or 1 on true we’ve added the ‘disable’ class to the button .

Then after we’ve just shown the image to user from images list according to the value of secptr . And that’s how we completed our library building with vanilla javascript .

Wrapping Up

Now just pack all these code in a javascript file and ship it to the user or push to the npmjs.com (A hub of javascript libraries) . From npmjs anyone can use your library with just a simple command i.e., npm install your_package_name .

You can follow me on Linkedin : Anand Raj

Don’t forget to follow our Linkedin page for latest updates : BePractical

Prev Article : how-to-build-your-own-library-with-vanilla-javascript-part-1/

Thank you for reading ✌