JavaScript quote generator

Hello guys today we are going to build a simple random quote generator using JavaScript,HTML and CSS.

I’ve found how amazing JavaScript is; playing around with the elements in the web browser and how interactive it is.

Stay here and enjoy the learning path,JavaScript changes the browser content in different ways through a click,hover,scroll etc.

In this session today we are going to build a random quote generator using JavaScript such that when a user clicks a button a quote should be generated on the web broswer.

requirements

text-editor
. web browser

File Structure

Create an empty folder name it quote generator and open the folder using your text-editor

then create and save these three files in the folder created namely

index.html
index.css
index.js

The index.html – is our Html file
The index.css- is our CSS file
The index.js- is our JavaScript file

We are going to use some bootstrap to style our components

In your index.html file you should have something like this

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="index.css">

    <script src="index.js" type="text/javascript"></script>

    <title>QUOTES</title>
  </head>
  <body>
    <div class="container">
      <hr>
      <h3 class="text-center">Click to generate a quote</h3>
  <blockquote>
<i class="text-success" id = "quotes">"I can all things through christ who strengthens me !!!</i>
</blockquote>
<a onclick="newQuote()" class="btn btn-warning" role="button">Next quote</a>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

We have the quotes section give an id attribute quotes – this is the section that is going to display the quotes and the button when clicked is going to generate the quotes

You dont neccesarily need to add some CSS so we are going to jump foward to the Javascript file

The logic behind this program is that when one clicks a button a quote should be generated, so we need to store our quotes in strings and since we are going to use different quotes we will store them in an array

in your index.js file add the qutes stored in a variable as an array you can check this website to get your own quotes place them in single or double quotes separeated with a comma

var quotes = [

'Greater love has no one than this: to lay down ones life for ones friends - John 15:13',
'Now to him who is able to do immeasurably more than all we ask or imagine, according to his power that is at work within us - Ephesians 3:20',
'Be strong and courageous. Do not be afraid or terrified because of them, or the LORD your God goes with you; he will never leave you nor forsake you - Deuteronomy 31:6',
'What, then, shall we say in response to these things? If God is for us, who can be against us? - Romans 8:31',
'Be strong, and let your heart take courage, all you who wait for the LORD - Psalm 31:24',
'Jesus looked at them and said, ‘With man it is impossible, but not with God. For all things are possible with God - Mark 10:27',
'Casting all your anxieties on him, because he cares for you- 1 Peter 5:7',
'But Jesus looked at them and said, ‘With man this is impossible, but with God all things are possible - Matthew 19:26',
'Be watchful, stand firm in the faith, act like men, be strong. Let all that you do be done in love - 1 Corinthians 16:13-14',
'Our faith can move mountains - Matthews 17:20',
'Give thanks to the LORD for He is good: His love endures forever - Psalm 107:1',
'And we know that in all things God works for the good of those who love him, who have been called according to his purpose - Romans 8:28'
]

The Logic

Now we are going to use Math.floor function with a parameter Math.random() then multiply with the quote length to get the random quotes in a defined manner.

The quotes will be generated in a random way , a defined order must not neccesarily be followed since the JavaScript Random method has beeen used in our case to generate the quotes

We will store them as a variable named randomNumber.

Then we will display the values from the random number on our browser after defining the function newQuote to get a quote from an onclick of a button


function newQuote(){
    var randomNumber = Math.floor(Math.random()*quotes.length);
    document.getElementById('quotes').innerHTML = quotes[randomNumber];
}

The whole JavaScript file looks like this

//define quotes using arrays
var quotes = [

'Greater love has no one than this: to lay down ones life for ones friends - John 15:13',
'Now to him who is able to do immeasurably more than all we ask or imagine, according to his power that is at work within us - Ephesians 3:20',
'Be strong and courageous. Do not be afraid or terrified because of them, or the LORD your God goes with you; he will never leave you nor forsake you - Deuteronomy 31:6',
'What, then, shall we say in response to these things? If God is for us, who can be against us? - Romans 8:31',
'Be strong, and let your heart take courage, all you who wait for the LORD - Psalm 31:24',
'Jesus looked at them and said, ‘With man it is impossible, but not with God. For all things are possible with God - Mark 10:27',
'Casting all your anxieties on him, because he cares for you- 1 Peter 5:7',
'But Jesus looked at them and said, ‘With man this is impossible, but with God all things are possible - Matthew 19:26',
'Be watchful, stand firm in the faith, act like men, be strong. Let all that you do be done in love - 1 Corinthians 16:13-14',
'Our faith can move mountains - Matthews 17:20',
'Give thanks to the LORD for He is good: His love endures forever - Psalm 107:1',
'And we know that in all things God works for the good of those who love him, who have been called according to his purpose - Romans 8:28'


]

// define a function to generate quote 
function newQuote(){
    var randomNumber = Math.floor(Math.random()*quotes.length);
    document.getElementById('quotes').innerHTML = quotes[randomNumber];
}
//get the quote length
console.log(quotes.length)

Pictorial Results

You are free to do your own research too on the terms used here

Check all the files here

Good Day

Posted in

programming Technology