JavaScript code Example Random Quote Generator
JavaScript Developer WorldWide
Join the JavaScript Developers worldwide JavaScript Developers JavaScript Coders JavaScript Freelancers
Project: Random Quote Generator
Step 1: HTML Structure
Create an HTML file named index.html and set up the basic structure.
<!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="styles.css">
</head>
<body>
????<div class="container">
????????<h1>Random Quote Generator</h1>
????????<p id="quote">Click the button to generate a random quote.</p>
????????<button id="generateButton">Generate Quote</button>
????</div>
????<script src="script.js"></script>
</body>
</html>
Step 2: CSS Styling
Create a CSS file named styles.css for basic styling.
body {
????font-family: Arial, sans-serif;
????background-color: #f0f0f0;
????margin: 0;
????padding: 0;
????display: flex;
????justify-content: center;
????align-items: center;
????height: 100vh;
}
.container {
????background-color: #fff;
????padding: 20px;
????border-radius: 5px;
????box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
????width: 300px;
????text-align: center;
}
h1 {
????font-size: 24px;
}
button {
????display: block;
????margin: 10px auto;
????padding: 8px 16px;
领英推荐
????background-color: #007bff;
????color: #fff;
????border: none;
????border-radius: 3px;
????cursor: pointer;
}
Step 3: JavaScript Logic
Create a JavaScript file named script.js for the application logic.
const quotes = [
????"The only way to do great work is to love what you do. - Steve Jobs",
????"Innovation distinguishes between a leader and a follower. - Steve Jobs",
????"Don't be afraid to give up the good to go for the great. - John D. Rockefeller",
????"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"
];
const generateButton = document.getElementById("generateButton");
const quoteElement = document.getElementById("quote");
generateButton.addEventListener("click", generateRandomQuote);
function generateRandomQuote() {
????const randomIndex = Math.floor(Math.random() * quotes.length);
????quoteElement.textContent = quotes[randomIndex];
}
Step 4: Testing
Open the index.html file in a web browser. You should see the "Random Quote Generator" with a button. Clicking the button will replace the quote with a random quote from the quotes array.
// An array of quotes to display
const quotes = [
????"The only way to do great work is to love what you do. - Steve Jobs",
????"Innovation distinguishes between a leader and a follower. - Steve Jobs",
????"Don't be afraid to give up the good to go for the great. - John D. Rockefeller",
????"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"
];
// Get references to the HTML elements
const generateButton = document.getElementById("generateButton");
const quoteElement = document.getElementById("quote");
// Attach an event listener to the "Generate Quote" button
generateButton.addEventListener("click", generateRandomQuote);
// Define the function to generate a random quote
function generateRandomQuote() {
????// Generate a random index within the range of the quotes array
????const randomIndex = Math.floor(Math.random() * quotes.length);
????// Display the randomly selected quote in the quoteElement
????quoteElement.textContent = quotes[randomIndex];
}
Step by Step Explanation:
By following these steps, the code creates a simple "Random Quote Generator" that displays a new random quote each time the "Generate Quote" button is clicked. This is a great example of how JavaScript can be used to create dynamic and interactive content on a webpage.