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

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 
1
Expert's answer
2022-03-25T16:24:34-0400
<!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>

Need a fast expert's response?

Submit order

and get a quick answer at the best price

for any assignment or question with DETAILED EXPLANATIONS!

Comments

No comments. Be the first!

Leave a comment

LATEST TUTORIALS
New on Blog
APPROVED BY CLIENTS