Learners, In this article we are going to cover a very awesome project with the help of js that is Random Quote Generator. I’m not assuming that whether you know about or project or not but don’t worry Devs I will help you all to interact with this awesome project from scratch.

Like Let me know how many people are reading this who start their day by reading an awesome quote stated by rich people, I know we can’t avoid it because it set us on track and help us to maintain our motivation level. I’m saying gall this stuff because our project idea is from there only.

Random Quote Generator Using HTML & CSS, And JavaScript

We will create a random quote generator mini-project that will give you an awesome quote each time if you don’t like any specific  quote you can just shuffle, It isn’t it cool don’t worry in the next moment we will define it by  ourselves only

Hey learners!

Welcome to our today’s blog with code with random. In this blog, we gonna learn how we can design a Random Quote Generator Using HTML CSS JAVASCRIPT.

I hope you must have got an idea about the project.

Let’s have a look at our project.

In the staring, our project will look like this as and when your cursor will hit the new quote then from the moment only you will be able to observe a new quote with a changing background it will look like as:-

HTML SECTION For Random Quote Generator

Here I’m not going to add a structure of the HTML file from scratch, I will just paste the body part, it is so because the body is the main part of our designing a browser.

We have the following part in the HTML section.

First, we have a class with a class container quote frame that will enclose all the parts of designing within it.
Then in the first container, we have a div with a class quote that has an inverted comma at the starting of a quote that will easily identify you it is a quote.

then we have a button with displays the text new quote on the left side and in the left side we have icons of Twitter and Facebook it is just a part of UI design t that if you like to share on this social channel then you can do it easily.
Go through the below code and run it in your IDE or where you used to design just HTML without CSS styling.

<!-- 
generate a new random quote
generate a random color for background
enable sharing buttons for twitter (half enabled) and tumbler
-->
<div class="container quoteFrame">
    <div class="quote">
    <p><i class="fa fa-quote-left"></i>
            <span id="quoteText">Problems worthy of attack prove their worth by fighting back.</span></p>
            <footer class="blockquote-footer"><span id="quoteAuthor">Someone Famous</span></footer>
    </div>
    <div class="buttons">
            <div class="btn btn-primary">
                <a id="shareTwitter" href="#"><i class="fa fa-twitter"></i></a>
            </div>
            <div class="btn btn-primary">
                <a id="shareTumblr" href="#"><i class="fa fa-tumblr"></i></a>
            </div>
      <a id="getNewQuote" class="btn btn-primary" style="float:right;">New quote</a>
    </div>  
</div>
<div class="footer text-center">
    <p class="smaller">by <a href="https://codepen.io/tonalmasher/">aram</a></p>
</div>

CSS SECTION For Random Quote Generator

By CSS we will design our container and will bring it to the center and then we will set the width of the quote area and will bring it after the border and we will design clickable buttons and social feed icon and will place it on the left and right side of the container as per above project preview image.

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

The Below code will analyze you more. So just add in your HTML half-complete file and wait to watch some magic.

/*
* 
* To change colors you target  --main-bg-color in: html
*
*/

html {
  --main-bg-color: #9003fc;
}

body {
  background-color:  var(--main-bg-color);
  font-family: Raleway;
}

.quoteFrame {
  border-radius: 3px;
  position: relative;
  margin: 8% auto auto auto;
  max-width: 550px;
  padding: 40px 50px;
  display: table;
  background-color: #fff;
}

.quoteFrame p {
  text-align: center;
  font-weight: 500;
  font-size: 1.75em;
}

.quoteFrame footer {
  text-align: right;
  padding-top: 10px;
}

.buttons {
  padding-top: 20px;
  
}

.btn, .btn:hover {
  background-color: var(--main-bg-color);
  border-color: var(--main-bg-color);
}

.btn:hover {
  opacity: 0.8;
}

.fa {
  color: var(--main-bg-color);
} 

.quoteFrame .buttons a, .quoteFrame .buttons a:hover  {
  color: white;
}

.fa-twitter, .fa-tumblr {
  color: white;
  font-size: 18px;
}

.smaller {
    padding-top: 1rem;
    font-size: 12px;
    color: white;
}

.smaller a:visited {
    color: white;
}

JAVASCRIPT SECTION For Random Quote Generator

In the Javascript part, the main part you should note that we are using API because it’s a random generator quote and we don’t want our quote to shuffle between a few placed quotes only so we have used API here.

So, by this, we do the following part only as:-
On clicking the new quote button it will shuffle the displayed quote.
By shuffle quote, our background color will be also changed, this is an interesting part must check it out.

For observing this magic for this project then you should add the js file with the rest of the HTML and CSS file and enjoy this project and deploy it on Github.

$(document).ready(function() { 
    
  $("#getNewQuote").on("click", function(){    
    /* request from forismatic API */
        var source= "https://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?";
    $.getJSON(source, function(response) {
       /* Change the text inside of #currentQuote*/
      
            var forismaticResponse = JSON.stringify(response);
            /* convert the stringify result into an object */
            var newQuote = JSON.parse(forismaticResponse);
            
            $("#quoteText").html(newQuote.quoteText);
            $("#quoteAuthor").html(newQuote.quoteAuthor);
            $("#shareTwitter").html("<a id='shareTwitter' href='https://www.twitter.com/share?url=" + newQuote.quoteLink + "&text=" + newQuote.quoteText + "'" + "target='_blank'><i class='fa fa-twitter'></i></a>");
            $("#shareTumblr").html("<a id='shareTumblr' href='https://www.tumblr.com/share?url=" + newQuote.quoteLink + "'" + "target='_blank'><i class='fa fa-tumblr'></i></a>");
                /* Random color generater code from https://stackoverflow.com/questions/5092808/how-do-i-randomly-generate-html-hex-color-codes-using-javascript */
            $("html").css("--main-bg-color", function(){
                var color = '#'+(Math.random()*0xFFFFFF<<0).toString(16); 
                if ( color == '#ffffff'){
                    return '#f1f1f1';
                } else return color;
            });
            
    });
  
  });
 
});

A live preview of our project is attached below refer to this Random Quote Generator codepen.

Final Output Of Random Quote Generator

By this blog… We have learned how we can design a Random Quote Generator. Using HTML CSS JAVASCRIPT.

Now I’m looking for your reviews.
So, How was the blog , Learners!

If you want a more crisp blog like this then please check our Blogs sites CodewithRandom. keep tuned with us because every day you will learn something new here.

Weather App Using Html,Css And Javascript (Weather App Source Code )

I hope that I’m able to make you understand this topic and that you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills bloggers’ hearts with enthusiasm for writing more new blogs.

You can follow me on Instagram 

Written by @Ankit kumar