In December 2024
Answer to Question #320145 in HTML/JavaScript Web Application for siva
Library Management
Build a Library Management page .
Image:https://assets.ccbp.in/frontend/content/dynamic-webapps/library-management-output-v1.gif
HTTP Requests & Responses
Background Image:
https://assets.ccbp.in/frontend/dynamic-webapps/book-search-bg.png
Books URL: https://apis.ccbp.in/book-store
Example:
https://apis.ccbp.in/book-store?title=IndiaQuery ParameterValuetitleValue of the searchInput element. Example: India
Method: GET
It should pass test conditions:
When a value is provided in the HTML input element with id searchInput and Enter Key is pressed, an HTTP GET request should be made to the Books URL with the query parameter 'title' as the value of the searchInput element
When the HTTP GET request is successful, then the searchResults element should consist of HTML image elements with src attribute value as the value of key 'imageLink' and HTML paragraph elements with text content as the value of key 'author' from HTTP response
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="input-group">
<h1 class="title">Library <br> Management</h1>
<input type="search" id="searchInput" placeholder="Type book title" onkeypress="searchField(this)"/>
</div>
<div class="msg"></div>
<div class="content" id="searchResults"></div>
</div>
</div>
<style>
* {
padding: 0;
margin: 0;
}
.wrapper {
width: 100%;
min-height: 100vh;
}
.container {
width: 100%;
max-width: 100%;
display: flex;
flex-flow: column wrap;
}
.input-group {
background: url("https://assets.ccbp.in/frontend/dynamic-webapps/book-search-bg.png");
color: #fff;
display: flex;
justify-content: center;
flex-flow: column wrap;
align-items: center;
padding: 40px;
}
.title {
text-align: center;
margin-bottom: 40px;
}
input {
height: 40px;
border: none;
border-radius: 4px;
color: #252525;
padding: 10px 15px;
outline: none;
}
.content {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;
padding: 20px;
}
.item {
width: 15%;
margin: 20px;
}
.msg {
color: #252525;
text-align: left;
font-size: 24px;
padding: 40px 40px 0;
}
.msg.error {
text-align: center;
}
img {
max-width: 100%;
object-fit: cover;
}
@media screen and (max-width: 768px) {
.item {
width: calc(50% - 30px);
margin: 15px;
}
}
</style>
<script>
let content = document.getElementById('searchResults');
let msg = document.querySelector('.msg');
function searchField(input = '') {
let val = input != '' ? input.value : '';
if (input == '' || event.keyCode == 13) {
let request = fetch(`https://apis.ccbp.in/book-store?title=${val}`)
.then((response) => {
return response.json();
})
.then((data) => {
if (data.total > 0) {
let res = '';
(data.search_results).map(item => {
res += `
<div class="item">
<img src="${item.imageLink}" alt="${item.author}">
<p class="title">${item.author}</p>
</div>
`;
})
msg.classList.remove('error');
msg.innerText = 'Popular Books';
content.innerHTML = res;
} else {
content.innerHTML = '';
msg.classList.add('error');
msg.innerText = 'No results found';
}
});
}
}
</script>
</body>
</html>
#340153 on Dec 2023
Comments
Leave a comment