CODING ASSIGNMENT 3 Library Management

 Library Management

In this assignment, let's build a Library Management page by applying the concepts we learned till now.

Refer to the image below

library-management

Completion Instructions

Instructions

Functionality to be added

HTTP Requests & Responses


Resources

Image URLs
Colors
Font-families

Concepts Review

Want to quickly review some of the concepts you’ve been learning?

Take a look at the Cheat Sheets.



<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" /> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> </head> <body> <div class="container"> <div class="row"> <div class="p-4 col-12 searchContainer"> <h1 class="mainHeading">Library Management</h1> <input class="w-90" placeholder="Type book title" type="search" id="searchInput" /> </div> <div class="col-12"> <div class="mt-3 text-center"> <div id="spinner" class="d-none spinner-border text-dark" role="status"> <span class="sr-only">Loading...</span> </div> <p id="message"></p> </div> </div> <div id="searchResults" class="col-12"> </div> </div> </div> </body> </html>



@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap");


.searchContainer {

    background-image: url('https://assets.ccbp.in/frontend/dynamic-webapps/library-management-bg.png');

    width: 100%;

    background-size: cover;

    text-align: center;

}


.mainHeading {

    color: #ffffff;

}





let searchInput = document.getElementById("searchInput");

let searchResults = document.getElementById("searchResults");

let message = document.getElementById("message");

let headingEl = document.createElement("h1");

let spinner = document.getElementById("spinner");


function appendSearchResults(search_results) {

    if (search_results.length < 1) {

        message.textContent = "No results found";

        searchResults.textContent = "";

        headingEl.textContent = "";


    } else {

        searchResults.textContent = "";

        message.textContent = "";

        headingEl.textContent = "Popular Books";

        searchResults.appendChild(headingEl);

        for (let eachItem of search_results) {

            let title = eachItem.title;

            let image = eachItem.imageLink;

            let author = eachItem.author;

            let imageEl = document.createElement("img");

            let textEl = document.createElement("p")

            imageEl.setAttribute("src", image);

            textEl.textContent = author;

            searchResults.appendChild(imageEl);

            searchResults.appendChild(textEl);

            console.log(eachItem);

        }

    }

}


searchInput.addEventListener("keydown", function(event) {

    if (event.key === "Enter") {

        spinner.classList.toggle("d-none");


        let searchInputValue = searchInput.value;

        let url = "https://apis.ccbp.in/book-store?title=" + searchInputValue;

        let options = {

            method: "GET"

        };

        fetch(url, options)

            .then(function(response) {

                return response.json();

            })

            .then(function(jsonData) {

                let {

                    search_results

                } = jsonData;

                appendSearchResults(search_results);

                spinner.classList.toggle("d-none");


            });

    }

});


Comments

Popular posts from this blog

CODING PRACTICE 11 Music Page

CODING PRACTICE 6 Cricketer Page