Build a Random Quote Generator From JSON API and Tweet to Twitter in Javascript Full Project For Beginners

Build a Random Quote Generator From JSON API and Tweet to Twitter in Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a random quote generator app from json api and tweet to twitter in javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<section>
  <div class="container">
    <div class="row">
      <h1>Random Quote Generator</h1>
      <p>Click or tap the botton to generate a new quote from my favorite inspiring inventors</p>
      <div class="well">
        <blockquote>
          <p id="quote"></p>
          <footer id="attrib"></footer>
        </blockquote>
        <a href="" target="_blank" id="twitterButton" class="btn btn-primary"><i class="fa fa-twitter"></i> Tweet this</a>
      </div>
      
      
      <button id="generateButton" class="btn btn-lg">New Quote</button>
    </div>
  </div>
</section>

 

 

And now make a script.js file and copy paste the following code

 

script.js

 

// quotes are stored in an array of objects
var quotes = [{
  "attrib": "Steve Jobs",
  "quote": "Design is not just what it looks like and feels like. Design is how it works."
}, {
  "attrib": "Steve Jobs",
  "quote": "Innovation distinguishes between a leader and a follower."
}, {
  "attrib": "Albert Einstein",
  "quote": "Reality is merely an illusion, albeit a very persistent one."
}, {
  "attrib": "Albert Einstein",
  "quote": "If you can't explain it simply, you don't understand it well enough."
}, {
  "attrib": "Albert Einstein",
  "quote": "Strive not to be a success, but rather to be of value."
}, {
  "attrib": "Steve Jobs",
  "quote": "Your time is limited, so don’t waste it living someone else’s life."
}, {
  "attrib": "Bill Gates",
  "quote": "Success is a lousy teacher. It seduces smart people into thinking they can't lose."
}, {
  "attrib": "Albert Einstein",
  "quote": "Science without religion is lame, religion without science is blind."
}, {
  "attrib": "Henry Ford",
  "quote": "Whether you think you can or you think you can’t, you’re right."
}];

// function to load and display a new quote
function newQuote() {
  var quoteID = Math.floor(Math.random() * (quotes.length));
  $("#quote").html(quotes[quoteID].quote);
  $("#attrib").html(quotes[quoteID].attrib);
  $("#twitterButton").attr("href", "https://twitter.com/intent/tweet?text=" + quotes[quoteID].quote + " -" + quotes[quoteID].attrib);
}

// wait for page load before displaying content
$(document).ready(function() {
  // load an initial quote
  newQuote();

  // retrieve a new quote when the button is clicked
  $("#generateButton").on("click", function() {
    newQuote();
  });
});

 

See also  JavaScript Program to Clone a JS Object Using Object.assign() Method Full Project For Beginners

 

And now if you open the index.html file inside the browser you will see the below screenshot

 

Leave a Reply