Create a Quote Generator Web App with Pure JavaScript using an API

Last Updated : 23 Jul, 2024

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/[email protected]/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/[email protected]/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:

Create a Quote Generator Web App with Pure JavaScript using an API

namankumar2592

Improve

Article Tags :

Create a Quote Generator Web App with Pure JavaScript using an API

Similar Reads

Thank You!

What kind of Experience do you want to share?