8.random-quote-generator

<!DOCTYPE html>

<head>

<title>Random Quote Generator</title>

<style>

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}

.container{

width: 100%;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

gap: 15px;

min-height: 100vh;

}

.quote-wrapper .quote-item{

display: flex;

flex-direction: column;

gap: 10px;

border: 2px solid red;

padding: 20px;

background-color: rgb(74, 1, 119);

}

.refresh-button {

padding: 12px 20px;

background-color: yellow;

font-size: 20px;

font-weight: bold;

border: none;

cursor: pointer;

}

.quote-wrapper .quote-item p{

color: #fff;

font-size: 18px;

}

.loader{

font-size: 30px;

font-weight: bolder;

display: none;

}

.loader.show{

display: block;

}

.quote-wrapper.hide {

display: none;

}

</style>

</head>

<body>

<h1>Random Quote Generator</h1>

<button class="refresh-button">Refresh</button>

<p class="loader">Loading Data ! Please wait.</p>

</div>

const quoteWrapper = document.querySelector(".quote-wrapper");

const refreshButton = document.querySelector(".refresh-button");

const loaderText = document.querySelector(".loader");

function showLoader() {

loaderText.classList.add("show");

quoteWrapper.classList.add("hide");

}

function removeLoader() {

loaderText.classList.remove("show");

quoteWrapper.classList.remove("hide");

}

function fetchRandomQuote() {

showLoader()

fetch("https://api.quotable.io/quotes/random")

.then((response) => response.json())

.then((result) => {

if(result){

removeLoader()

displayQuote(result[0])

}

})

.catch((e) => console.log(e));

}

function displayQuote(getQuote) {

console.log(getQuote);

quoteWrapper.innerHTML = `

<p>${getQuote.author}</p>

<p>${getQuote.content}</p>

<p>${getQuote.dateAdded}</p>

<p>${getQuote.tags[0]}</p>

</div>

`;

}

fetchRandomQuote();

refreshButton.addEventListener("click", () => {

fetchRandomQuote();

});

</script>

</body>

</html>