Create a Quote generator web app with pure JavaScript using an API
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.js
fetch(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.js
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);
}
});
-
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.js
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);
})
Now we will create the HTML structure and combine all the above js sections to perform the fetching and manipulating the API data.
index.html
<!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 = "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" 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 = "https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous" > </ script > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity = "sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin = "anonymous" > </ script > < script src = "script.js" ></ script > </ body > </ html > |
script.js
let url = "https://type.fit/api/quotes" ; 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:
Contact Us