Answer to Question #170993 in HTML/JavaScript Web Application for Chandra sena reddy

Question

Answer to Question #170993 in HTML/JavaScript Web Application for Chandra sena reddy

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #170993

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

Refer to the below image.

The page should perform the operation as shown in the following image link:-

https://assets.ccbp.in/frontend/content/dynamic-webapps/bookmark-maker-output.gif

Instructions:

Add HTML input element with id searchInput inside an HTML container element
Add HTML select element with id selectDisplayCount inside an HTML container element
Add HTML container element with id searchResults

Resources

Use this Background image:

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

CSS Colors used:

Text colors Hex code values used:

#323f4b

#ffffff

CSS Font families used:

Roboto

please help me.

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>Book Search</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,700&display=swap" rel="stylesheet">
    <style>
        html {
            box-sizing: border-box;
        }
        *,
        *::after,
        *::before {
            box-sizing: inherit;
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
        }
        ul {
            list-style-type: none;
        }


        .container {
            width: 100vw;
            min-height: 100vh;
            background: url('https://assets.ccbp.in/frontend/dynamic-webapps/book-search-bg.png') no-repeat center/cover;
        }
        h1 {
            font-size: 50px;
            color: ivory;
            letter-spacing: 1.4px;
            padding: 40px;
            text-align: center;
            text-shadow: 0px 0px 15px rgb(15, 179, 201);
        }
        .search-form {
            width: 50%;
            margin-left: auto;
            margin-right: auto;
            padding: 20px 40px;
            display: flex;
            flex-direction: column;
            background-color: #F4F6F6;
            border-radius: 20px;
        }
        label {
            font-size: 20px;
            color: #323f4b;
            font-weight: bold;
            margin-bottom: 20px;
            letter-spacing: 1px;
        }
        input[type="search"] {
            width: 100%;
            padding: 10px;
            border-radius: 5px;
            background-color: #fff;
            font-size: 18px;
            line-height: 18px;
            color: #000;
        }
        input::placeholder {
            font-size: 18px;
            line-height: 18px;
            color: #000;
        }
        input:focus, button:focus {
            outline: none;
        }
        button {
            width: 100px;
            margin-top: 20px;
            margin-left: auto;
            padding: 10px;
            border-radius: 8px;
            font-size: 18px;
            font-weight: 500;
            background-color: #097EF0;
            color: #fff;
            border: none;
            border: 2px solid transparent;
        }
        button:hover {
            border: 2px solid #097EF0;
            color: #097EF0;
            background-color: #fff;
            cursor: pointer;
        }
        .books-list {
            width: 80%;
            display: flex;
            justify-content: space-between;
            margin-left: auto;
            margin-right: auto;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Books collection</h1>
        <form action="#" class="search-form">
            <label for="searchInput">Enter name of the book</label>
            <input type="search" id="searchInput" name="searchInput" required placeholder="Book's author">
            <button id="submit-btn">Submit</button>
        </form>
        <h2>Total results: <span id="totalNumber"></span></h2>
        <ul class="books-list" id="booksList"></ul>
    </div>


    <script>


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

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #170993 in HTML/JavaScript Web Application for Chandra sena reddy

Resources

Comments

Leave a comment

Related Questions