Answer to Question #310232 in HTML/JavaScript Web Application for king

Question

Answer to Question #310232 in HTML/JavaScript Web Application for king

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #310232

Bike Search

Use the below reference image

https://assets.ccbp.in/frontend/content/dynamic-webapps/bike-search-op.gif

HTML

<!DOCTYPE html>

<html>

<body>

Your code goes here

</body>

</html>

Instructions

Add the id searchInput to the HTML input element
Add the id searchResults to the HTML container element

Achieve the design with HTML, CSS, and functionality with JS

When the page is opened or a value is entered in the HTML input element with id searchInput and press on Enter key
Make an HTTP Request (GET method) using Fetch with URL https://apis.ccbp.in/city-bikes?bike_name=
The value entered in the HTML input element with id searchInput should be the value for the query parameter of the given URL
Add the loading status with the Bootstrap component spinner while making HTTP Request (GET method) as shown in the image.

Expert's answer

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="wrapper">
        <div class="container">
            <div class="input-group">
                <div class="form-outline">
                    <input type="search" id="searchInput" class="form-control" placeholder="Type a bike name and press Enter to search" onkeypress="searchField(this)"/>
                </div>
            </div>
            <div class="spinner spinner-border" role="status" id="spinner"></div>
            <div class="content" id="searchResults"></div>
        </div>
    </div>



    <style>
        .wrapper {
            width: 100%;
            min-height: 100vh;
        }
        .container {
            width: 100%;
            max-width: 100%;
            display: flex;
            flex-flow: column wrap;
            padding: 20px;
        }
        .container p {
            margin: 0;
            padding: 0;
        }
        .hidden {
            display: none!important;
        }
        .spinner {
            margin: 40px auto 0;
        }
        .form-outline {
            width: 100%;
            height: 50px;
        }
        .item {
            border: 1px solid #ccc;
            margin-top: 10px;
            padding: 10px;
        }
        .title {
            margin-bottom: 10px;
        }
    </style>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            searchField();
        });


        let spinner = document.getElementById('spinner');
        let content = document.getElementById('searchResults');


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


            content.classList.add('hidden');
            spinner.classList.remove('hidden');


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


                    data.map(item => {
                        res += `
                            <div class="item">
                                <p class="title">Bike name: ${item.name}</p>   
                                <p class="desc">City: ${item.city}</p> 
                            </div>
                        `;
                    })


                    spinner.classList.add('hidden');
                    content.innerHTML = res;
                    content.classList.remove('hidden');
                });
            }


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

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

Comments

No comments. Be the first!

Answer to Question #310232 in HTML/JavaScript Web Application for king

Comments

Leave a comment

Related Questions