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

Question

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

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #320145

Library Management

Build a Library Management page .

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

HTTP Requests & Responses

Background Image:

https://assets.ccbp.in/frontend/dynamic-webapps/book-search-bg.png

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">
</head>
<body>
    <div class="wrapper">
        <div class="container">
            <div class="input-group">
                <h1 class="title">Library <br> Management</h1>
                <input type="search" id="searchInput" placeholder="Type book title" onkeypress="searchField(this)"/>
            </div>
            <div class="msg"></div>
            <div class="content" id="searchResults"></div>
        </div>
    </div>



    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .wrapper {
            width: 100%;
            min-height: 100vh;
        }
        .container {
            width: 100%;
            max-width: 100%;
            display: flex;
            flex-flow: column wrap;
        }
        .input-group {
            background: url("https://assets.ccbp.in/frontend/dynamic-webapps/book-search-bg.png");
            color: #fff;
            display: flex;
            justify-content: center;
            flex-flow: column wrap;
            align-items: center;
            padding: 40px;
        }
        .title {
            text-align: center;
            margin-bottom: 40px;
        }
        input {
            height: 40px;
            border: none;
            border-radius: 4px;
            color: #252525;
            padding: 10px 15px;
            outline: none;
        }
        .content {
            display: flex;
            flex-flow: row wrap;
            justify-content: flex-start;
            align-items: center;
            padding: 20px;
        }
        .item {
            width: 15%;
            margin: 20px;
        }
        .msg {
            color: #252525;
            text-align: left;
            font-size: 24px;
            padding: 40px 40px 0;
        }
        .msg.error {
            text-align: center;
        }
        img {
            max-width: 100%;
            object-fit: cover;
        }
        @media screen and (max-width: 768px) {
            .item {
                width: calc(50% - 30px);
                margin: 15px;
            }
        }
    </style>


    <script>
        let content = document.getElementById('searchResults');
        let msg = document.querySelector('.msg');


        function searchField(input = '') {
            let val = input != '' ? input.value : '';


            if (input == '' || event.keyCode == 13) {
                let request = fetch(`https://apis.ccbp.in/book-store?title=${val}`)
                .then((response) => {
                    return response.json();
                })
                .then((data) => {
                    if (data.total > 0) {
                        let res = '';


                        (data.search_results).map(item => {
                            res += `
                                <div class="item">
                                    <img src="${item.imageLink}" alt="${item.author}">
                                    <p class="title">${item.author}</p>
                                </div>
                            `;
                        })


                        msg.classList.remove('error');
                        msg.innerText = 'Popular Books';
                        content.innerHTML = res;
                    } else {
                        content.innerHTML = '';
                        msg.classList.add('error');
                        msg.innerText = 'No results found';
                    }
                });
            }


        }
    </script>
</body>
</html>