Random Quote Generator Using HTML SS JavaScript with free source code

random quote generator, html, css, javascript, free source code, quote generator, html5, css3, javascript, quote, generator, code, source, free, tutorial, guide, how to, build, create, random, generate, quotes, sayings, wisdom, inspiration, motivation, humor, entertainment, html5 quote generator, css3 quote generator, javascript quote generator, free quote generator, random quote generator tutorial, random quote generator guide, how to build a random quote generator, how to create a random quote generator, how to randomize quotes, how to generate quotes, how to say things, how to be wise, how to be inspired, how to be motivated, how to be funny, how to be entertained

Social Links

HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Random Quote Generator | CodingAyush</title>
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>

<body>
  <div class="wrapper">
    <header>Quote of the Day</header>
    <div class="content">
      <div class="quote-area">
        <i class="fas fa-quote-left"></i>
        <p class="quote">Never give up because you never know if the next try is going to be the one that works.</p>
        <i class="fas fa-quote-right"></i>
      </div>
      <div class="author">
        <span>__</span>
        <span class="name">Mary Kay Ash</span>
      </div>
    </div>
    <div class="buttons">
      <div class="features">
        <ul>
          <li class="speech"><i class="fas fa-volume-up"></i></li>
          <li class="copy"><i class="fas fa-copy"></i></li>
          <li class="twitter"><i class="fab fa-twitter"></i></li>
        </ul>
        <button>New Quote</button>
      </div>
    </div>
  </div>

  <script src="script.js"></script>

</body>

</html>
CSS
/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #11131e;
}
.wrapper{
  width: 605px;
  background: #fff;
  border-radius: 15px;
  padding: 30px 30px 25px;
}
header, .content :where(i, p, span){
  color: #202842;
}
.wrapper header{
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.wrapper .content{
  margin: 35px 0;
}
.content .quote-area{
  display: flex;
  justify-content: center;
}
.quote-area i{
  font-size: 15px;
}
.quote-area i:first-child{
  margin: 3px 10px 0 0;
}
.quote-area i:last-child{
  display: flex;
  margin: 0 0 3px 10px;
  align-items: flex-end;
}
.quote-area .quote{
  font-size: 22px;
  text-align: center;
  word-break: break-all;
}
.content .author{
  display: flex;
  font-size: 18px;
  margin-top: 20px;
  font-style: italic;
  justify-content: flex-end;
}
.author span:first-child{
  margin: -7px 5px 0 0;
  font-family: monospace;
}
.wrapper .buttons{
  border-top: 1px solid #ccc;
}
.buttons .features{
  display: flex;
  margin-top: 20px;
  align-items: center;
  justify-content: space-between;
}
.features ul{
  display: flex;
}
.features ul li{
  margin: 0 5px;
  height: 47px;
  width: 47px;
  display: flex;
  cursor: pointer;
  color: #5372F0;
  list-style: none;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  border: 2px solid #5372F0;
  transition: all 0.3s ease;
}
.features ul li:first-child{
  margin-left: 0;
}
ul li:is(:hover, .active){
  color: #fff;
  background: #5372F0;
}
ul .speech.active{
  pointer-events: none;
}
.buttons button{
  border: none;
  color: #fff;
  outline: none;
  font-size: 16px;
  cursor: pointer;
  padding: 13px 22px;
  border-radius: 30px;
  background: #5372F0;
}
.buttons button.loading{
  opacity: 0.7;
  pointer-events: none;
}
JS
const quoteText = document.querySelector(".quote"),
quoteBtn = document.querySelector("button"),
authorName = document.querySelector(".name"),
speechBtn = document.querySelector(".speech"),
copyBtn = document.querySelector(".copy"),
twitterBtn = document.querySelector(".twitter"),
synth = speechSynthesis;

function randomQuote(){
    quoteBtn.classList.add("loading");
    quoteBtn.innerText = "Loading Quote...";
    fetch("http://api.quotable.io/random").then(response => response.json()).then(result => {
        quoteText.innerText = result.content;
        authorName.innerText = result.author;
        quoteBtn.classList.remove("loading");
        quoteBtn.innerText = "New Quote";
    });
}

speechBtn.addEventListener("click", ()=>{
    if(!quoteBtn.classList.contains("loading")){
        let utterance = new SpeechSynthesisUtterance(`${quoteText.innerText} by ${authorName.innerText}`);
        synth.speak(utterance);
        setInterval(()=>{
            !synth.speaking ? speechBtn.classList.remove("active") : speechBtn.classList.add("active");
        }, 10);
    }
});

copyBtn.addEventListener("click", ()=>{
    navigator.clipboard.writeText(quoteText.innerText);
});

twitterBtn.addEventListener("click", ()=>{
    let tweetUrl = `https://twitter.com/intent/tweet?url=${quoteText.innerText}`;
    window.open(tweetUrl, "_blank");
});

quoteBtn.addEventListener("click", randomQuote);

Post a Comment

Previous Post Next Post