Skip to content

Commit 4502cce

Browse files
sahandghavidelsahandghavidel
committed
update random quote generator
1 parent 1818598 commit 4502cce

File tree

6 files changed

+123
-179
lines changed

6 files changed

+123
-179
lines changed

‎projects/english-dictionary/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
</div>
4848
</ul>
4949
</div>
50-
<script src="script.js"></script>
50+
<script src="index.js"></script>
5151

5252
</body>
5353
</html>

‎projects/english-dictionary/script.js renamed to ‎projects/english-dictionary/index.js

File renamed without changes.

‎projects/movie-quote-generator/index.html

+33-36
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,37 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7-
<title>Random Movie/TV Series Quote Generator</title>
8-
<link rel="stylesheet" href="style.css">
9-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
10-
<link rel="preconnect" href="https://fonts.googleapis.com">
11-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12-
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet">
13-
</head>
14-
<body>
15-
<p class="heading">Movie Quote Generator<p>
16-
</br>
17-
<!-- Quote Container -->
18-
<div class="container">
19-
<!-- Quote to be Displayed Here -->
20-
<h1>
21-
<i class="fa fa-quote-left" style="color: #19172e"></i>
22-
<span id="quote"></span>
23-
<i class="fa fa-quote-right" style="color: #19172e"></i>
24-
</h1>
25-
<!-- Author to be Displayed Here -->
26-
<p id="author"></p>
27-
<!-- TV Show / Movie Name to be Displayed Here -->
28-
<p id="source"></p>
29-
<hr/>
30-
<div class="buttons">
31-
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Random Quote Generator</title>
8+
<link rel="stylesheet" href="style.css" />
9+
<link
10+
rel="stylesheet"
11+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
12+
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
13+
crossorigin="anonymous"
14+
referrerpolicy="no-referrer"
15+
/>
16+
</head>
17+
<body>
18+
<!-- Quote Container -->
19+
<div class="container">
20+
<!-- Quote to be Displayed Here -->
21+
<h1 class="heading">Random Quote Generator</h1>
3222

33-
<!--Add an onclick event on 'next quote' button. Upon the click of a button, a new random quote is generated-->
34-
<button class="next" onclick="getNextQuote()">Next quote</button>
35-
</div>
36-
</div>
37-
38-
<script src="script.js"></script>
39-
</body>
23+
<h2 class="quote">
24+
<i class="fa fa-quote-left" ></i>
25+
<span id="quote" >Quote</span>
26+
<i class="fa fa-quote-right"></i>
27+
</h1>
28+
29+
<p id="author" class="author">~ Author</p>
30+
31+
<button class="btn" id="btn">Get a quote</button>
32+
</div>
33+
</div>
34+
35+
<script src="index.js"></script>
36+
</body>
4037
</html>

‎projects/movie-quote-generator/index.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
btnEl = document.getElementById("btn");
2+
quoteEl = document.getElementById("quote");
3+
authorEl = document.getElementById("author");
4+
5+
async function getNextQuote() {
6+
try {
7+
btnEl.innerText = "Loading...";
8+
btnEl.disabled = true;
9+
quoteEl.innerText = "Updating...";
10+
authorEl.innerText = "~ " + "Updating...";
11+
let url = "https://api.quotable.io/random";
12+
const response = await fetch(url);
13+
const data = await response.json();
14+
const quoteContent = data.content;
15+
const quoteAuthor = data.author;
16+
quoteEl.innerText = quoteContent;
17+
authorEl.innerText = "~ " + quoteAuthor;
18+
btnEl.innerText = "Get quote";
19+
btnEl.disabled = false;
20+
} catch (error) {
21+
console.log(error);
22+
// test the error by setting up the network to offline
23+
quoteEl.innerText = "An error happened, try again later";
24+
authorEl.innerText = "~ " + "An error happened";
25+
btnEl.disabled = false;
26+
btnEl.innerText = "Get quote";
27+
}
28+
}
29+
30+
btnEl.addEventListener("click", getNextQuote);
31+
32+
getNextQuote();

‎projects/movie-quote-generator/script.js

-17
This file was deleted.

‎projects/movie-quote-generator/style.css

+57-125
Original file line numberDiff line numberDiff line change
@@ -1,129 +1,61 @@
1-
*{
2-
margin: 0;
3-
padding: 0;
4-
box-sizing: border-box;
5-
}
6-
7-
body {
8-
display: flex;
9-
justify-content: center;
10-
align-items: center;
11-
min-height: 100vh;
12-
background-color: #19172e;
13-
font-family: "Garamond", serif;
14-
transition-timing-function: ease-in;
15-
transition: 0.7s;
16-
}
17-
18-
#quote {
19-
text-align: center;
20-
font-size: 40px;
21-
font-weight: bold;
22-
color: white;
23-
}
24-
25-
#author {
26-
margin: 10px;
27-
text-align: right;
28-
font-size: 25px;
29-
font-style: italic;
30-
font-family: "Garamond", serif;
31-
color: #19172e;
32-
}
33-
34-
#source {
35-
margin: 10px;
36-
text-align: right;
37-
font-size: 25px;
38-
font-weight: 700;
39-
font-family: "Garamond", serif;
40-
color: #19172e
1+
body {
2+
margin: 0;
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
min-height: 100vh;
7+
background: linear-gradient(to left bottom, lightgreen, lightblue);
8+
color: black;
9+
font-family: "Courier New", Courier, monospace;
4110
}
4211

4312
.container {
44-
display: flex;
45-
flex-direction: column;
46-
align-items: center;
47-
padding: 30px;
48-
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
49-
border-radius: 15px;
50-
width: 600px;
51-
background-color: rgba(255, 255, 255, 0.3);
52-
margin: 10px;
53-
}
54-
55-
56-
.buttons {
57-
width: 100%;
58-
display: flex;
59-
justify-content: space-between;
60-
align-items: center;
61-
margin-top: 9px;
62-
63-
}
64-
65-
#tweet {
66-
border: solid rgb(102, 179, 255);
67-
border-radius: 4px;
68-
background-color: rgb(102, 179, 255);
69-
color: white;
70-
text-align: center;
71-
font-size: 1.8em;
72-
width: 60px;
73-
height: 35px;
74-
line-height: 40px;
75-
13+
display: flex;
14+
flex-direction: column;
15+
align-items: center;
16+
padding: 30px;
17+
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
18+
border-radius: 15px;
19+
width: 90%;
20+
background-color: rgba(255, 255, 255, 0.1);
21+
margin: 10px;
22+
text-align: center;
23+
}
24+
25+
.heading {
26+
font-size: 35px;
27+
text-align: center;
28+
font-weight: 700;
29+
}
30+
31+
.quote {
32+
font-size: 30px;
33+
font-weight: bold;
34+
}
35+
36+
.author {
37+
margin: 10px;
38+
text-align: right;
39+
font-size: 25px;
40+
font-style: italic;
41+
}
42+
43+
.btn {
44+
font-size: 18px;
45+
border-radius: 5px;
46+
cursor: pointer;
47+
padding: 10px;
48+
margin-top: 15px;
49+
background-color: rgba(255, 255, 255, 0.3);
50+
border-color: rgba(255, 255, 255, 0.6);
51+
width: 300px;
52+
color: black;
53+
text-transform: uppercase;
54+
}
55+
56+
.btn:hover {
57+
background-color: rgba(255, 255, 255, 0.6);
58+
color: green;
59+
transition: all 300ms ease-in-out;
60+
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
7661
}
77-
78-
#whatsapp {
79-
border: solid #25D366;
80-
border-radius: 4px;
81-
background-color: #25D366;
82-
color: white;
83-
text-align: center;
84-
font-size: 1.8em;
85-
width: 60px;
86-
height: 35px;
87-
line-height: 40px;
88-
89-
}
90-
91-
footer {
92-
93-
text-align: center;
94-
color: white;
95-
font-size: 1rem;
96-
position: absolute;
97-
bottom: 0px;
98-
padding: 5px;
99-
line-height: 3vh;
100-
font-family: "Roboto", sans-serif;
101-
}
102-
103-
.heading{
104-
font-family: "Roboto", sans-serif;
105-
color: white;
106-
font-size: 50px;
107-
position: absolute;
108-
top: 0;
109-
left: 0;
110-
right: 0;
111-
text-align: center;
112-
padding: 100px;
113-
line-height: 3vh;
114-
}
115-
116-
.container:hover {
117-
box-shadow: 0 10px 10px rgb(0, 0, 0);
118-
}
119-
120-
.next {
121-
font-size: 18px;
122-
border-radius: 5px;
123-
cursor: pointer;
124-
padding: 10px;
125-
margin-top: 5px;
126-
font-weight: bold;
127-
color: white;
128-
background-image: linear-gradient(to right bottom, rgb(230, 100, 0), #ffedbca8);
129-
}

0 commit comments

Comments
 (0)