107 809
Assignments Done
100%
Successfully Done
In December 2024
In December 2024
Your physics assignments can be a real challenge, and the due date can be really close — feel free to use our assistance and get the desired result.
Physics
Be sure that math assignments completed by our experts will be error-free and done according to your instructions specified in the submitted order form.
Math
Our experts will gladly share their knowledge and help you with programming projects. Keep up with the world’s newest programming trends.
Programming
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
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
Leave a comment