There are lots of creative things we can do with jQuery, HTML, and CSS. One such thing is creating random quotes generator website.
I am not going to start with the basics of jQuery or CSS. If you guys don’t know about basics, head on to W3Schools which is one of my favorite learning sites.

We will continue with the very simple approach. There will be several resources we will be using, here is a list of them:

  • Bootstrap CSS
  • jQuery
  • Sublime Text 3( Optional )

So let’s start to create a Random Quotes generator website. Go and open your IDE or text editor ( in my case, I am using Sublime Text 3 ).

So first, we will create an HTML structure for our project. Here is a Blueprint for our project;

create random quotes generator

Here the orange color grids are Bootstrap grids. This is a simple layout for our website. There is a button on the bottom of the page that will randomize the quote and show it in the upper space.

There are two grids, one for quotes spaces and other for a button.

First, we will need to import some of the resources listed above. Here is how you can do that:

<link href="" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<script src="jquery-3.3.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="">
<link type="text/css" rel="stylesheet" href="custom.css">
<script src="custom.js"></script>
<title>Random Quotes</title>
<style type="text/css"></style>

These will import content from the internet and from your local storage. Paste this into your index.htrml file.

Download jQuery minified version and create two files, custom.css and custom.js.

We will paste our custom code in these two files. Here is how our directory will look like:

create random quotes generator

Here is another file named as quotes.txt. Under this file, you have to paste some quotes. But make sure to paste them in this order:

Quote 1

Quote 2

Quote 3

I will tell you the reason to put them in this order later.

Now we have all our resources need to build our quotes generator app.

Now let’s write HTML for our site. Here is what you have to write in <body> tag:

<div class="container">
  <div class="col-md-12" id="quotes_space"></div>
  <div class="col-md-12" id="button">
    <button class="btn btn-default" type="button" id="buttonn">Inspire Me!</button>

The first <div> tag with a class of container is used to wrap site content and in order to use the grid system.

After that, we have created two columns, one for our quotes text and second for our button.

Now, let’s write CSS for our web app. You can have your own fonts, customizations, and CSS. But if you want just like mine, you can find the full source code on Github. The link will be at the bottom of this article.

Here is the best part, working with jQuery to get random quotes everytime we click on “Inspire Me!” button.

Here is my plan to do that;


create random quotes generator

So, here is a what you have to write in custom.js:

// JavaScript Document
$(document).ready(function () {
	"use strict";
var array_quotes = new Array();

	$.get('quotes.txt', function (data) {
		array_quotes = data.split(/\n/g);
		var i = 0;

		$('#buttonn').click(function () {
			var rand = array_quotes[Math.floor(Math.random() * array_quotes.length)];





I have created an array named as array_quotes. This array will contain our quotes that will come from a quotes.txt file.

.get() function enables us to insert a local quotes.txt file.

Now, as you can see in my plan, I have converted all the quotes into an array.

.split() method help me to do that. This method converts any string into an array. Inside this method, I have used ” /\n/g “. \n will remove all the new lines and convert them into an array. Suppose there is a string:

Welcome to Blogmytech

In order to convert this into an array, I can use .split(/ /); This will remove the white space and will convert this string in to : [“Welcome”, “to”, “Blogmytech”].

Till now, we have learned that how to convert quotes in a text file to an array. Now we will insert a click method on the button which will randomize the quotes in “array_quotes”.

To do this here is what you can do:

$('#buttonn').click(function () {
			var rand = array_quotes[Math.floor(Math.random() * array_quotes.length)];


A new variable is created by clicking the button which will hold a random value every time.  That value will be displayed in quotes_space by using .text() method.

If you want the full source code of this project, here is the link to Github. I will be happy if you will add new features.

if you guys liked this article to create a random quotes generator web app, then make sure to share it as much as you can. Moreover, don’t forget to subscribe to our Newsletter for more articles like this.

Also, read: Tricks to Bypass Surveys to Download/Unlock files FREE

Categories: How To

Banish Angural

Just searching things for you guys !

Leave a Reply

Your email address will not be published. Required fields are marked *