Skip to content

Commit 818c98a

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1760 from krutika-ladani/main
Add new project - MotivationMantra
2 parents 6fe9346 + d67d7e9 commit 818c98a

4 files changed

Lines changed: 193 additions & 0 deletions

File tree

‎Projects/Motivation Mantra/README.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# MotavationMantra
2+
Welcome to the MotivationMantra! This is a random quote generator website that displays a quote along with the author-name everytime you click the 'New Quote' button. It additionally provides Copy and Speech features. With a simple click, you can copy any generated quote to your clipboard for easy sharing. Its Speech feauture converts text into spoken words so that you can listen it with ease. These features provide flexibility and enhance your experience on the website.
3+
4+
## Technologies Used
5+
This project is built using:-
6+
- HTML5 (structuring)
7+
- CSS3 (styling)
8+
- JavaScript (client side scripting)
9+
- Quotable (API)
10+
- Git/GitHub (version control)
11+
- Netlify (hosting)
12+
13+
## Sample Output
14+
![Screenshot (69)](https://github.com/krutika-ladani/Front-End-Projects/assets/119760273/52c07c75-6d5c-420c-ad5b-f9d132f717ca)

‎Projects/Motivation Mantra/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>MotivationMantra</title>
8+
<link rel="stylesheet" href="styling.css">
9+
<script src="script.js"></script>
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
11+
12+
</head>
13+
14+
<body onload="loadQuote()">
15+
<div id="main">
16+
<span id="listen" class="material-symbols-outlined" onclick="listen()">
17+
volume_up
18+
</span>
19+
<div id="quote-space">
20+
<div class="quote">
21+
<p id="quoteLine">
22+
</p>
23+
<p id="author">
24+
</p>
25+
</div>
26+
</div>
27+
<button id="next" onclick="loadQuote()"> next quote </button>
28+
<button id="copy" onclick="copyQuote()"> copy </button>
29+
</div>
30+
</body>
31+
</html>

‎Projects/Motivation Mantra/script.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// Code for loading a new quote everytime the button is clicked
2+
function loadQuote(){
3+
document.getElementById("copy").innerText = "Copy" ;
4+
document.getElementById("next").innerText = " loading..." ;
5+
var para = document.getElementById("quoteLine");
6+
var auth = document.getElementById("author");
7+
fetch("https://api.quotable.io/random")
8+
.then(res => res.json())
9+
.then(result =>{
10+
para.innerHTML = '"'+result.content+'"';
11+
auth.innerHTML = '- '+result.author;
12+
document.getElementById("next").innerText = " Next Quote " ;
13+
});
14+
}
15+
16+
17+
// Code to copy the quote
18+
function copyQuote(){
19+
copyText = document.getElementById("quoteLine").innerText + " " + document.getElementById("author").innerText;
20+
navigator.clipboard.writeText(copyText);
21+
document.getElementById("copy").innerText = "Copied" ;
22+
}
23+
24+
25+
// Code to enable speech feature
26+
function listen(){
27+
let utterance = new SpeechSynthesisUtterance(document.getElementById("quoteLine").innerText);
28+
speechSynthesis.speak(utterance);
29+
}
30+

‎Projects/Motivation Mantra/styling.css‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
.material-symbols-outlined
2+
{
3+
font-variation-settings:
4+
'FILL' 1,
5+
'wght' 700,
6+
'GRAD' 200,
7+
'opsz' 900 ;
8+
position: absolute;
9+
top: 4px;
10+
right: 7px;
11+
color: rgb(56, 3, 99);
12+
}
13+
body
14+
{
15+
height: 100vh;
16+
width: 100vw;
17+
margin: 0px;
18+
padding: 0px;
19+
background-image: linear-gradient(to right , rgb(21, 3, 49) , rgb(106, 89, 204));
20+
display: flex;
21+
justify-content: center;
22+
flex-direction: column;
23+
align-items: center;
24+
}
25+
#main
26+
{
27+
background-color: rgb(102, 116, 192);
28+
border-radius: 20px;
29+
width: 99vw;
30+
max-width: 550px;
31+
height: 350px;
32+
box-shadow: rgb(21, 10, 61) 15px 15px 60px;
33+
border-top: 3px solid rgb(255, 255, 255);
34+
border-left: 3px solid rgb(255, 255, 255);
35+
position: relative;
36+
overflow: hidden;
37+
}
38+
#listen
39+
{
40+
font-size: 40px;
41+
}
42+
#listen:hover
43+
{
44+
font-size: 45px;
45+
color: aliceblue;
46+
cursor: pointer;
47+
}
48+
#quote-space
49+
{
50+
width: 100%;
51+
height: 87%;
52+
display: flex;
53+
flex-wrap: wrap;
54+
align-items: center;
55+
justify-content: space-around;
56+
}
57+
.quote
58+
{
59+
color: rgb(253, 250, 250);
60+
width: 90%;
61+
font-size: 21px;
62+
word-wrap: break-word;
63+
text-align: center;
64+
z-index: 1;
65+
}
66+
#author
67+
{
68+
font-style: italic;
69+
color: rgb(200, 210, 250);
70+
font-size: 19px;
71+
line-height: 10px;
72+
}
73+
#next
74+
{
75+
position: absolute;
76+
bottom: 0px;
77+
left: 0px;
78+
width: 49.8%;
79+
height:45px;
80+
background-color: rgb(163, 175, 243);
81+
box-shadow: rgb(83, 94, 163) 0 0 40px;
82+
border: none;
83+
text-align: center;
84+
font-size: 17px;
85+
color: rgb(56, 3, 99);
86+
z-index: 2;
87+
}
88+
#copy
89+
{
90+
position: absolute;
91+
bottom: 0px;
92+
right: 0px;
93+
width: 49.8%;
94+
height:45px;
95+
background-color: rgb(163, 175, 243);
96+
box-shadow: rgb(83, 94, 163) 0 0 40px;
97+
border: none;
98+
text-align: center;
99+
font-size: 17px;
100+
color: rgb(56, 3, 99);
101+
}
102+
#next:hover , #copy:hover
103+
{
104+
background-color: rgb(208, 219, 247);
105+
cursor: pointer;
106+
z-index: 5;
107+
}
108+
@media (max-width: 400px)
109+
{
110+
.quote
111+
{
112+
font-size: 18px;
113+
}
114+
#author
115+
{
116+
font-size: 16px;
117+
}
118+
}

0 commit comments

Comments
 (0)