Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

In this tutorial we are going to create a web app that fetches motivational and inspirational quotes using an API.

Application Requirements:

  1. Bootstrap 4 CDN
  2. API : https://type.fit/api/quotes
  3. JavaScript
  4. 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=
      integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"/>
    <link href=
      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>


script.js




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:



Last Updated : 14 Apr, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads