Random Quote Generator with HTML, Bootstrap, And Javascript | Project Series Day - 11 | Frontend everything
Hello Everyone 👋Welcome to My New Blog. Today I have made a To-Do List with the help of HTML, CSS, and Javascript | It is Project Series Day 11. 😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Let's start making this simple quote generator step by step.
Video Preview of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then CSS and javascript, and also I have shared codepen ink to make it easier for you.
In this, we have used bootstrap instead of CSS so first import bootstrap CDN
(connect this URL and put it in <link> tag and put link tag in HTML)
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.jsHTML 🎈( step - 1)
<section>
<div class="container">
<div class="row">
<h1>Random Quote Generator</h1> <br>
<div class="well">
<blockquote>
<p id="quote"></p>
<footer id="attrib"></footer>
</blockquote>
<button id="generateButton" class="btn btn-lg">New Quote</button>
</div>
</div>
</section>
In HTML, we have to make a container in which we have also made a button that has a NEW quote value. And it is automatically designed as we have made this under bootstrap. so let us move to javascript.
Javascript 🎈( step - 2)
In JS, we have used jquery so in this we will link a jquery URL.
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.j
Now let's write code.
// quotes are stored in an array of objects
var quotes = [{
}, {
"attrib": "Steve Jobs",
"quote": "Innovation distinguishes between a leader and a follower."
}, {
"attrib": "Steve Jobs",
"quote": "Design is not just what it looks like and feels like. Design is how it works."
}, {
"attrib": "Albert Einstein",
"quote": "If you can't explain it simply, you don't understand it well enough."
}, {
"attrib": "Albert Einstein",
"quote": "Strive not to be a success, but rather to be of value."
}, {
"attrib": "Steve Jobs",
"quote": "Your time is limited, so don’t waste it living someone else’s life."
}, {
"attrib": "Bill Gates",
"quote": "Success is a lousy teacher. It seduces smart people into thinking they can't lose."
}, {
"attrib": "Albert Einstein",
"quote": "Science without religion is lame, religion without science is blind."
}, {
"attrib": "Henry Ford",
"quote": "Whether you think you can or you think you can’t, you’re right."
}];
// function to load and display a new quote
function newQuote() {
var quoteID = Math.floor(Math.random() * (quotes.length));
$("#quote").html(quotes[quoteID].quote);
$("#attrib").html(quotes[quoteID].attrib);
$("#twitterButton").attr("href", "https://twitter.com/intent/tweet?text=" + quotes[quoteID].quote + " -" + quotes[quoteID].attrib);
}
// wait for page load before displaying content
$(document).ready(function() {
// load an initial quote
newQuote();
// retrieve a new quote when the button is clicked
$("#generateButton").on("click", function() {
newQuote();
});
});All the coding part is done, now let us see the final output, and also below I have mentioned the codepen link.
Final Output
The codepen link is here for making your work easier!
.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.