Answer to Question #196498 in HTML/JavaScript Web Application for sai

Question

Answer to Question #196498 in HTML/JavaScript Web Application for sai

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #196498

let's build a Book Search page Refer to the below image.

https://assets.ccbp.in/frontend/content/dynamic-webapps/book_search_output.gif

achieve functionality.

When a value is entered in the HTML input element with id searchInput and press on Enter key
Get title, imageLink, author (HTTP response with key search_results) by making HTTP request using fetch with URL https://apis.ccbp.in/book-store?title=kalam&maxResults=30
Set imageLink in the HTML img element and set author in the HTML paragraph element
When a value is entered in the HTML input element with id searchInput and an option is selected in drop down
Make HTTP GET request to fetch books based on the title entered, maximum number of results
If search results not equal to zero, append the search results to the HTML container element with id searchResults
If search results equal to zero, then "No results found"

PLEASE WRITE HTML AND JAVASCRIPT CODE FOR THIS...

Expert's answer

But, here you can see how to do Search Bar:

index.html

<!DOCTYPE html>
<html>
<head>
	<title>
		Creating Search Bar using HTML
		CSS and Javascript
	</title>
	<!-- linking the stylesheet(CSS) -->
	<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
	<!-- input tag -->
	<input id="searchbar" onkeyup="search_animal()" type="text"
		name="search" placeholder="Search animals..">
	<!-- ordered list -->
	<ol id='list'>
		<li class="animals">Cat</li>
		<li class="animals">Dog</li>
		<li class="animals">Elephant</li>
		<li class="animals">Fish</li>
		<li class="animals">Gorilla</li>
		<li class="animals">Monkey</li>
		<li class="animals">Turtle</li>
		<li class="animals">Whale</li>
		<li class="animals">Aligator</li>
		<li class="animals">Donkey</li>
		<li class="animals">Horse</li>
	</ol>
	<!-- linking javscript -->
	<script src="./animals.js"></script>
</body>
</html>

styles.css

#searchbar{
	margin-left: 15%;
	padding:15px;
	border-radius: 10px;
}
input[type=text] {
	width: 30%;
	-webkit-transition: width 0.15s ease-in-out;
	transition: width 0.15s ease-in-out;
}
/* When the input field gets focus,
		change its width to 100% */
input[type=text]:focus {
	width: 70%;
}
#list{
	font-size: 1.5em;
	margin-left: 90px;
}
.animals{
display: list-item;	
}

animals.js

function search_animal() {
    let input = document.getElementById('searchbar').value
    input=input.toLowerCase();
    let x = document.getElementsByClassName('animals');
      
    for (i = 0; i < x.length; i++) { 
        if (!x[i].innerHTML.toLowerCase().includes(input)) {
            x[i].style.display="none";
        }
        else {
            x[i].style.display="list-item";                 
        }
    }
}

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

Comments

No comments. Be the first!

Answer to Question #196498 in HTML/JavaScript Web Application for sai

Comments

Leave a comment

Related Questions