Skip to content
Home » Blog » Random Quote Generator JavaScript

Random Quote Generator JavaScript3 min read

Random Quote Generator

So Welcome To Another JavaScript Project Post, In This Post We Will Be Creating a Random Quote Generator Using HTML, CSS & JavaScript. And If your are JavaScript Beginner Then This is For You. This will Help you to Practise & Understand How a JS App Works And What is the Real Backend Work Going On.

Random Quotes Generator (TEST HERE)

What is a Random Quote Generator Will Work?

A Random Quote Generator Works Like When a User Clicks On the Get Quote Button It Gives User Some Quotes As Many Times the User clicks On The Get Quote Button New Quote Appears. In this Project There is No API (Application Programming Interface) Used. I Have Just Created a Variable Called Quotes And Put Some Quotes Extracted From GOOGLE.

HTML CODE: 

<!DOCTYPE html>
<html>
    <head>
        <title>
            Quote Genrator - JavaScript
        </title>
        <link rel="stylesheet" href="style.css">
        </head>
        <body>
            <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
            <link rel="icon" href="favicon.png">
              <div class="container">
                <div id="content">
                  <p id="quote">"Quote Genrator" <br/>- By: <a href="http://mrprogrammer.in/" target="_blank" style="color: #fff;">www.mrprogrammer.in</a></p>
                </div>
              </div>
              <div id="b-nav">
                <ul>
                  <button id="btn" onclick="getQuote()">New Quote</button>
                  <a href="Quote Genrator - Mr Programmer.rar" download id="btn" style="text-decoration: none; padding: 10px; border-radius: 5px; font-family: sans-serif;">Dowload SOURCE CODE</a>
                </ul>
              </div>

              <script src="app.js"></script>
        </body>
        </html>

CSS CODE:

Copy And Customize the Following CSS Code: 

html, body {
    overflow-x: hidden;
    overflow-y: hidden; 
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: black;
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    z-index: -2;
  }
  
  
  
  #content {
    height: 45em;
  } p {
    max-width: 30em;
    color: #fff;
    background-color: #111;
    font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
    letter-spacing:0.1em;
    text-align:center;
    margin: 40px auto;
    text-transform: lowercase;
    line-height: 145%;
    font-size: 2em;
    font-variant: small-caps;
  }
  
  p :hover {
    text-decoration: none;
  }
  
  .container {
    padding-top: 6em;
    text-align: center;
  }
  
  #b-nav {
    padding-bottom: 5em;
    position: fixed;
    width: 100%;
    bottom: 2em;
  }
  
  #b-nav ul {
    margin: 0;
    padding: 0.5em;
    list-style-type: none;
    text-align: center;
  }
  
  #b-nav ul li {
    display: inline;
  }
  
  #b-nav ul li a {
    text-decoration: none;
    padding: .2em 1em;
    background-color: black;
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
  }
  
  .hold {
    width: 100%;
    text-align: left;
  }
  
#btn{
background-color: #111;
color: #fff;
border-radius: 5px;
padding: 10px;
cursor: pointer;
 }
  
  @media screen 
   and (max-device-width: 800px) 
    and (max-device-height: 640px) 
    and (-webkit-device-pixel-ratio: 2) 
    and (orientation: portrait) {
      p {
        font-size: 1em;
      }
  }
  
  .fa-twitter {
    font-size: 30px !important;
    margin-left: 20px;
  }

JS CODE:

JavaScript Code of the Application:

function getQuote() {
    var randNum = Math.floor(Math.random() * 8) + 1;
    document.getElementById('quote').innerHTML = quotes[randNum];
  }
  
//   quotes 
var quotes = ["Blank", "\If you want to achieve greatness stop asking for permission.\"", "\"Things work out best for those who make the best of how things work out\"", "\"To live a creative life, we must lose our fear of being wrong.\"", "\"If you are not willing to risk the usual you will have to settle for the ordinary.\"", "\"Trust because you are willing to accept the risk, not because it's safe or certain.\"", "\"If you do what you always did, you will get what you always got.\"", "\"Success is walking from failure to failure with no loss of enthusiasm.\"", "\"Just when the caterpillar thought the world was ending, he turned into a butterfly.\"",];

Also Read: Create Notes App Using Pure JavaScript

TEST APP HERE:

After Applying all the Files And Deploying your Project, This is How Your Project Looks Like:

Random Quote Genrator JavaScript IMG

Thanks For Reading This Blog

DOWNLOAD SOURCE CODE

Tanmay Sinha
Latest posts by Tanmay Sinha (see all)

Related posts:

Password ValidationPassword Validation Using JavaScript3 min read Realtime Chat AppRealtime Chat Application Socket.io3 min read Typing AnimationTyping Animation Using HTML & CSS3 min read Most Popular Programming Language 2022Most Popular Programming Language 20223 min read Login Sign Up FormGlassmorphism Login Form Using HTML & CSS5 min read Facebook Post CloneCreate Facebook Post Clone Using HTML, CSS & JavaScript8 min read Web ServerWeb Server In Node.js1 min read Python Qr Code ThumbnailQR Code Generator In Python1 min read
Tags: