Answer to Question #319471 in HTML/JavaScript Web Application for siva

Question

Answer to Question #319471 in HTML/JavaScript Web Application for siva

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #319471

Library Management

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

Image:https://assets.ccbp.in/frontend/content/dynamic-webapps/library-management-output-v1.gif

HTTP Requests & Responses

Books URL: https://apis.ccbp.in/book-store

Example:

https://apis.ccbp.in/book-store?title=IndiaQuery ParameterValuetitleValue of the searchInput element. Example: India

Method: GET

It should pass test conditions:

When a value is provided in the HTML input element with id searchInput and Enter Key is pressed, an HTTP GET request should be made to the Books URL with the query parameter 'title' as the value of the searchInput element

When the HTTP GET request is successful, then the searchResults element should consist of HTML image elements with src attribute value as the value of key 'imageLink' and HTML paragraph elements with text content as the value of key 'author' from HTTP response

Expert's answer

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Library Management</title>
</head>
<body>
   <style>
            *{
         margin: 0;
         padding: 0;
      }
      .container{
         max-width: 1200px;
         margin: 0 auto;
         padding: 0 15px;
      }
      .wrapper{
         display: flex;
         flex-direction: column;
         min-height: 100vh;
         overflow: hidden;
      }
      .loader {
      border: 6px solid #f3f3f3;
      border-radius: 50%;
      margin: 20px auto 0;
      border-top: 6px solid #000;
      width: 50px;
      height: 50px;
      animation: spin 2s linear infinite;
      }
      .loader__hidden{
         display: none;
      }
      @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
      }


      .header{
         width: 100%;
         height: 100%;
         position: relative;
      }


      .header__img{
         min-width: 100%;
         min-height: 100%;
         top: 0;
         left: 0;
         position: absolute;
      }
      .header__img img{
         width: 100%;
         height: 100%;
         object-fit: fill;
      }
      .header__content{
         background-image: url('https://assets.ccbp.in/frontend/dynamic-webapps/book-search-bg.png');
         background-repeat: no-repeat;
         background-size: 100% 100%;
         background-size: cover;
         min-height: 300px;
         width: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         text-align: center;
      }
      .header__title{
         color: #fff;
      }
      .header__input{
         margin-top: 10px;
         padding: 7px;
         font-size: 14px;
         border-radius: 4px;
      }


      .main__content{
         display: flex;
         flex-wrap: wrap;
         gap: 20px;
         padding-bottom: 20px;
      }
      .main__title{
         margin: 20px 0;
      }
      .main__title_no-found{
         margin-top: 20px;
         text-align: center;
      }
      .book{
         display: flex;
         flex-direction: column;
         flex: 0 1 15%;
         text-align: center;
      }
      .book__img{
         width: 100%;
         height: 100%;
         flex: 1 1 auto;
      }
      .book__img img{
         width: 100%;
         height: 100%;
         object-fit: cover;
      }
      @media (max-width: 600px) {
         .book{
            flex: 0 1 30%;
         }
      }
      @media (max-width: 430px) {
         .book{
            flex: 0 1 45%;
         }
      }
      .book__author{
         margin-top: 10px;
      }
   </style>
   <div class="wrapper">
      <header class="header">
         <div class="header__content">
            <h1 class="header__title">Library Management</h1>
            <input type="text" placeholder="Type book title" class="header__input" id="searchInput">
         </div>
      </header>
      <main class="main">
         <div class="loader loader__hidden" id="loader"></div>
         <div class="container" id="searchResults">
         </div>
      </main>
   </div>
   <script>
      const inputEl = document.getElementById('searchInput');
         const searchResults = document.getElementById('searchResults');
         const loader = document.getElementById('loader');


         function insertBooks(books) {
            let resultEl = ''
            if (books.length) {
               let booksEl = '';
               for (const book of books) {
                  booksEl += `
         <div class="book">
            <div class="book__img">
               <img
                  src="${book.imageLink}"
                  alt="${book.title}">
            </div>
            <p class="book__author">${book.author}</p>
         </div>`
               }
               resultEl = `
         <h1 class='main__title'>Popular books</h1>
         <div class='main__content'>${booksEl}</div>`
            } else {
               resultEl = '<h1 class="main__title_no-found">No results found</h1>'
            }
            searchResults.innerHTML = resultEl
         }


         async function getBooks(event) {
            if (event.key === 'Enter') {
               try {
                  searchResults.innerHTML = ''
                  loader.classList.remove('loader__hidden')
                  const link = event.target.value
                  const response = await fetch(`https://apis.ccbp.in/book-store?title=${link}`)
                  const data = await response.json()
                  const books = data.search_results
                  insertBooks(books)
                  loader.classList.add('loader__hidden')
               } catch (e) {
                  console.log(e);
                  loader.classList.add('loader__hidden')
               }
            }
         }


         inputEl.addEventListener('keypress', getBooks)
   </script>
</body>
</html>