Answer to Question #302837 in HTML/JavaScript Web Application for chetan

Question

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.

Answer 1

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');
                });