In this tutorial we are going to create a web app that fetches motivational and inspirational quotes using an API.
Application Requirements:
- Bootstrap 4 CDN
- API : https://type.fit/api/quotes
- JavaScript
- HTML
Steps: Follow the below steps to create a quote generator.
-
Step 1 Fetch: We are using inbuilt fetch Function of JavaScript for fetching the data from API. This function return a promise. We will be using innerHTML function of JavaScript to populate the data from API on a web page
script.jsfetch(url).then(
function
(response) {
return
response.json();
}).then(
function
(data) {
return
response.json();
}
-
Step 2 Button for Next and Previous: We are incrementing and decrementing values set by us in a variable to switch from one quote to Another.
script.jslet nextthought = document.getElementById(
"nextthought"
);
nextthought.addEventListener(
"click"
,
function
() {
let countnum = document.getElementById(
"countnum"
);
countnum.value = ++a;
displaythought(countnum.value, data);
});
let previousthought = document.getElementById(
"previousthought"
);
previousthought.addEventListener(
"click"
,
function
() {
let countnum = document.getElementById(
"countnum"
);
if
(countnum.value < 0) {
let thought = document.getElementById(
"thought"
);
thought.innerHTML = `<b><i>You are at first quote</i></b>`;
}
else
{
a = --countnum.value;
displaythought(a, data);
}
});
-
Step 3 Button for Searching: For the search button we are taking a value input from the user to search that particular number in our data set provided by the API and then display it on our web page.
script.jslet searchbtn=document.getElementById(
'searchbtn'
);
searchbtn.addEventListener(
'click'
,
function
(){
let countnum=document.getElementById(
'countnum'
);
let inputsearch=document.getElementById(
'inputsearch'
);
a=inputsearch.value;
countnum.value=inputsearch.value;
displaythought(a,data);
})
Now we will create the HTML structure and combine all the above js sections to perform the fetching and manipulating the API data.
<!DOCTYPE html> < html lang = "en" >
< head >
<!-- Required meta tags -->
< meta charset = "utf-8" />
< meta
name = "viewport"
content=" width = device -width,
initial-scale = 1 ,
shrink-to-fit = no "/>
<!-- Bootstrap CSS -->
< link
rel = "stylesheet"
href =
integrity =
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin = "anonymous" />
< link href =
"https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap" rel = "stylesheet" />
< title >My Quotes</ title >
< style >
body {
font-family: "Chelsea Market", cursive;
}
</ style >
</ head >
< body style = "background-color: black; color: white" >
< div class = "container" >
< div class = "jumbotron text-center bg-dark mt-4" >
< h1 class = "display-4" >My Quotes</ h1 >
< p class = "lead" >Motivational, Inspirational and more !</ p >
< hr class = "my-4" />
< div id = "thought" ></ div >
< div class = "row" >
< div class = "col-lg-10" >
< input
type = "number"
min = "0"
class = "form-control"
id = "inputsearch"
placeholder = "numbers (1/1642)"
onkeypress="return event.charCode >=
48 && event.charCode <= 57"/>
</ div >
< button
type = "button"
class = "btn btn-outline-success col-lg-2"
id = "searchbtn" >
Search
</ button >
</ div >
< div class = "container mt-3" >
< button
class = "btn btn-outline-danger btn-lg"
role = "button"
id = "previousthought" >
Previous
</ button >
< span >----</ span >
< input id = "countnum" type = "hidden" />
< button
class = "btn btn-outline-primary btn-lg"
role = "button"
id = "nextthought" >
Next==>
</ button >
</ div >
</ div >
</ div >
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
< script src =
integrity =
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin = "anonymous" >
</ script >
< script src = "script.js" ></ script >
</ body >
</ html >
|
fetch(url) .then( function (response) {
return response.json();
})
.then( function (data) {
let a = 0;
let searchbtn = document.getElementById( "searchbtn" );
searchbtn.addEventListener( "click" , function () {
let countnum = document.getElementById( "countnum" );
let inputsearch = document.getElementById( "inputsearch" );
a = inputsearch.value;
countnum.value = inputsearch.value;
displaythought(a, data);
});
let nextthought = document.getElementById( "nextthought" );
nextthought.addEventListener( "click" , function () {
let countnum = document.getElementById( "countnum" );
countnum.value = ++a;
displaythought(countnum.value, data);
});
let previousthought = document.getElementById( "previousthought" );
previousthought.addEventListener( "click" , function () {
let countnum = document.getElementById( "countnum" );
if (countnum.value < 0) {
let thought = document.getElementById( "thought" );
thought.innerHTML = `<b><i>You are at first quote</i></b>`;
} else {
a = --countnum.value;
displaythought(a, data);
}
});
displaythought(0, data);
});
function displaythought(index, data) {
let thought = document.getElementById( "thought" );
if (data[index].author == null ) {
data[index].author = "unknown" ;
}
let htmlthought = `<div class= "alert alert-outline-primary" >
${data[index].text}<br>
<span style= "color:#00ffc5;" >
${data[index].author}
</span>
</div>`;
thought.innerHTML = htmlthought;
} |
Output: