The Random Quotes project is fairly simple. Create a simple page with button, When the “Generate Quote” button is pressed, it triggers a change in quote and the author name.

In this project i am getting the quotes from api via promise call and update the quote colletion. When the “Generate Quote” button is pressed, respective HTML control value get updated.

It uses Math.Floor() and Math.random() methods to display random quotes accross project.

for the background is build using pure css to  display wide color.

you can visit the github to view complete source code of project.

Here is final output you can test the output by clicking below “Generate Quote” button:

JS Source code:

var result;

fetch("https://type.fit/api/quotes")
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    result = data;
  });

document.getElementById("btn").addEventListener("click", function() {
    const data = result[Math.floor(Math.random() * result.length)];
    document.getElementById('quote').innerHTML = data.text;
    document.getElementById('author').innerHTML = data.author;
});