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>

## 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);
}

## 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 + '"'
}

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! 😁

**_

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

Blog

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

CoderZ90

Subscribe

Join Our Newsletter. No Spam, Only the good stuff.

Related