Create Random Quote Generator Using HTML, CSS, And JavaScript

Create Random Quote Generator Using HTML, CSS, And JavaScript

Hey Guys, Welcome To The Blog, In This Blog We Are Going To See How To Create An Random Quotes Generator Using HTML, CSS, And JavaScript. Before That We Will See About The Project.

This Project is used to generate random quotes when we click on the Quote Button and the color of the background and the button are also changed according to the quote’s font color. Additionally, The Social media icon were added for sharing the quotes generated.

So This is the project we gonna create. Now Let’s begin with adding the source codes for our project and it starts with the HTML code.

HTML CODE RANDOM QUOTES GENERATOR

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-3"></div>
        <div class="col-xs-12 col-sm-6 quotebox">
            <div class="row">
                <div class="col-xs-12">
                    <blockquote>
                        <i class="fa fa-quote-left quotemark"></i>
                        <h2 id="quotetext"></h2>
                        <footer id="quotesource"></footer>
                    </blockquote>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-12">
                    <div class="social-icons icon-rounded"><a id="tweet-quote" title="Tweet this quote!" target="_blank"><i class="fa fa-twitter"></i></a>
                    </div>
                    <div class="quotebutton"><button class="btn btn-primary" id="newquote">New Quote</button></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-3"></div>
    </div>
</div>

Now we have successfully added our html code. In this code we have created the container for every elements with div tag with the respective class names given.

Here we have used bootstrap plugin for layout in which you can find it in every div elements with the respective class names. And the example code for bootstrap class names is given below for reference.

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-3"></div>
        <div class="col-xs-12 col-sm-6 quotebox">
            <div class="row">
                <div class="col-xs-12">

These were the specific part that is used with the bootstrap box model by mentioning class names. Now we manually started adding our elements as per project desire. First, we create an empty space with a block quote tag for displaying the quotes. Then with the footer tag again we used to create empty space for the author of the quote that needs to be displayed.

Now after that, we lastly add the social media Twitter icon and button. With these, we can generate new quotes and share it on Twitter. The specific example code is given below.

<div class="col-xs-12 col-sm-12">
                    <div class="social-icons icon-rounded"><a id="tweet-quote" title="Tweet this quote!" target="_blank"><i class="fa fa-twitter"></i></a>
                    </div>
                    <div class="quotebutton"><button class="btn btn-primary" id="newquote">New Quote</button></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-3"></div>
    </div>
</div>

We have now completed the html code for the project. So let we move on to style our project with the help of css code. The respective code is down below.

CSS CODE RANDOM QUOTES GENERATOR

body,
h1,
h2,
h3,
h4,
h5,
h6,
p
 { font-family: 'Raleway', sans-serif;
}

h1{font-size:35px;}
h2{font-size:30px;}
h3{font-size:25px;}
p {font-size:16px;}

body {background:#490A3D;}
.quotemark {
    position: relative;
    top: -12px;
    padding-right: 10px;
}

blockquote {
  border-left: 10px solid #490A3D;
  margin: 30px 10px;
  padding: 10px 30px;
}
blockquote:before {
  color: #ccc;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote h1, h2, h3, p{
  display: inline;
}
blockquote footer {
    font-size:18px;
    text-align:right;
    color:transparent;
}

.container {
    max-height:800px;
    margin: 10% auto auto auto;
}
.quotebox {
    background:#fff;
    max-width:500px;
    min-height:100px;
    border:1px solid #222;
    border-radius:5px;
    margin:10px;
}

.quotebutton {
    display:inline-block;
    padding:6px 12px;
}
    #quotesource{margin-top:20px}

.btn {margin-bottom:10px}

.social-icons {
    padding:6px 12px;
    display:inline-block;
    
}
.social-icons .fa {
    font-size: 1.8em;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #FFF;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.social-icons.icon-rounded .fa{
    border-radius:5px;
}
.social-icons .fa:hover, .social-icons .fa:active {
    color: #FFF;
    -webkit-box-shadow: 1px 1px 3px #333;
    -moz-box-shadow: 1px 1px 3px #333;
    box-shadow: 1px 1px 3px #333; 
}
.social-icons .fa-twitter {
    background-color:#490A3D; 
    border-color:none;} 

.btn-primary {
    width: 100px;
    height: 40px;
    border:none;
    background:#490A3D;
    }

@media only screen and (max-width: 768px){  
    #quotetext {font-size:25px; }
    .container {	margin-right:20px;}
    }
@media only screen and (max-width: 320px){  
    #quotetext {font-size:18px; }

    }

We have added our css code successfully. In this code we firstly declare every element’s font family to be ‘raleway’, sans-serif , so the font family will be this throughout the project.

Now we enter into the body section and fix the background color, property, and alignments to as per our requirements with quote marks. Here we have given the value 10px , relative -12px for the respective css properties in body section.

body {background:#490A3D;}
.quotemark {
    position: relative;
    top: -12px;
    padding-right: 10px;
}

After this, we started styling our quotes section by adding the quote’s color, alignments, borders, and position with the respective properties. In this, especially on quotes, we have given the quote’s default color to be white and when we click on the generate button then it will change the color with the background color appearing.

Further, the additional thing here added is the author for the respective quotes generated. For that specific element, we again added the colors and alignment.

Now we have given the example code for the above explanation which you can see below.

blockquote {
  border-left: 10px solid #490A3D;
  margin: 30px 10px;
  padding: 10px 30px;
}
blockquote:before {
  color: #ccc;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote h1, h2, h3, p{
  display: inline;
}
blockquote footer {
    font-size:18px;
    text-align:right;
    color:transparent;
}

.container {
    max-height:800px;
    margin: 10% auto auto auto;
}
.quotebox {
    background:#fff;
    max-width:500px;
    min-height:100px;
    border:1px solid #222;
    border-radius:5px;
    margin:10px;
}

Lastly, we are styling the generate button along with the social media icon and adding some specific media queries in order to make it responsive.

10+ Javascript Project Ideas For Beginners( Project Source Code)

Also, some form of animation properties were added for the icon to make some effects on it and the effect will be like hover, pop up, transition, etc. For this kind of purpose, the specific lines of code are mentioned below.

.quotebutton {
    display:inline-block;
    padding:6px 12px;
}
    #quotesource{margin-top:20px}

.btn {margin-bottom:10px}

.social-icons {
    padding:6px 12px;
    display:inline-block;
    
}
.social-icons .fa {
    font-size: 1.8em;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #FFF;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.social-icons.icon-rounded .fa{
    border-radius:5px;
}
.social-icons .fa:hover, .social-icons .fa:active {
    color: #FFF;
    -webkit-box-shadow: 1px 1px 3px #333;
    -moz-box-shadow: 1px 1px 3px #333;
    box-shadow: 1px 1px 3px #333; 
}
.social-icons .fa-twitter {
    background-color:#490A3D; 
    border-color:none;} 

.btn-primary {
    width: 100px;
    height: 40px;
    border:none;
    background:#490A3D;
    }

@media only screen and (max-width: 768px){  
    #quotetext {font-size:25px; }
    .container {	margin-right:20px;}
    }
@media only screen and (max-width: 320px){  
    #quotetext {font-size:18px; }

    }

As of we have completed our css code successfully. Now it’s time to add the javascript code to make it work on the generation of quotes and color variations.

JAVASCRIPT CODE RANDOM QUOTES GENERATOR

function inIframe() {
    try {
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}

        var colors = [
            '#490A3D',
            '#BD1550',
            '#E97F02',
            '#F8CA00',
            '#8A9B0F',
            '#69D2E7',
            '#FA6900',
            '#16a085',
            '#27ae60',
            '#2c3e50',
            '#f39c12',
            '#e74c3c',
            '#9b59b6',
            '#FB6964',
            '#342224',
            '#472E32',
            '#77B1A9',
            '#73A857'
        ];

var quotes = [
    ["You only live once, but if you do it right, once is enough.","Mae West"],
    ["I am so clever that sometimes I don't understand a single word of what I am saying.","Oscar Wilde"],
    ["Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.","Albert Einstein"],
    ["The most beautiful experience we can have is the mysterious. It is the fundamental emotion that stands at the cradle of true art and true science.","Albert Einstein"]
    ["It is our choices, Harry, that show what we truly are, far more than our abilities.","J.K. Rowling, Harry Potter and the Chamber of Secrets"],
    ["All men who have turned out worth anything have had the chief hand in their own education.","Walter Scott"],
    ["Trust yourself. You know more than you think you do.","Benjamin Spock"],
    ["No one can make you feel inferior without your consent.","Eleanor Roosevelt, This is My Story"],
    ["To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment.","Ralph Waldo Emerson"],
    ["Twenty years from now you will be more disappointed by the things that you didn't do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover.","H. Jackson Brown Jr., P.S. I Love You"]
    ];


var currentQuote = "";
var currentAuthor = "";
var randomquote = "";
var randomcolor = "";

function getQuote() {
    randomquote = Math.floor(Math.random() * quotes.length);
    randomcolor = Math.floor(Math.random() * colors.length);
    currentQuote = quotes[randomquote][0];
    currentAuthor = quotes[randomquote][1];
    if (inIframe()) {
        $('#tweet-quote').attr('href', 'https://twitter.com/intent/tweet?hashtags=quotes&related=aLamm&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor));
    }

    $(document).ready(function () {
        $('html body').animate({
            backgroundColor: colors[randomcolor],
            color: colors[randomcolor]
        }, 500);
        $('#newquote, .social-icons .fa-twitter').animate({ backgroundColor: colors[randomcolor] }, 500);
            $('blockquote footer').animate({ color: colors[randomcolor] }, 500);	
        $('blockquote').animate({ borderLeftColor: colors[randomcolor] }, 500);
        $('#quotetext').animate({ opacity: 0 }, 500, function () {
            $(this).animate({ opacity: 1 }, 500);
            $(this).text(currentQuote);
        });
        $('#quotesource').animate({ opacity: 0 }, 500, function () {
            $(this).animate({ opacity: 1 }, 500);
            $(this).text(currentAuthor);
        });
    });    
}

function openURL(url) {
    window.open(url, 'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}

getQuote();

$(document).ready(function () {
    $('#newquote').on('click', getQuote);
    $('#tweetquote').on('click', function () {
        if (!inIframe()) {
            openURL('https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor));
        }
    });
});

Now the respective javascript code is added successfully. In this first part code, we first create a function with the function name for adding the scroll bar to the right side.

Next, we started adding the colors for background change among the quotes and the quotes that need to be generated are declared with separate variable names. Now by adding a function with the function name of the button id the quotes are generated with the respective authors. For that purpose, we are adding js floor properties and random properties which makes the generation of quotes with the respective author of the quote.

For the above explanation, the specific code is down below.

function inIframe() {
    try {
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}

        var colors = [
            '#490A3D',
            '#BD1550',
            '#E97F02',
            '#F8CA00',
            '#8A9B0F',
            '#69D2E7',
            '#FA6900',
            '#16a085',
            '#27ae60',
            '#2c3e50',
            '#f39c12',
            '#e74c3c',
            '#9b59b6',
            '#FB6964',
            '#342224',
            '#472E32',
            '#77B1A9',
            '#73A857'
        ];

var quotes = [
    ["You only live once, but if you do it right, once is enough.","Mae West"],
    ["I am so clever that sometimes I don't understand a single word of what I am saying.","Oscar Wilde"],
    ["Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.","Albert Einstein"],
    ["The most beautiful experience we can have is the mysterious. It is the fundamental emotion that stands at the cradle of true art and true science.","Albert Einstein"]
    ["It is our choices, Harry, that show what we truly are, far more than our abilities.","J.K. Rowling, Harry Potter and the Chamber of Secrets"],
    ["All men who have turned out worth anything have had the chief hand in their own education.","Walter Scott"],
    ["Trust yourself. You know more than you think you do.","Benjamin Spock"],
    ["No one can make you feel inferior without your consent.","Eleanor Roosevelt, This is My Story"],
    ["To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment.","Ralph Waldo Emerson"],
    ["Twenty years from now you will be more disappointed by the things that you didn't do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover.","H. Jackson Brown Jr., P.S. I Love You"]
    ];


var currentQuote = "";
var currentAuthor = "";
var randomquote = "";
var randomcolor = "";

function getQuote() {
    randomquote = Math.floor(Math.random() * quotes.length);
    randomcolor = Math.floor(Math.random() * colors.length);
    currentQuote = quotes[randomquote][0];
    currentAuthor = quotes[randomquote][1];

Now after completing this, we are adding the code for sharing the current quotes to social media(Twitter), and the color changing of buttons, backgrounds, borders, and icons with respective quotes declared were done.

100+ Front-end Projects for Web developers (Source Code)

So the code for the above explanation is down below.

if (inIframe()) {
        $('#tweet-quote').attr('href', 'https://twitter.com/intent/tweet?hashtags=quotes&related=aLamm&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor));
    }

    $(document).ready(function () {
        $('html body').animate({
            backgroundColor: colors[randomcolor],
            color: colors[randomcolor]
        }, 500);
        $('#newquote, .social-icons .fa-twitter').animate({ backgroundColor: colors[randomcolor] }, 500);
            $('blockquote footer').animate({ color: colors[randomcolor] }, 500);	
        $('blockquote').animate({ borderLeftColor: colors[randomcolor] }, 500);
        $('#quotetext').animate({ opacity: 0 }, 500, function () {
            $(this).animate({ opacity: 1 }, 500);
            $(this).text(currentQuote);
        });
        $('#quotesource').animate({ opacity: 0 }, 500, function () {
            $(this).animate({ opacity: 1 }, 500);
            $(this).text(currentAuthor);
        });
    });    
}

function openURL(url) {
    window.open(url, 'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}

getQuote();

$(document).ready(function () {
    $('#newquote').on('click', getQuote);
    $('#tweetquote').on('click', function () {
        if (!inIframe()) {
            openURL('https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor));
        }
    });
});

Just we have completed our javascript code successfully. As of now, we now came to an end of these projects but before that make sure to view the project preview in the mentioned output section.

FINAL OUTPUT OF RANDOM QUOTES GENERATOR

Now We Have Successfully Created Our Random Quotes Generator Using Html, Css, And Java Script. You Can Use This Project For Your Personnel Needs And The Respective Lines Of Code Is Given With The Code Pen Link Mentioned Below.

If You Find Out This Blog Helpful? , Then Make Sure To Search Code With Random On Google For Front End Projects With Source Codes And Make Sure To Follow The Code With Random Instagram Page.

Refer Code: Alexander Lamm

Written By: Ragunathan S

Share on:

Leave a Comment