How do i make my html show 10 results per page, and how do i make...
How do i make my html show 10 results per page, and how do i make the books clickable to show results about them?
<!DOCTYPE html>
<html>
<head>
<title>Google Books Search</title>
<script src="https://code.jquery.com/jquery-2.1.4.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<style>
body{
background:lightblue
}
.wrap{
max-width:400px;
margin:auto;
margin-top:10px;
}
.pagination, pagination-last{
float:left;
}
a{
text-decoration:none;
padding:15px 20px;
border:1px solid black;
border-right:none;
background:#f2f2f2;
font-size:18px;
font-weight:bold;
}
.pagination-last a{
border-right:1px solid black;
}
a:hover {
background:orange;
color;white;
}
</style>
<!-- <script src="js/main.js"></script> -->
<script>
function B_Search() {
var search = document.getElementById('search').value;
var result = document.getElementById('results');
var resultString = "";
console.log(search);
$.ajax({
url: "https://www.googleapis.com/books/v1/volumes?q=id:"+ search,
dataType: "json",
success: function(data) { console.log(data);
for (i = 0; i < data.items.length; i++) {
resultString += "<h2>" + data.items[i].volumeInfo.title + "</h2>";
resultString += "<h2>" + data.items[i].volumeInfo.authors + "</h2>";
resultString += "<div><b>Publisher:</b> " + data.items[i].volumeInfo.publisher + "</div>";
resultString += "<div><b>publishedDate: </b>" + data.items[i].volumeInfo.publishedDate + "</div>";
resultString += "<div><b>Description: </b>" + data.items[i].volumeInfo.description + "</div>";
resultString += '<div><img src="' + data.items[i].volumeInfo.imageLinks.thumbnail + '"/></div>';
if (data.items[i].saleInfo.saleability == "FOR SALE") {
resultString += "<div><b>Price: </b>" + data.items[i].saleInfo.retailPrice.amount + data.items[i].saleInfo.retailPrice.currencyCode + "</div>";
}
else {
resultString += "<div>Not for Sale</div>"
} } result.innerHTML = resultString; },
type: 'GET'
});
}
</script>
</head>
<body>
<h1><u>Book Search</u></h1> <input id="search" placeholder="type in here"> <button id="buttons" type="button"
onclick="B_Search()">click here</button>
<div id="results"></div>
<div class ="wrap">
<div class ="pagination"><a href ="#"> 1 </a></div>
<div class ="pagination"><a href ="#"> 2 </a></div>
<div class ="pagination"><a href ="#"> 3 </a></div>
<div class ="pagination"><a href ="#"> 4 </a></div>
<div class ="pagination-last"><a href ="#"> 5 </a></div>
</div>
</body>
<style>
body {
background-image: url("image1.jpg");
;
}
h1 {
background-color: green;
}
</style>
</html>
Homework Answers
1)In order to display 10 items per page, you modify your program in function(data). By dividing the total data items by 10. Example If your having 100 items. It will display 10 items per page.
<!DOCTYPE html>
<html>
<head>
<title>Google Books Search</title>
<script src="https://code.jquery.com/jquery-2.1.4.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<style>
body{
background:lightblue
}
.wrap{
max-width:400px;
margin:auto;
margin-top:10px;
}
.pagination, pagination-last{
float:left;
}
a{
text-decoration:none;
padding:15px 20px;
border:1px solid black;
border-right:none;
background:#f2f2f2;
font-size:18px;
font-weight:bold;
}
.pagination-last a{
border-right:1px solid black;
}
a:hover {
background:orange;
color;white;
}
</style>
<!-- <script src="js/main.js"></script> -->
<script>
function B_Search() {
var search = document.getElementById('search').value;
var result = document.getElementById('results');
var resultString = "";
console.log(search);
$.ajax({
url: "https://www.googleapis.com/books/v1/volumes?q=id:"+ search,
dataType: "json",
success: function(data) { console.log(data);
for (i = 0; i < (data.items.length/10); i++) {
resultString += "<h2>" + data.items[i].volumeInfo.title + "</h2>";
resultString += "<h2>" + data.items[i].volumeInfo.authors + "</h2>";
resultString += "<div><b>Publisher:</b> " + data.items[i].volumeInfo.publisher + "</div>";
resultString += "<div><b>publishedDate: </b>" + data.items[i].volumeInfo.publishedDate + "</div>";
resultString += "<div><b>Description: </b>" + data.items[i].volumeInfo.description + "</div>";
resultString += '<div><img src="' + data.items[i].volumeInfo.imageLinks.thumbnail + '"/></div>';
if (data.items[i].saleInfo.saleability == "FOR SALE") {
resultString += "<div><b>Price: </b>" + data.items[i].saleInfo.retailPrice.amount + data.items[i].saleInfo.retailPrice.currencyCode + "</div>";
}
else {
resultString += "<div>Not for Sale</div>"
} } result.innerHTML = resultString; },
type: 'GET'
});
}
</script>
</head>
<body>
<h1><u>Book Search</u></h1> <input id="search" placeholder="type in here"> <button id="buttons" type="button"
onclick="B_Search()">click here</button>
<div id="results"></div>
<div class ="wrap">
<div class ="pagination"><a href ="#"> 1 </a></div>
<div class ="pagination"><a href ="#"> 2 </a></div>
<div class ="pagination"><a href ="#"> 3 </a></div>
<div class ="pagination"><a href ="#"> 4 </a></div>
<div class ="pagination-last"><a href ="#"> 5 </a></div>
</div>
</body>
<style>
body {
background-image: url("image1.jpg");
;
}
h1 {
background-color: green;
}
</style>
</html>
2)And also to make image clickable. you can add the code in img_src tab like below:
<p>
An image as a link: <a
href="https://code.jquery.com/jquery-2.1.4.min.js">
<img border="0" alt="xxx" src="xx.jpg" width="100"
height="100">
</a>
</p>
Add Answer to:
How do i make my html show 10 results per page, and how do i
make...
HTML css When i refresh the page, the picture doesnt move at all for #i1 i...
HTML css When i refresh the page, the picture doesnt move at all for #i1 i have width and height but the pictuers doesn't move please fix it. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> <style> body{ background-color:#FFA07A; } #h1{ color:white; text-decoration:none; padding:30px; } #h2{ color:white; text-decoration:none; padding:30px; } #navbar1{ background-color:grey; text-align:center; font-size:35px; height:100%px; border:1px solid black; position:absolute; text-decoration:none; margin-left:300px; } #h3{ color:white; text-decoration:none; padding:30px; } #b1{ background-color:grey; font-size:30px; } i1{ width:10px; height:20px; } </style> <body> <div...
Hello Ive been tryting to add the CDN of jquery to my html code and I...
Hello Ive been tryting to add the CDN of jquery to my html code and I keep getting an error Need help with this : Navigate to www.code.jquery.com in your Chrome browser. On this page, you'll find different stable versions of jQuery. Select uncompressed for jQuery Core 3.3.1. Copy the <script> tag that is given to you. In store_hours.html, paste that tag directly above your body's closing tag. This is the jQuery CDN. After you paste this code into...
I created an Html with tabs, then how do I import the constant character content of...
I created an Html with tabs, then how do I import the constant character content of a JS into one of these tabs without editing that JS file? here is my page： <!DOCTYPE html> <html> <body> <div id="main"> <span class="tab"> <button class="current">News</button> <button>Create</button> <button onclick="about()">About</button> <button>Login</button> </span> <div class="con" style="display: block"> For news content</div> <div class="con">For create content</div> <div class="con" id="about">For about content</div> </div> </body> <script type="text/javascript" src='strings.js'></script> <script> var box = document.getElementById('main'); var btns = document.getElementsByTagName('button'); var divs =...
Look at the following illustrated output for an HTML and a css given below <!DOCTYPE html>...
Look at the following illustrated output for an HTML and
a css given below
<!DOCTYPE html>
<head>
<title>TABLE with STYLE
SHEET</title>
<meta charset="utf-8" />
<meta name="description" content="Godaddy Webpage
original" />
<link rel = "stylesheet"
href="GoDaddy_assignment_1.css">
<body>
<img src= "GoDaddy.png"/>
<p>Welcome
to:<strong>webhamster.com</strong></br>
This web page is
parked<strong>Free</strong>courtesy of
<a class="aclass1" href
="https://www.godaddy.com">GoDaddy.com</a></p>
<h1>Want to buy<span class
="span2">webmaster.com ?</span></h1>
<div class ="div1">
<a class ="aclass2"
href="https://www.godaddy.com">Learn How</a>
</div>
</hr>
<button>Search Ads</button>
</body>
</html>
“
QUESTION continued Given the corresponding css
file
.aclass1{color:purple;}...
Hi Expert I need to make a html checkout page link from product page <!DOCTYPE html>...
Hi Expert I need to make a html checkout page link from product page <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="style.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="./bootstrap/js/bootstrap.js"></script> <meta charset="UTF-8"> <title>Perry Gerry Mobile Cellular</title> </head> <body> <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 bg-white border-bottom shadow-sm"> <h5 class="my-0 mr-md-auto font-weight-normal">Perry Gerry Mobile Cellular</h5> <nav class="my-2 my-md-0 mr-md-3"> <a class="p-2 text-dark" href="index.html">Home</a> <a class="p-2 text-dark" href="about.html">About Us</a> <a class="p-2 text-dark" href="products.html">Products</a> <a class="p-2 text-dark"...
I'm having trouble to link the .js file to the html so changes for the html...
I'm having trouble to link the .js file to the html so changes for the html to be made in the .js file <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>:JavaScript, HTML and jQuery</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- this is so I don't have to give you a separate CSS file --> <style> .hidden {display: none;} .menu { width: 100px;} </style> </head> <body> <div class="container"> <h1>Assignment 2: JavaScript, HTML and jQuery</h1> <p>To complete this...
HTML/CSS/ Bootstrap grids to create image I am attemted to recreate a photo using bootstrap grids...
HTML/CSS/ Bootstrap grids to create image
I am attemted to recreate a photo using bootstrap grids and have
come across a snag. I need this:
To look more like this....
It does not really need to be perfect as far as scaling, at this
point I just want the yellow box in the corner with borders like
the pic. Also the original pic has white borders that we are
ignoring.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags...
Trying to understand java script.. The code provided prints out a game board of cells that...
Trying to understand java script.. The code provided prints out
a game board of cells that are 10 x 10. I currnetly
have it printed out so that it will print out pink squares. how can
i create a click even on any of the pink squares that when they are
clicked it will turn the square black... then any
square that is black when it is clicked it will change back to the
color pink
html/js code and css...
I have to make a pixel art maker using javascript. HTML and CSS were already provided....
I have to make a pixel art maker using javascript. HTML and CSS were already provided. I only had to do the JavaScript part. Every time I run the HTML folder nothing happens when I choose the width, height, and color. This is my code: (ONLY JS IS SUPPOSED TO BE FIXED). JS: // Select color input // Select size input const colorPicker = document.getElementsById('colorPicker'); const rowNum = document.getElementsById('inputHeight'); const cellNum = document.getElementById('inputWidth'); const pixelCanvas = document.getElementById('pixelCanvas'); const form =...
HTML: ch14 IC_1B - use a fadeToggle to control jQuery to show the second part of...
HTML: ch14 IC_1B - use a fadeToggle to control jQuery to show the second part of the content on Chp 14 slide 33. <!DOCTYPE html> <html lang="en"> <head> <title> jQuery </title> <meta charset="utf-8"> <style> #details { display: none; } </style> <xxxx src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></xxxx> </head> <body> <h1>jQuery</h1> <p>Many websites, including Amazon and Google, use jQuery, to provide interaction and dynamic effects on web pages. <a href="#" id="more">...
Look at the following illustrated output for an HTML and
a css given below
<!DOCTYPE html>
<head>
<title>TABLE with STYLE
SHEET</title>
<meta charset="utf-8" />
<meta name="description" content="Godaddy Webpage
original" />
<link rel = "stylesheet"
href="GoDaddy_assignment_1.css">
<body>
<img src= "GoDaddy.png"/>
<p>Welcome
to:<strong>webhamster.com</strong></br>
This web page is
parked<strong>Free</strong>courtesy of
<a class="aclass1" href
="https://www.godaddy.com">GoDaddy.com</a></p>
<h1>Want to buy<span class
="span2">webmaster.com ?</span></h1>
<div class ="div1">
<a class ="aclass2"
href="https://www.godaddy.com">Learn How</a>
</div>
</hr>
<button>Search Ads</button>
</body>
</html>
“
QUESTION continued Given the corresponding css
file
.aclass1{color:purple;}...
HTML/CSS/ Bootstrap grids to create image
I am attemted to recreate a photo using bootstrap grids and have
come across a snag. I need this:
To look more like this....
It does not really need to be perfect as far as scaling, at this
point I just want the yellow box in the corner with borders like
the pic. Also the original pic has white borders that we are
ignoring.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags...
Trying to understand java script.. The code provided prints out
a game board of cells that are 10 x 10. I currnetly
have it printed out so that it will print out pink squares. how can
i create a click even on any of the pink squares that when they are
clicked it will turn the square black... then any
square that is black when it is clicked it will change back to the
color pink
html/js code and css...
Most questions answered within 3 hours.
-
Using MARS simulator, write MIPS programs according to
the following scenarios: Receive a positive integer number...
asked 42 minutes ago -
An object in front of a concave mirror has a real image that is
11.5 cm...
asked 56 minutes ago -
Consider the reaction, C3 H8 + O2 --> CO2 + H2O. How many
moles of O2...
asked 2 hours ago -
You and your opponent both roll a fair die. If you both roll the
same number,...
asked 2 hours ago -
In a study of the accuracy of fast food drive-through orders,
Restaurant A had 257 accurate...
asked 2 hours ago -
Identify and describe in detail the four categories of
institutions that could be included in a...
asked 3 hours ago -
In python
class Customer:
def __init__(self, customer_id, last_name, first_name, phone_number, address):
self._customer_id = int(customer_id)
self._last_name =...
asked 3 hours ago -
What is an example of a limitation in implementing a new
ERP system and how it...
asked 3 hours ago -
In a section of 9.7cm of an artery with a radius of 2.6mm there
is a...
asked 3 hours ago -
the two carboxylic acid groups of aspartic acid have different
acidities with pKa values of 2.1...
asked 3 hours ago -
Would CuCO3 aqueous salt combined with calcium chloride
form a solid precipitate? If so, what would...
asked 3 hours ago -
How do ECM Solutions assist in embedding a culture of continuous
improvement in an organization? (Project...
asked 3 hours ago