Answer to Question #318197 in HTML/JavaScript Web Application for vicky

Question

Answer to Question #318197 in HTML/JavaScript Web Application for vicky

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #318197

Bike Search

The goal of this coding exam is to quickly get you off the ground with HTML search input element and Bootstrap spinner

Use the below reference image:

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

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.
Create HTML elements dynamically to set the data i.e, the bike name and city, and add the newly created element to the HTML container element with id as

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 #318197 in HTML/JavaScript Web Application for vicky

Comments

Leave a comment

Related Questions