Random Quote Generator


DEMO



Step by Step Algorithm:

1. Create an HTML document with the necessary html, head, and body tags.

2. Inside the "quote-generator" div, create two p elements with ids of "quote" and "source". These will be used to display the quote and its source, respectively.

3. Below the p elements, create a button element with an id of "get-quote-button". This will be used to trigger the generation of a new quote.

4. At the bottom of the body, include a script element with a src attribute that points to the JavaScript file that will contain the logic for the quote generator.

5. In the JavaScript file, create a function that will be called when the "get-quote-button" is clicked. This function will be responsible for retrieving a quote and its source from some external source, such as an API or a pre-defined array of quotes.

6. nside the function, use DOM manipulation techniques to update the text content of the "quote" and "source" p elements with the retrieved quote and source.

7. Add an event listener to the "get-quote-button" element that calls the function when the button is clicked.

HTML: 


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Ranodm Quote Generator</title>
</head>
<body>
<div id="quote-generator">
<p id="quote"></p>
<p id="source"></p>
<button id="get-quote-button">Get a new quote</button>
</div>
<script src="app.js"></script>    
</body>
</html>

CSS: 


*{
margin: 0%;
padding: 0%;
box-sizing: border-box;
}

#quote-generator {
width: 50%;
margin: 10% auto;
text-align: center;
font-family: sans-serif;
display: flex;
flex-direction: column;
gap:30px;
}

button {
background-color: lightblue;
border: none;
padding: 5px 10px;
cursor: pointer;
}

button:hover {
background-color: skyblue;
}

Step by Step Algorithm:

1. Define an array of quote objects, each containing a quote and a source.

2. Use the document.getElementById() method to get a reference to the "get-quote-button" element, and assign it to a variable.

3. Add an event listener to the "get-quote-button" element that listens for a click event.

4. Inside the event listener function, use the Math.random() function to generate a random number between 0 and the length of the quotes array.

5. Use the random number as an index to select a quote object from the quotes array.

6. Use the document.getElementById() method to get a reference to the "quote" and "source" elements, and assign them to variables.

7. Use the innerHTML property to set the text content of the "quote" and "source" elements to the quote and source of the selected quote object.

Java Script: 


var quotes = [ 
{    quote: "The best and most beautiful things in the world cannot be seen or even touched - they must be felt with the heart.", source: "Helen Keller"  },  
{    quote: "It is during our darkest moments that we must focus to see the light.",    source: "Aristotle"  },  
{    quote: "Hardships often prepare ordinary people for an extraordinary destiny.",    source: "C.S. Lewis"  },  
{    quote: "The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle. As with all matters of the heart, you'll know when you find it.",    source: "Steve Jobs"  }, 
{    quote: "The two most important days in your life are the day you are born and the day you find out why.",    source: "Mark Twain"  }];

document.getElementById('get-quote-button').onclick = function() {
// choose a random quote
var quote = quotes[Math.floor(Math.random() * quotes.length)];

// display the quote
document.getElementById('quote').innerHTML = quote.quote;
document.getElementById('source').innerHTML = "-   "+quote.source;
};

You can improve this project in your own version.

We are ready to release more projects please support us by sharing and visiting webdevmonk