<div class="quote-container" id="quote-container">
        <div class="quote-text">
            <i class="fas fa-brain"></i>
            <span id="quote"></span>
        </div>
        <div class="quote-author">
            <span id="author"></span>
        </div>
        <div class="button-container">
            <button class="twitter-button" id="twitter" title="tweet it!">
                <i class="fab fa-twitter"></i>
            </button>
            <button class="new-quote" id="new-quote">next quote</button>
        </div>
    </div>

    <div class="loader" id="loader"></div>
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
html{
    box-sizing: border-box;
}
body{
   margin:0;
   min-height:100vh;
   background: url("https://images.unsplash.com/photo-1575478873808-b6bb59b1bbba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80") center center no-repeat;
   background-size: cover;
   font-family: 'Satisfy', cursive;
   color:white;
   font-weight:500;
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
}
.quote-container{
    width: auto;
    max-width: 700px;
    background-color:rgba(113, 130, 170, 0.493);
    padding: 20px 30px;
    border-radius:15px;
    box-shadow: 0 10px 10px 12px #7b98b8e4;
}
.quote-text{
    font-size: 3rem;
}
.long-quote{
    font-size: 1.5rem;
}
.fas{
    font-size:3rem;
}
.quote-author{
    margin-top:15px;
    font-size: 2rem;
    font-weight:300;
    font-style: italic;
}
.button-container{
    margin-top:10px;
    display: flex;
    justify-content: space-between;
}
button{
    cursor: pointer;
    font-size:1.2rem;
    height:2.5rem;
    border: none;
    border-radius: 15px;
    color: white;
    outline: none;
    background-color: salmon;
    padding: 0.5rem 1.8rem;
    box-shadow: 0 0.3rem 0.5rem rgba(42, 42, 42,0.8);
}
button:hover{
    filter:brightness(140%)
}
button:active{
    transform:translate(0,0.3rem);
    box-shadow: 0 0.15rem rgba(255,255,255,0.4);
}
.twitter-button:hover{
    color:#38a1f3;
}
.new-quote:hover{
    color:#38a1f3;
}
.fa-twitter{
    font-size:1.5rem;
}
.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    min-width: 60px;
    min-height:60px;
    animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

@media screen and (max-width:1000px){
    .quote-container{
        margin:auto 10px;
    }
    .quote-text{
        font-size:2rem
    }
}
const quoteContainer=document.getElementById('quote-container');
const quoteText=document.getElementById('quote');
const authorText=document.getElementById('author');
const twitterBtn=document.getElementById('twitter');
const newQuoteBtn=document.getElementById('new-quote');
const loader=document.getElementById('loader');

//show loader
function showLoadingSpinner(){
    loader.hidden=false;
    quoteContainer.hidden=true;

}
//hide loading
function removeLoadingSpinner(){
    if(!loader.hidden){
        quoteContainer.hidden=false;
        loader.hidden=true
    }
}
//get quote from API
async function getQuote(){
    showLoadingSpinner()
    const proxyUrl='https://cors-anywhere.herokuapp.com/'
    const apiUrl='http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json';
    try{
        const response=await fetch(proxyUrl+apiUrl);
        const data=await response.json();
        //author blank or not
        if(data.quoteAuthor===''){
            authorText.innerText='Unknow'
        }else{
            authorText.innerText=data.quoteAuthor;
        }
        //reduce font-size for long quote
        if(data.quoteText.length>50){
            quoteText.classList.add('long-quote')
        }else{
            quoteText.classList.remove('long-quote')
        }
        quoteText.innerText=data.quoteText;
        //stop loader show quote
        removeLoadingSpinner()
    }catch(error){
        getQuote();
        console.log('no quote  anymore',error)
    }
}

//twitter
function tweetQuote(){
    const quote=quoteText.innerText;
    const author=authorText.innerText;
    const twitterUrl=`https://twitter.com/intent/tweet?text=${quote}-${author}`;
    window.open(twitterUrl,'_blank')
}
newQuoteBtn.addEventListener('click',getQuote);
twitterBtn.addEventListener('click',tweetQuote);
//on load
 getQuote()
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css
  2. https://lh3.googleusercontent.com/ogw/ADGmqu-t4SjxY4Ie8AO20govlZr2aRd8b66T9sL48xyx=s32-c-mo

External JavaScript

This Pen doesn't use any external JavaScript resources.