Unleash Wisdom at Random: Creating a Quotes Generator with HTML5, CSS3, and JavaScript

Introduction

In this article, we will create a random quotes generator using HTML, CSS, and JavaScript. The generator will display a new quote and its author each time a button is clicked. Let's dive in and show you how to build this project step by step.

Setting Up Your Project

Create a Project Folder
First, create a new folder named random-quote-generator or any name you prefer.
Create the Necessary Files
Inside this folder, create three files:
- index.html
- style.css
- app.js

Writing the HTML Code

Open index.html and structure your HTML as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Quote Generator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="quote-container">
        <div id="quote-output">
            <span>Lorem ipsum dolor sit amet.</span>
        </div>
        <div id="author-output">
            <small>Author Name</small>
        </div>
        <button class="btn" id="quote-btn">Get Quote</button>
    </div>
    <script src="app.js"></script>
</body>
</html>

Styling with CSS

Next, open style.css and add the following styles to enhance the appearance of your quote generator:

* (
    margin: 0;
    padding: 0;
)

body (
    background-color: #ddd;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 100vh;
)

.quote-container (
    padding: 20px;
    position: relative;
)

#quote-output (
    font-family: 'sans-serif';
    letter-spacing: 2px;
    line-height: 50px;
    font-size: 2rem;
    margin-top: 2rem;
    max-width: 800px;
)

#author-output (
    margin-top: 5rem;
    text-align: right;
    font-family: 'sans-serif';
    font-size: 1.2rem;
)

.btn (
    padding: 10px 30px;
    background-color: #fbfdbb;
    border: none;
    cursor: pointer;
)

Adding JavaScript Functionality

Now, open app.js and implement the JavaScript logic to make the generator functional.

const generateQuoteButton = document.getElementById('quote-btn');
const quoteOutput = document.getElementById('quote-output');
const authorOutput = document.getElementById('author-output');

const quotes = [
    (
        author: "Albert Einstein",
        quote: "We cannot solve our problems with the same thinking we used when we created them."
    ),
    (
        author: "Maya Angelou",
        quote: "You will face many defeats in life, but never let yourself be defeated."
    ),
    (
        author: "Nelson Mandela",
        quote: "It always seems impossible until it’s done."
    )
    // Add more quotes as needed
];

function generateQuote() (
    let random = Math.floor(Math.random() * quotes.length);
    quoteOutput.innerHTML = `<span>${quotes[random].quote)</span>`;
    authorOutput.innerHTML = `<small>- $(quotes[random].author)</small>`;
}

generateQuoteButton.addEventListener('click', generateQuote);

Conclusion

Now, when you click on the "Get Quote" button, a random quote along with its author's name will display on the screen.

Keywords

Random Quotes
HTML
CSS
JavaScript
Quote Generator
Web Development
Front-End

FAQ

Q1: What technologies are used to create the quotes generator?
A1: The quotes generator is built using HTML for structure, CSS for styling, and JavaScript for interactivity.

Q2: How can I add more quotes to the generator?
A2: You can add more quotes by inserting additional objects into the quotes array in the app.js file.

Q3: Can I change the style of the quotes generator?
A3: Yes, you can customize the styles in the style.css file to change the appearance as you like.

Q4: Is it possible to host this project on GitHub?
A4: Yes, you can upload your project files to a GitHub repository to share with others.