Home Project Source Code JavaScript Random Quote Generator in JavaScript | With Source Code

Random Quote Generator in JavaScript | With Source Code

0
Random Quote Generator in JavaScript
Random Quote Generator in JavaScript

Hey friends, today in this blog, you’ll learn how to Build a Random Quote Generator in JavaScript. In the earlier blog, I shared Age Calculator in JavaScript and now it’s time to create a Random Quote Generator.

Random Quote Generator

A random quote generator is a tool that produces quotes randomly. It can be used to generate quotes for any purpose, whether for a website, blog, or fun. There are many different types of quote generators available, and they all have their own unique features. Some quote generators allow you to select the source of the quotes, while others generate quotes based on keyword input. No matter what quote generator you use, they all have one thing in common: they help you come up with new, attractive, and inspirational quotes.

A random quote generator is a great way to add some fun and interest to your website or blog. By displaying a different quote each time a page is loaded, you can keep your visitors engaged and coming back for more.

There are many ways to generate random quotes, but a straightforward method is to use JavaScript. By creating an array of selections and then selecting a random quote from the array, you can display a different quote each time the page is loaded.

How to build Random Quote Generator in JavaScript

Each time you click on the new quote button, you’ll get a new quote. You can also convert a quote to speech, copy a quote, or share a quote on Twitter by clicking the given button.

To show random quotes, I used a free API name quotable. You can use any other API for this project. I hope you’ve liked this random quote generator and understood its basic codes of it. If you liked this project and want to get source codes or files then you can easily get them from the bottom of this page.

But, before you go to copy-paste the codes, let’s understand the main JavaScript codes and concepts behind creating this random quote generator. In the JavaScript codes, first: I called a random quotes() function on the new quote button clicked.

Inside this function, using the quotable API I fetched the random quotes and showed them on the Quote App. Second: for the TTS (Text To Speech) functionality, there is no external API is used and it’s possible with the Web Speech API of JavaScript.

You might like this:

Random Quote Generator JavaScript [Source Code]

Here’s a basic example of how to build a random quote generator in JavaScript:

Step 1

Initially you need to create three files HTML (.html) CSS (.css) and JS (.js) . After creating these files, just paste the following codes into your VS IDE code sample create an HTML file called index.html and paste the indicated codes into your HTML file (.html) Remember, you must create a file with the extension. HTML.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">  
    <title>Random Quote Generator in JavaScript| CodeWithNepal</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>

Step 2

And, create a CSS file name style.css and paste the indicated codes into your CSS file. Remember, you must create a .css file.

/* 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: #0000FF;
}
.wrapper{
  width: 605px;
  background: #fff;
  border-radius: 15px;
  padding: 30px 30px 25px;
  box-shadow: 0 12px 35px rgba(0,0,0,0.1);
}
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: #0000FF;
}
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;
}

Step 3

Third, create a JavaScript file with the name script.js and paste the given codes into your JavaScript file. Remember, you’ve to create a file with a .js extension. We’ll store random word details as an object in this file.

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);

Preview of Random Quote Generator

Random Quote Generator in JavaScript

That’s all, now you’ve successfully built Random Quote Generator in JavaScript. If your code doesn’t work or you’ve faced any problems, please free to comment down I will provide the source code files.

NO COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exit mobile version