DEV Community

Cover image for Create A Random Quote Generator with HTML, CSS, and JavaScript
CoderZ90
CoderZ90

Posted on

Create A Random Quote Generator with HTML, CSS, and JavaScript

## Introduction:
In this blog post, we will explore how to create a random quote generator using HTML, CSS, and JavaScript. We will walk through the code step by step and explain how each component contributes to the functionality of the generator.

If you are too lazy too read this like me XDDDD
Check out this video:
.
In this video i have coded the quote generator
And yeah dont forget to Subscribe :))

## HTML Structure:
Let's start by examining the HTML structure of our quote generator. We have a basic HTML file that includes a container div with a title, a quote text element, and a button. Here's the HTML code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta tags and CSS link -->
  </head>
  <body>
    <div class="container">
      <div class="title">Quote Generator</div>
      <div class="quote_text">"In the middle of difficulty lies opportunity. - Albert Einstein"</div>
      <button onclick="generateQuote()" class="gnBtn">Generate <span id="cog">βš™</span></button>
    </div>

    <!-- JavaScript file -->
    <script src="app.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

## CSS Styling:
To make our quote generator visually appealing, we apply CSS styles. We import the Google Fonts library to use the "Poppins" font. We define some color variables using CSS custom properties, which we later utilize in our styles. Here's the CSS code:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');
/* Colors that will be used in the making of this website */
:root {
  --bg-color: #111314;
  --box-color: #1a1f22;
  --title-color: #a6a7ff;
  --gnBtnColor: #262d31;
}
* {
  margin: 0;
  padding: 0;
  font-family: "Poppins";
}

body {
  background-color: var(--bg-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 100vh;
}

.container {
  background: var(--box-color);
  padding: 20px;
  border-radius: 10px;
  text-align: center;

  width: 500px;
}

.container .title {
  font-weight: 700;
  color: var(--title-color);
  font-size: 2.2rem;
}

.quote_text {
  font-size: 1.8rem;
  font-weight: 500;
  margin-top: 20px;
  color: #dadada;
}

.gnBtn {
  width: 80%;
  height: 50px;
  margin-top: 25px;

  background-color: var(--gnBtnColor);
  cursor: pointer;

  outline: none;
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
}

#cog {
  color: var(--gnBtnColor);
}
Enter fullscreen mode Exit fullscreen mode

## JavaScript Functionality:
To make our quote generator dynamic, we utilize JavaScript. We define an array called quotes that stores various quotes as strings. Then, we create a function called generateQuote() that randomly selects a quote from the array and updates the quote text on the webpage. Here's the JavaScript code:

var quotes = [
  "The only way to do great work is to love what you do. - Steve Jobs",
  "In the middle of difficulty lies opportunity. - Albert Einstein",
  "Believe you can and you're halfway there. - Theodore Roosevelt",
  "Success is not final, failure is not fatal: It is the courage to continue that counts. - Winston Churchill",
  "The future belongs to those who believe in the beauty of their dreams. - Eleanor Roosevelt",
  "The best way to predict the future is to create it. - Peter Drucker",
];

let quoteText = document.querySelector(".quote_text");

function generateQuote() {
  var randomIndex = Math.floor(Math.random() * quotes.length);
  var quote = quotes[randomIndex]
  quoteText.innerHTML = '"' + quote + '"'
}
Enter fullscreen mode Exit fullscreen mode

Conclusion:
By combining HTML, CSS, and JavaScript, we have created a random quote generator. The HTML structure provides the foundation for the webpage, while CSS styles enhance its visual appearance. JavaScript adds interactivity by generating random quotes and updating the quote text accordingly. Feel free to modify the code and add more quotes to customize your own quote generator.

That's it! I hope you found it helpful in understanding how to build a simple random quote generator using HTML, CSS, and JavaScript. Happy coding! 😁

**_

Subscribe

_**: https://www.youtube.com/@CodingFire ❀

Top comments (5)

Collapse
 
mannu profile image
Mannu
Collapse
 
official_fire profile image
CoderZ90

Thankyou so muchπŸ‘πŸ˜

Collapse
 
mannu profile image
Mannu

Also u can use the api (if its not for beginners) to display more than 6 quotes.

Thread Thread
 
official_fire profile image
CoderZ90

Yess we can use API too.. But i thought to make it very beginner friendly thats why i made it according to ARRAYs

Collapse
 
official_fire profile image
CoderZ90

Sub ?: youtube.com/@CodingFire ❀