-
Random Quote on Your Webpage with JavaScript
-
Surprise me with cute awesome photo
-
Make an HTTP request in Javascript?
-
Team card with tailwind css
-
Tutorial React Best practices
-
Give me 3 ideas about how to plan good New Years resolutions. Give me some that are personal ,family, and professionally-oriented.
-
Resignation Letter Assistance
you
write me short joke for web development tutorial starting
Scribbler.Ai
Sure, here's a short joke for a web development tutorial starting:
Why was the web developer always cold?
Because he left his Windows open!
you
Display a Random Quote on Your Webpage with JavaScript
Scribbler.Ai
To display a random quote on your webpage using JavaScript, you can follow these steps:
- HTML Structure: Create an HTML structure for your webpage. You'll need an element, like a `div`, where the random quote will be displayed, and a button to trigger the display of a new quote.
HTML
<!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>
</head>
<body>
<div id="quote-container">
<p id="quote-text"></p>
</div>
<button id="new-quote-button">New Quote</button>
<script src="script.js"></script>
</body>
</html>
- Create an Array of Quotes: Define an array that contains a list of quotes and their authors. Each quote can be an object with two properties: `text` and `author`.
JS
const quotes = [
{
text: "The only way to do great work is to love what you do.",
author: "Steve Jobs"
},
{
text: "Innovation distinguishes between a leader and a follower.",
author: "Steve Jobs"
},
{
text: "Your time is limited, don't waste it living someone else's life.",
author: "Steve Jobs"
},
// Add more quotes here
];
- JavaScript to Display Random Quotes: Write JavaScript code to select a random quote from the array and display it when the button is clicked.
JS
const quoteContainer = document.getElementById("quote-container");
const quoteText = document.getElementById("quote-text");
const newQuoteButton = document.getElementById("new-quote-button");
// Function to generate and display a random quote
function displayRandomQuote() {
const randomIndex = Math.floor(Math.random() * quotes.length);
const randomQuote = quotes[randomIndex];
quoteText.textContent = randomQuote.text - randomQuote.author;
}
// Initial display of a random quote
displayRandomQuote();
// Event listener for the "New Quote" button
newQuoteButton.addEventListener("click", displayRandomQuote);
This code selects a random quote from the `quotes` array when the "New Quote" button is clicked and displays it in the `quote-container` element.
- CSS Styling: You can add CSS to style your webpage as desired.
JS
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
}
#quote-container {
margin: 2rem auto;
padding: 2rem;
max-width: 600px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
#quote-text {
font-size: 1.5rem;
font-style: italic;
margin-bottom: 1rem;
}
#new-quote-button {
padding: 0.5rem 1rem;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
#new-quote-button:hover {
background-color: #0056b3;
}
- Testing: Open your HTML file in a web browser. You should see a random quote displayed initially, and clicking the "New Quote" button should refresh the quote with another random one.
This example demonstrates a simple random quote generator using HTML, CSS, and JavaScript. You can expand and customize it by adding more quotes, additional styling, or even by fetching quotes from an external API for a more dynamic experience.
you
/imagine Surprise me with random cute awesome photo
