This post will teach you how to make a random quote generator using HTML, CSS, and JavaScript.
What is random quote generator?
This post describes two ways to generate quotes randomly.
Random quote generator using the multidimensional array
Skills required
HTML:- <div>, <h1>, <span>, and <button> elements and onClick event.
CSS:- gradient, box-sizing, position, transform, box-shadow, border-radius, float, font-family, font-size, max-height, height, width, margin, and padding properties. Rgba() function and more.
JavaScript:- multidimensional array, function, length property, Math.floor(), Math.random(), Dom method.
Steps to create a random quote using a nested array
1) HTML structure
First of all, specify the “<div>” element to create the box. Then after specify the “<h1>” element for the heading. Take one (paragraph) “<p>” tag to display a quote and two “<span>” elements to display the author's name. At last, specify <button> element to generate the next quote.
2) CSS styles
Apply a linear gradient to the body background. Specify rgba() to apply frosted glass (glassmorphism) background effect to the box. For that specify rgb color value 255 and alpha value 0.3 to 0.5 for transparency.
3) JavaScript
The first step is to define a multidimensional array. In each and every single array take two array elements, one for quotes and the second for the author name. The next step is to define a function. Inside a function, calculate the length of the multidimensional array and use random () inside floor () to get a random quote and author name. Use the Dom method to display quotes and the author’s name on the screen. Specify 0 index for the quote and 1 index value for the author’s name. Call this function on HTML button element.
Source code of random quote generator with multidimensional array.
<!DOCTYPE html> <html> <head> <title>Random Quote Generator</title> <link rel="stylesheet" href="random_quote_arr.css"> <script src="randomqtarray.js"></script> </head> <body> <div class="box"> <h1>Life Quotes</h1> <p class="quotes"><span>"</span>If you want to live a happy life,tie it to a goal, not to people or things.<span>"</span></p> <span class="author">Author:-</span> <span class="name">Albert Einstein</span><br> <button class="generate" onClick="randomquote()">Next Quote</button> </div> </body> </html>
CSS
* { box-sizing:border-box; font-family:"Arial Rounded MT Bold"; } body { background-image:linear-gradient(45deg,#ffc901,#00b330,#0067ff); } .box { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); height:auto; width:auto; background-color:rgba(255,255,255,0.3); border-radius:20px; box-shadow:3px 3px 15px #ffffff; } h1 { text-align:center; color:#006699; } .quotes { height:auto; max-width:400px; padding:10pt; text-align:center; font-size:14pt; color:#cc6600; } .author { float:left; margin-left:50%; } .name { flot:right; margin-left:50%; color:#990000; } .generate { width:auto; font-size:12pt; margin:10pt; padding:7pt; border-radius:5px; background-color:#0067ff; color:#ffffff; border:none; } .generate:hover { box-shadow:3px 3px 15px #006700; }
JavaScript
let quotes=[[""Not how long, but how well you have lived is the main thing."","Seneca"], [""If life were predictable it would cease to be life, and be without flavour."","Eleanor Rossevelt"], [""In order to write about life first you must live it."","Ernest Hemingway"], [""The unexamined life is not worth living."","Socrates"], [""Turn your wounds into wisdom."","Oprah Winfrey"], [""Life is like riding a bicycle. To keep your balance, you must keep moving."","Albert Einstein"], [""Live for each second without hesitation."","Elton John"], [""Life is a succession of lessons which must be lived to be understood."","Helen Keller"]]; function randomquote() { let qtlength=quotes.length; let randomqt=Math.floor(Math.random()*qtlength); document.querySelector(".quotes").innerHTML=quotes[randomqt][0]; document.querySelector(".name").innerHTML=quotes[randomqt][1]; }
Output
 |
| Random quote generator using JavaScript multidimensional array |
Random quote generator using object
Skills required
HTML:- <div>,<h1>, <p>, and <button> elements.
CSS:- knowledge of flexbox, height, width, max-width, padding, margin, transform, word-wrap, float properties, and many more.
JavaScript:- Knowledge of object, Dom method, function, and Math method floor () and random () and length property.
Steps to create a random quote using an object
1) HTML structure
Put heading, quote, and button in different div containers. Put all of these containers into another div container. Specify onClick event on button element for a function call.2) CSS style
Here, flex layout is used. Use the word-wrap property to break long words into a new line. Here you can use this property for quotes and the author's name. Specify its value to wrap to all allow long word or sentence display in new line. To give retro effects do not specify blur in box-shadow property.
3) JavaScript
Create an object of quotes by using object literals where to specify the author name as the property name(key) and the quote as its value. Define function. Specify Object.keys() method to return array Iterator of “qt” object with keys. Use random () with floor () method to fetch object key randomly and store in variable. (key also called property of an object.) To get value that is quotes specify object with variable name in which key stored using array. Call the function on HTML button element.
The following code gives you better understanding.
Source code of random quote generator using object
HTML
<!DOCTYPE html> <html> <head> <title>Random Quote Generator</title> <link rel="stylesheet" href="random_quote.css"> <script src="random_quote_gen.js"></script> </head> <body> <div class="main"> <div class="heading"> <h1>Quote Generator</h1> </div> <div class="quotes"> <p class="quote"> "Great minds discuss ideas, Average mind discuss events, Small mind discuss people." </p> <p class="name">-</p> <p class="author"> unknown </p> </div> <button id="generate" onClick="quote()">Generate Quote</button> </div> </body> </html>
CSS
{
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}
.main
{
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
height:100vh;
background-color:#141529;
}
.heading
{
height:auto;
width:auto;
background-color:#ee7057;
color:#2b2e51;
padding:5px;
margin:10px;
text-align:center;
border-radius:20px;
}
.quote
{
text-align:center;
word-wrap:wrap;
}
.author
{
text-align:left;
width:50%;
float:right;
}
.quotes
{
height:auto;
max-width:350px;
background-color:#686db1;
color:#f7b048;
padding:10px;
margin:5px;
box-shadow:5px 5px #686d55;
}
.name
{
text-align:right;
width:50%;
float:left;
word-wrap:wrap;
}
#generate
{
height:auto;
width:auto;
background-color:#f7b048;
color:#686db1;
margin:10px;
padding:7px;
font-size:16pt;
box-shadow:0px 5px #ff0000;
border:none;
border-radius:20px;
}
#generate:active
{
transform:translateY(5px);
box-shadow:0px 1px #ff0000;
}
JavaScript
let qt={ Swami_Vivekananda:""Arise,Awake! and stop untill the goal is not reached.<span>"</span>", Dalai_Lama:""The purpose of our life is to be happy.<span>"</span>", Henry_Ford:""The whole secret of successfull life is to find out what is one destiny to do.then do it.<span>"</span>", Thomas_Alva_Edison:""Many of life's failures are people who did not realize how close they were to success when they gave up.<span>"</span>", Henry_David_Thoreau:""Go confidently in the direction of your dreams! Live the life you've imagined.<span>"</span>", Walt_Disney:""The way to started is to quit talking and begin doing.<span>"</span>", Steve_Jobs:""If you look closely, most overnoght succeesses took a long time.<span>"</span>", }; function quote() { let author=Object.keys(qt); let random_qt=author[Math.floor(Math.random()*author.length)]; document.querySelector(".quote").innerHTML=qt[random_qt]; document.querySelector(".author").innerHTML=random_qt; }
Output
 |
| Random quote generator using JavaScript object |
Summary
In this post, you learned about how to use objects, nested arrays, and Math methods, in making projects like random quote generators. The value of height and width properties set to auto to make quote generator responsive.
0 Comments