Skip to content
Home » Blogs » 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.



<!DOCTYPE html>
            Quote Genrator - JavaScript
        <link rel="stylesheet" href="style.css">
            <link rel="stylesheet" type="text/css" href="">
            <link rel="icon" href="favicon.png">
              <div class="container">
                <div id="content">
                  <p id="quote">"Quote Genrator" <br/>- By: <a href="" target="_blank" style="color: #fff;"></a></p>
              <div id="b-nav">
                  <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>

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


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;
    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;
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;


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


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


Tanmay Sinha


The Ultimate Managed Hosting Platform