This Javascript Code Generates Random Quotes

What comes to your mind when you hear the word random quote using vanilla JavaScript? As far as I'm concerned, anything may be the case. And there may be another scripting language that can make random quotes, but one of the most distinguished of them is using JavaScript to make a random quote. You might have seen some social media apps that display people’s posts, but you must keep scrolling to see more posts. But according to what we will be building, you will have to click on a button to view a new quote. Note: in this tutorial we will make use of an API, the API is used to fetch the quotes randomly across the web. By just clicking on the button the API fetches a new quotes. So without wasting much of your time, let's dive into this guide. Prerequisite You need to have basic knowledge of HTML You need to have basic knowledge of CSS You need to have basic knowledge of JavaScript Also have a code editor(Sublime or VS code) etc. Step-by-step JavaScript Random Quote Generator A random quote pulls quotes randomly from an API or an array. In this article, we'll use JavaScript to produce quotes from an array as we design a random quote generator from scratch using HTML, CSS, and JavaScript only. Below is a step-by-step guide to going through to accomplish the random quote task. Step 1: Is Making a New Project The project you’re about to build contains three pages: HTML, CSS, and JavaScript. so you’ll name the various pages will be named like this. index.html, style.css, script.js. After doing this you’re ready to move on to the next step. Step 2: Constructing the framework This step will enable you to add a few HTML codes that will give your project structure. Note: This section is probably the first thing to do after creating the folder and the files as stated above. Random Quotes

Next quote

Step 3: Adding Styles for the Classes In this section, we will be adding styles to the code using CSS, to build the quote generator. Note: This section is the next thing to do after creating the index.html file, you will create another file named style.css the style.css file will be linked to the HTML file. Then you to style the layout of the HTML. Here’s the CSS code below. * { margin: 0; padding: 0; box-sizing: border-box; }

body { min-height: 100vh; transition: 0.5s; transition-timing-function: ease-in; background-image: linear-gradient( to right bottom, rgb( 51, 255, 141 ), #acc9ffa8 ); display: flex; align-items: center; justify-content: center; }

.container { display: flex; flex-direction: column; align-items: center; padding: 30px; box-shadow: 0 4px 10px rgba(27, 245, 235 , 0.5); border-radius: 15px; width: 600px; background-color: rgba(255, 255, 255, 0.3); margin: 10px; } .fa-quote-left, .fa-quote-right { font-size: 35px; color: rgb(170, 0, 0); } .quote { text-align: center; font-size: 40px; font-weight: bold; } .author { margin: 10px; text-align: right; font-size: 25px; font-style: italic; font-family: cursive; } hr { margin: 10px 0; width: 100%; border: 1px solid black; background-color: black; } .button { width: 100%; display: flex; padding: 10px; justify-content: space-between; align-items: center; margin: 9px; } .twitter { border: 1px solid rgb(102, 179, 255); border-radius: 4px; background-color: rgb(102, 179, 255); color: white; padding-bottom: 15px; text-align: center; font-size: 1.8em; width: 60px; height: 35px; line-height: 40px; } .next { font-size: 18px; border-radius: 5px; cursor: pointer; padding: 10px; margin-top: 5px; font-weight: bold; color: white; background-image: linear-gradient( to right bottom, rgb(22, 210, 248), #bcd7ffa8 ); } .container:hover { box-shadow: 0 10px 10px rgb(0, 180, 230); } Step 4: Incorporate a few lines of JavaScript code. In this step, we will incorporate some JavaScript code to build the quote generator. Note: This section is an essential part of this tutorial, Now you’ll create another file call it script.js. Go through the code below you’ll see what was done clearly, We interacted with an API by using a link and saving inside a variable named url. To make this guide brief, go through the script.js you’ll notice a comment before each section. Here’s the JavaScript code below. const text = document.getElementById("quote"); const author = document.getElementById("author"); const tweetButton = document.getElementById("tweet");

const getNewQuote = async () => { //api for quotes var url = "https://type.fit/api/quotes";

// fetch the data from api const response = await fetch(url); console.log(typeof response); //convert response to json and store it in quotes array const allQuotes = await response.json();

// Generates a random number between 0 and the length of the quotes array const indx = Math.floor(Math.random() * allQuotes.length);

//Store the quote present at the randomly generated index const quote = allQuotes[indx].text;

//Store the author of the respective quote const auth = allQuotes[indx].author;

if (auth == null) { author = "Anonymous"; }

//function to dynamically display the quote and the author text.innerHTML = quote; author.innerHTML = "~ " + auth;

//tweet the quote tweetButton.href = "https://twitter.com/intent/tweet?text=" + quote + " ~ " + auth; };

getNewQuote(); Conclusion We’ve come to the end of this tutorial, hopefully, you’ve gained a ton of value. On how to build random quotes project using vanilla JavaScript. We’ve seen how to interact with an API, although that's not the only way or should I say best way to interact with an API. and how to tweet a quote from our JS code to your Twitter account. Just discussing this tutorial has shown us a lot. So feel free to drop a comment! And if you want more tutorials, please follow me. Till next time, Enjoy your day! About The Author Emmanuel Okolie is a full-stack laravel developer with 2+ years of experience in the software development industry. He has built full-fledged skills by fusing software development, writing, and teaching others what he does. His stacks are ReactJs, Laravel, PHP, JavaScript, and more. He works as a freelancer, building websites for clients and writing technical manuals to instruct others on how to carry out his work. Emmanuel Okolie would welcome the opportunity to speak with you. Kindly visit and follow him on Linked-In, Facebook, Github, Twitter, or his Website. What comes to your mind when you hear the word random quote using vanilla JavaScript? As far as I'm concerned, anything may be the case. And there may be another scripting language that can make random quotes, but one of the most distinguished of them is using JavaScript to make a random quote. You might have seen some social media apps that display people’s posts, but you must keep scrolling to see more posts. But according to what we will be building, you will have to click on a button to view a new quote. Note: in this tutorial we will make use of an API, the API is used to fetch the quotes randomly across the web. By just clicking on the button the API fetches a new quotes. So without wasting much of your time, let's dive into this guide. Prerequisite You need to have basic knowledge of HTML You need to have basic knowledge of CSS You need to have basic knowledge of JavaScript Also have a code editor(Sublime or VS code) etc. You need to have basic knowledge of HTML You need to have basic knowledge of CSS You need to have basic knowledge of JavaScript Also have a code editor(Sublime or VS code) etc. Step-by-step JavaScript Random Quote Generator Step-by-step JavaScript Random Quote Generator A random quote pulls quotes randomly from an API or an array. In this article, we'll use JavaScript to produce quotes from an array as we design a random quote generator from scratch using HTML, CSS, and JavaScript only. Below is a step-by-step guide to going through to accomplish the random quote task. Step 1: Is Making a New Project The project you’re about to build contains three pages: HTML, CSS, and JavaScript. so you’ll name the various pages will be named like this. index.html, style.css, script.js. After doing this you’re ready to move on to the next step. Step 1: Is Making a New Project Step 2: Constructing the framework This step will enable you to add a few HTML codes that will give your project structure. Note: This section is probably the first thing to do after creating the folder and the files as stated above. Step 2: Constructing the framework Random Quotes

Next quote

Random Quotes

Next quote

Step 3: Adding Styles for the Classes In this section, we will be adding styles to the code using CSS, to build the quote generator. Note: This section is the next thing to do after creating the index.html file, you will create another file named style.css the style.css file will be linked to the HTML file. Step 3: Adding Styles for the Classes Then you to style the layout of the HTML. Here’s the CSS code below. * { margin: 0; padding: 0; box-sizing: border-box; }

body { min-height: 100vh; transition: 0.5s; transition-timing-function: ease-in; background-image: linear-gradient( to right bottom, rgb( 51, 255, 141 ), #acc9ffa8 ); display: flex; align-items: center; justify-content: center; }

.container { display: flex; flex-direction: column; align-items: center; padding: 30px; box-shadow: 0 4px 10px rgba(27, 245, 235 , 0.5); border-radius: 15px; width: 600px; background-color: rgba(255, 255, 255, 0.3); margin: 10px; } .fa-quote-left, .fa-quote-right { font-size: 35px; color: rgb(170, 0, 0); } .quote { text-align: center; font-size: 40px; font-weight: bold; } .author { margin: 10px; text-align: right; font-size: 25px; font-style: italic; font-family: cursive; } hr { margin: 10px 0; width: 100%; border: 1px solid black; background-color: black; } .button { width: 100%; display: flex; padding: 10px; justify-content: space-between; align-items: center; margin: 9px; } .twitter { border: 1px solid rgb(102, 179, 255); border-radius: 4px; background-color: rgb(102, 179, 255); color: white; padding-bottom: 15px; text-align: center; font-size: 1.8em; width: 60px; height: 35px; line-height: 40px; } .next { font-size: 18px; border-radius: 5px; cursor: pointer; padding: 10px; margin-top: 5px; font-weight: bold; color: white; background-image: linear-gradient( to right bottom, rgb(22, 210, 248), #bcd7ffa8 ); } .container:hover { box-shadow: 0 10px 10px rgb(0, 180, 230); } * { margin: 0; padding: 0; box-sizing: border-box; }

body { min-height: 100vh; transition: 0.5s; transition-timing-function: ease-in; background-image: linear-gradient( to right bottom, rgb( 51, 255, 141 ), #acc9ffa8 ); display: flex; align-items: center; justify-content: center; }

.container { display: flex; flex-direction: column; align-items: center; padding: 30px; box-shadow: 0 4px 10px rgba(27, 245, 235 , 0.5); border-radius: 15px; width: 600px; background-color: rgba(255, 255, 255, 0.3); margin: 10px; } .fa-quote-left, .fa-quote-right { font-size: 35px; color: rgb(170, 0, 0); } .quote { text-align: center; font-size: 40px; font-weight: bold; } .author { margin: 10px; text-align: right; font-size: 25px; font-style: italic; font-family: cursive; } hr { margin: 10px 0; width: 100%; border: 1px solid black; background-color: black; } .button { width: 100%; display: flex; padding: 10px; justify-content: space-between; align-items: center; margin: 9px; } .twitter { border: 1px solid rgb(102, 179, 255); border-radius: 4px; background-color: rgb(102, 179, 255); color: white; padding-bottom: 15px; text-align: center; font-size: 1.8em; width: 60px; height: 35px; line-height: 40px; } .next { font-size: 18px; border-radius: 5px; cursor: pointer; padding: 10px; margin-top: 5px; font-weight: bold; color: white; background-image: linear-gradient( to right bottom, rgb(22, 210, 248), #bcd7ffa8 ); } .container:hover { box-shadow: 0 10px 10px rgb(0, 180, 230); } Step 4: Incorporate a few lines of JavaScript code. In this step, we will incorporate some JavaScript code to build the quote generator. Note: This section is an essential part of this tutorial, Now you’ll create another file call it script.js. Step 4: Incorporate a few lines of JavaScript code. Go through the code below you’ll see what was done clearly, We interacted with an API by using a link and saving inside a variable named url. To make this guide brief, go through the script.js you’ll notice a comment before each section. Here’s the JavaScript code below. const text = document.getElementById("quote"); const author = document.getElementById("author"); const tweetButton = document.getElementById("tweet");

const getNewQuote = async () => { //api for quotes var url = "https://type.fit/api/quotes";

// fetch the data from api const response = await fetch(url); console.log(typeof response); //convert response to json and store it in quotes array const allQuotes = await response.json();

// Generates a random number between 0 and the length of the quotes array const indx = Math.floor(Math.random() * allQuotes.length);

//Store the quote present at the randomly generated index const quote = allQuotes[indx].text;

//Store the author of the respective quote const auth = allQuotes[indx].author;

if (auth == null) { author = "Anonymous"; }

//function to dynamically display the quote and the author text.innerHTML = quote; author.innerHTML = "~ " + auth;

//tweet the quote tweetButton.href = "https://twitter.com/intent/tweet?text=" + quote + " ~ " + auth; };

getNewQuote(); const text = document.getElementById("quote"); const author = document.getElementById("author"); const tweetButton = document.getElementById("tweet");

const getNewQuote = async () => { //api for quotes var url = "https://type.fit/api/quotes";

// fetch the data from api const response = await fetch(url); console.log(typeof response); //convert response to json and store it in quotes array const allQuotes = await response.json();

// Generates a random number between 0 and the length of the quotes array const indx = Math.floor(Math.random() * allQuotes.length);

//Store the quote present at the randomly generated index const quote = allQuotes[indx].text;

//Store the author of the respective quote const auth = allQuotes[indx].author;

if (auth == null) { author = "Anonymous"; }

//function to dynamically display the quote and the author text.innerHTML = quote; author.innerHTML = "~ " + auth;

//tweet the quote tweetButton.href = "https://twitter.com/intent/tweet?text=" + quote + " ~ " + auth; };

getNewQuote(); Conclusion We’ve come to the end of this tutorial, hopefully, you’ve gained a ton of value. On how to build random quotes project using vanilla JavaScript. We’ve seen how to interact with an API, although that's not the only way or should I say best way to interact with an API. and how to tweet a quote from our JS code to your Twitter account. Just discussing this tutorial has shown us a lot. So feel free to drop a comment! And if you want more tutorials , please follow me. tutorials tutorials Till next time, Enjoy your day! About The Author About The Author Emmanuel Okolie is a full-stack laravel developer with 2+ years of experience in the software development industry. He has built full-fledged skills by fusing software development, writing, and teaching others what he does. His stacks are ReactJs, Laravel, PHP, JavaScript, and more. Emmanuel Okolie 2+ ReactJs, Laravel, PHP, JavaScript, He works as a freelancer, building websites for clients and writing technical manuals to instruct others on how to carry out his work. Emmanuel Okolie would welcome the opportunity to speak with you. Kindly visit and follow him on Linked-In, Facebook, Github, Twitter, or his Website. Emmanuel Okolie Linked-In , Linked-In Facebook , Facebook Github , Github Twitter , Twitter Website . Website