Skip to content

Commit d73fb10

Browse files
Jaideep25-techJaideep25-tech
authored
Merge pull request Dezenix#236 from Kumar-Ankit56/Kumar-Ankit56-patch-2
Quote of the day
2 parents afb0c58 + b41b530 commit d73fb10

File tree

4 files changed

+208
-0
lines changed

4 files changed

+208
-0
lines changed

‎Quote of the day/Readme.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
### Description
2+
3+
**Project Description**
4+
### The idea behind this project
5+
This is the project based on the API fetching for a quote where we refresh the page and each time get introduced with the new quote.
6+
7+
### How does it work
8+
While loading the page you will have the container with some social media icons and random quotes with the author name there is a refresh type button if you will click on it will preview a new quote for you.
9+
10+
### Screenshots
11+
12+
![Screenshot (214)](https://user-images.githubusercontent.com/73521123/169340232-3a655450-012b-457f-9984-60d18de0ffba.png)
13+
14+
15+
https://user-images.githubusercontent.com/73521123/169342338-f3dc3605-c628-41c7-978c-aaed2b7ae054.mp4
16+
17+

‎Quote of the day/index.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
3+
<html lang="en" dir="ltr">
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Random Quote Generator in JavaScript| CodingNepal</title>
7+
<link rel="stylesheet" href="./style.css">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
10+
</head>
11+
<body>
12+
<div class="wrapper">
13+
<header>Quote of the Day</header>
14+
<div class="content">
15+
<div class="quote-area">
16+
<i class="fas fa-quote-left"></i>
17+
<p class="quote">Never give up because you never know if the next try is going to be the one that works.</p>
18+
<i class="fas fa-quote-right"></i>
19+
</div>
20+
<div class="author">
21+
<span>__</span>
22+
<span class="name">Mary Kay Ash</span>
23+
</div>
24+
</div>
25+
<div class="buttons">
26+
<div class="features">
27+
<ul>
28+
<li class="speech"><i class="fas fa-volume-up"></i></li>
29+
<li class="copy"><i class="fas fa-copy"></i></li>
30+
<li class="twitter"><i class="fab fa-twitter"></i></li>
31+
</ul>
32+
<button>New Quote</button>
33+
</div>
34+
</div>
35+
</div>
36+
<script src="script.js"></script>
37+
</body>
38+
</html>

‎Quote of the day/script.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
const quoteText = document.querySelector(".quote"),
2+
quoteBtn = document.querySelector("button"),
3+
authorName = document.querySelector(".name"),
4+
speechBtn = document.querySelector(".speech"),
5+
copyBtn = document.querySelector(".copy"),
6+
twitterBtn = document.querySelector(".twitter"),
7+
synth = speechSynthesis;
8+
9+
function randomQuote(){
10+
quoteBtn.classList.add("loading");
11+
quoteBtn.innerText = "Loading Quote...";
12+
fetch("http://api.quotable.io/random").then(response => response.json()).then(result => {
13+
quoteText.innerText = result.content;
14+
authorName.innerText = result.author;
15+
quoteBtn.classList.remove("loading");
16+
quoteBtn.innerText = "New Quote";
17+
});
18+
}
19+
20+
speechBtn.addEventListener("click", ()=>{
21+
if(!quoteBtn.classList.contains("loading")){
22+
let utterance = new SpeechSynthesisUtterance(`${quoteText.innerText} by ${authorName.innerText}`);
23+
synth.speak(utterance);
24+
setInterval(()=>{
25+
!synth.speaking ? speechBtn.classList.remove("active") : speechBtn.classList.add("active");
26+
}, 10);
27+
}
28+
});
29+
30+
copyBtn.addEventListener("click", ()=>{
31+
navigator.clipboard.writeText(quoteText.innerText);
32+
});
33+
34+
twitterBtn.addEventListener("click", ()=>{
35+
let tweetUrl = `https://twitter.com/intent/tweet?url=${quoteText.innerText}`;
36+
window.open(tweetUrl, "_blank");
37+
});
38+
39+
quoteBtn.addEventListener("click", randomQuote);

‎Quote of the day/style.css

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
/* Import Google Font - Poppins */
2+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: 'Poppins', sans-serif;
8+
}
9+
body{
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
min-height: 100vh;
14+
background: #090221;
15+
}
16+
.wrapper{
17+
width: 605px;
18+
background: #fff;
19+
border-radius: 15px;
20+
padding: 30px 30px 25px;
21+
box-shadow: 0 12px 35px rgba(0,0,0,0.1);
22+
}
23+
header, .content :where(i, p, span){
24+
color: #202842;
25+
}
26+
.wrapper header{
27+
font-size: 35px;
28+
font-weight: 600;
29+
text-align: center;
30+
}
31+
.wrapper .content{
32+
margin: 35px 0;
33+
}
34+
.content .quote-area{
35+
display: flex;
36+
justify-content: center;
37+
}
38+
.quote-area i{
39+
font-size: 15px;
40+
}
41+
.quote-area i:first-child{
42+
margin: 3px 10px 0 0;
43+
}
44+
.quote-area i:last-child{
45+
display: flex;
46+
margin: 0 0 3px 10px;
47+
align-items: flex-end;
48+
}
49+
.quote-area .quote{
50+
font-size: 22px;
51+
text-align: center;
52+
word-break: break-all;
53+
}
54+
.content .author{
55+
display: flex;
56+
font-size: 18px;
57+
margin-top: 20px;
58+
font-style: italic;
59+
justify-content: flex-end;
60+
}
61+
.author span:first-child{
62+
margin: -7px 5px 0 0;
63+
font-family: monospace;
64+
}
65+
.wrapper .buttons{
66+
border-top: 1px solid #ccc;
67+
}
68+
.buttons .features{
69+
display: flex;
70+
margin-top: 20px;
71+
align-items: center;
72+
justify-content: space-between;
73+
}
74+
.features ul{
75+
display: flex;
76+
}
77+
.features ul li{
78+
margin: 0 5px;
79+
height: 47px;
80+
width: 47px;
81+
display: flex;
82+
cursor: pointer;
83+
color: #090221;
84+
list-style: none;
85+
border-radius: 50%;
86+
align-items: center;
87+
justify-content: center;
88+
border: 2px solid #090221;
89+
transition: all 0.3s ease;
90+
}
91+
.features ul li:first-child{
92+
margin-left: 0;
93+
}
94+
ul li:is(:hover, .active){
95+
color: #fff;
96+
background: #5372F0;
97+
}
98+
ul .speech.active{
99+
pointer-events: none;
100+
}
101+
.buttons button{
102+
border: none;
103+
color: #fff;
104+
outline: none;
105+
font-size: 16px;
106+
cursor: pointer;
107+
padding: 13px 22px;
108+
border-radius: 30px;
109+
background: #090221;
110+
}
111+
.buttons button.loading{
112+
opacity: 0.7;
113+
pointer-events: none;
114+
}

0 commit comments

Comments
 (0)