So Welcome To Another JavaScript Project Post, In This Post We Will Be Creating a Random Quote Generator Using HTML, CSS & JavaScript. And If your are JavaScript Beginner Then This is For You. This will Help you to Practise & Understand How a JS App Works And What is the Real Backend Work Going On.
Random Quotes Generator (TEST HERE)
What is a Random Quote Generator Will Work?
A Random Quote Generator Works Like When a User Clicks On the Get Quote Button It Gives User Some Quotes As Many Times the User clicks On The Get Quote Button New Quote Appears. In this Project There is No API (Application Programming Interface) Used. I Have Just Created a Variable Called Quotes And Put Some Quotes Extracted From GOOGLE.
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>
Quote Genrator - JavaScript
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" href="favicon.png">
<div class="container">
<div id="content">
<p id="quote">"Quote Genrator" <br/>- By: <a href="http://mrprogrammer.in/" target="_blank" style="color: #fff;">www.mrprogrammer.in</a></p>
</div>
</div>
<div id="b-nav">
<ul>
<button id="btn" onclick="getQuote()">New Quote</button>
<a href="Quote Genrator - Mr Programmer.rar" download id="btn" style="text-decoration: none; padding: 10px; border-radius: 5px; font-family: sans-serif;">Dowload SOURCE CODE</a>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>
CSS CODE:
Copy And Customize the Following CSS Code:
html, body {
overflow-x: hidden;
overflow-y: hidden;
height: 100%;
width: 100%;
position: absolute;
background-color: black;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: top;
z-index: -2;
}
#content {
height: 45em;
} p {
max-width: 30em;
color: #fff;
background-color: #111;
font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
letter-spacing:0.1em;
text-align:center;
margin: 40px auto;
text-transform: lowercase;
line-height: 145%;
font-size: 2em;
font-variant: small-caps;
}
p :hover {
text-decoration: none;
}
.container {
padding-top: 6em;
text-align: center;
}
#b-nav {
padding-bottom: 5em;
position: fixed;
width: 100%;
bottom: 2em;
}
#b-nav ul {
margin: 0;
padding: 0.5em;
list-style-type: none;
text-align: center;
}
#b-nav ul li {
display: inline;
}
#b-nav ul li a {
text-decoration: none;
padding: .2em 1em;
background-color: black;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
.hold {
width: 100%;
text-align: left;
}
#btn{
background-color: #111;
color: #fff;
border-radius: 5px;
padding: 10px;
cursor: pointer;
}
@media screen
and (max-device-width: 800px)
and (max-device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {
p {
font-size: 1em;
}
}
.fa-twitter {
font-size: 30px !important;
margin-left: 20px;
}
JS CODE:
JavaScript Code of the Application:
function getQuote() {
var randNum = Math.floor(Math.random() * 8) + 1;
document.getElementById('quote').innerHTML = quotes[randNum];
}
// quotes
var quotes = ["Blank", "\If you want to achieve greatness stop asking for permission.\"", "\"Things work out best for those who make the best of how things work out\"", "\"To live a creative life, we must lose our fear of being wrong.\"", "\"If you are not willing to risk the usual you will have to settle for the ordinary.\"", "\"Trust because you are willing to accept the risk, not because it's safe or certain.\"", "\"If you do what you always did, you will get what you always got.\"", "\"Success is walking from failure to failure with no loss of enthusiasm.\"", "\"Just when the caterpillar thought the world was ending, he turned into a butterfly.\"",];
Also Read: Create Notes App Using Pure JavaScript
After Applying all the Files And Deploying your Project, This is How Your Project Looks Like:
Thanks For Reading This Blog
- The JS Developer’s Podcast [EP: 1] Introduction to JavaScript - September 27, 2024
- Which is the Best Operating System for Programming? Here are 3 OS to Consider - August 24, 2024
- Top 10 Cybersecurity Threats to Watch Out for in 2024 - August 17, 2024
Pingback: Glassmorphism Login Form Using HTML & CSS - Mr Programmer
Pingback: To-Do List HTML,CSS & JavaScript - Mr Programmer
Pingback: Create Facebook Post Clone Using HTML, CSS & JavaScript - Mr Programmer
Pingback: 10 Web Development Projects With Source Codes! - Mr Programmer