Create a Quote generator web app with pure JavaScript using an API

14 Apr, 2021
In this tutorial we are going to create a web app that fetches motivational and inspirational quotes using an API.
Application Requirements:
Bootstrap 4 CDNAPI : https://type.fit/api/quotesJavaScriptHTML
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 pagescript.jsscript.jsfetch(url).then(function (response) {       return response.json();}).then(function (data) {      return response.json();}
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.jsscript.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 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.jsscript.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);})
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:
HTML-DOM
JavaScript-Methods
JavaScript-Questions
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
JavaScript | Promises
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?