Skip to content

Commit 57a3629

Browse files
Rizwan-SRizwan-S
authored
Merge pull request #1917 from Kulshre142/quote
Added Random Quote Generator
2 parents 4aafa2e + 195ef41 commit 57a3629

5 files changed

Lines changed: 121 additions & 0 deletions

File tree

‎assets/Images/Random_Quote_Generator.PNG‎

28.6 KB
Loading

‎assets/css/Random_Quote_Generator/style.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.max-height {
2+
min-height: 100vh;
3+
}
4+
body {
5+
background: #b09e99;
6+
}
7+
.quote-container {
8+
background: rgba(255, 255, 255, 0.5);
9+
}
10+
#generate-btn {
11+
color: white !important;
12+
background: #64b6ac !important;
13+
border-color: #64b6ac !important;
14+
cursor: pointer;
15+
font-size: 1.5rem;
16+
padding: 0.5rem 1rem;
17+
}
18+
#generate-btn:hover {
19+
background: #b09e99 !important;
20+
border-color: #b09e99 !important;
21+
color: #333333 !important;
22+
}
23+
.author {
24+
color: #64b6ac;
25+
}

‎assets/js/Random_Quote_Generator/script.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
//immediate invoked function expression
2+
(function() {
3+
const quotes = [
4+
{
5+
quote:
6+
"Life is too short and sweet to be spent by cribbing and complaining about things. Here are some random quotes about the most wonderful gift that we've got",
7+
author: " Life"
8+
},
9+
{
10+
quote:
11+
"Humor is richly rewarding to the person who employs it. It has some value in gaining and holding attention. But it has no persuasive value at all",
12+
author: "John Kenneth Galbraith"
13+
},
14+
{
15+
quote:
16+
"God save me from my friends. I can protect myself from my enemies.",
17+
author: "Claude Louis Hector de Villars "
18+
},
19+
{
20+
quote: "The price of anything is the amount of life you exchange for it.",
21+
author: "David Thoreau"
22+
},
23+
{
24+
quote:
25+
"Life is like a landscape. You live in the midst of it but can describe it only from the vantage point of distance. ",
26+
author: "Charles Lindbergh"
27+
},
28+
{
29+
quote:
30+
"A critic is someone who never actually goes to the battle, yet who afterwards comes out shooting the wounded.",
31+
author: " Tyne Daly"
32+
}
33+
];
34+
35+
const btn = document.querySelector("button");
36+
const text = document.querySelector("#quote");
37+
const author = document.querySelector(".author");
38+
btn.addEventListener("click", function() {
39+
let index = Math.floor(Math.random() * quotes.length);
40+
text.textContent = quotes[index].quote;
41+
author.textContent = quotes[index].author;
42+
43+
})
44+
})();

‎public/Random_Quote_Generator.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Randon Quote Generator</title>
9+
<!-- bootstrap css -->
10+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
11+
<!-- main css -->
12+
<link rel="stylesheet" href="../assets/css/Random_Quote_Generator/style.css">
13+
<!-- google fonts -->
14+
<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
15+
<!-- font awesome -->
16+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
17+
18+
</head>
19+
20+
<body>
21+
22+
<div class="conainer">
23+
<div class="row max-height align-items-center">
24+
<div class="col-11 mx-auto col-md-6 quote-container p-5">
25+
<button class="btn-outline-primary text-capitalize my-4 d-block mx-auto" id="generate-btn">generate quote</button>
26+
27+
<h3 class="text-muted"></span><span id="quote">Lorem
28+
ipsum dolor sit amet consectetur, adipisicing elit. Tenetur sint iste optio placeat dolor labore, reprehenderit
29+
ipsum aspernatur blanditiis maiores.
30+
</span></h3>
31+
<h5 class="text-right text-capitalize author">-<span class="quote-author ml-3">author</span></h5>
32+
</div>
33+
34+
</div>
35+
</div>
36+
37+
<!-- jquery -->
38+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
39+
<!-- bootstrap js -->
40+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
41+
<!-- script js -->
42+
<script src="../assets/js/Random_Quote_Generator/script.js"></script>
43+
44+
</body>
45+
46+
</html>

‎script.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
let projectData = [
2+
3+
{
4+
projectName: "Random Quote Generator",
5+
projectImage: "assets/Images/Random_Quote_Generator.png",
6+
projectUrl: "public/Random_Quote_Generator.html",
7+
},
28
{
39
projectName: "Drawing App",
410
projectImage: "assets/Images/Drawing%20App.PNG",

0 commit comments

Comments
 (0)