Skip to content

Commit 7c5b973

Browse files
sahandghavidelsahandghavidel
committed
update random quote generator project
1 parent 63e176d commit 7c5b973

File tree

3 files changed

+43
-61
lines changed

3 files changed

+43
-61
lines changed

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

+17-29
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,25 @@
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" />
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">
77
<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 -->
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
<body>
1912
<div class="container">
20-
<!-- Quote to be Displayed Here -->
21-
<h1 class="heading">Random Quote Generator</h1>
22-
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>
13+
<h1 class="heading">Random Quote Generator</h1>
14+
<h2 class="quote">
15+
<i class="fa-solid fa-quote-left"></i>
16+
<span id="quote">Quote</span>
17+
<i class="fa-solid fa-quote-right"></i>
3018

19+
</h2>
20+
<p class="author" id="author">~ Author</p>
3121
<button class="btn" id="btn">Get a quote</button>
32-
</div>
3322
</div>
34-
3523
<script src="index.js"></script>
36-
</body>
37-
</html>
24+
</body>
25+
</html>

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

+14-13
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,33 @@
1-
btnEl = document.getElementById("btn");
2-
quoteEl = document.getElementById("quote");
3-
authorEl = document.getElementById("author");
1+
const btnEl = document.getElementById("btn");
2+
const quoteEl = document.getElementById("quote");
3+
const authorEl = document.getElementById("author");
44

5-
async function getNextQuote() {
5+
const apiURL = "https://api.quotable.io/random";
6+
7+
async function getQuote() {
68
try {
79
btnEl.innerText = "Loading...";
810
btnEl.disabled = true;
911
quoteEl.innerText = "Updating...";
10-
authorEl.innerText = "~ " + "Updating...";
11-
let url = "https://api.quotable.io/random";
12-
const response = await fetch(url);
12+
authorEl.innerText = "Updating...";
13+
const response = await fetch(apiURL);
1314
const data = await response.json();
1415
const quoteContent = data.content;
1516
const quoteAuthor = data.author;
1617
quoteEl.innerText = quoteContent;
1718
authorEl.innerText = "~ " + quoteAuthor;
18-
btnEl.innerText = "Get quote";
19+
btnEl.innerText = "Get a quote";
1920
btnEl.disabled = false;
21+
console.log(data);
2022
} catch (error) {
2123
console.log(error);
22-
// test the error by setting up the network to offline
2324
quoteEl.innerText = "An error happened, try again later";
24-
authorEl.innerText = "~ " + "An error happened";
25+
authorEl.innerText = "An error happened";
26+
btnEl.innerText = "Get a quote";
2527
btnEl.disabled = false;
26-
btnEl.innerText = "Get quote";
2728
}
2829
}
2930

30-
btnEl.addEventListener("click", getNextQuote);
31+
getQuote()
3132

32-
getNextQuote();
33+
btnEl.addEventListener("click", getQuote);

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

+12-19
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,36 @@
11
body {
22
margin: 0;
33
display: flex;
4+
min-height: 100vh;
45
justify-content: center;
56
align-items: center;
6-
min-height: 100vh;
7-
background: linear-gradient(to left bottom, lightgreen, lightblue);
8-
color: black;
97
font-family: "Courier New", Courier, monospace;
8+
background: linear-gradient(to left bottom, lightgreen, lightblue);
109
}
1110

1211
.container {
13-
display: flex;
14-
flex-direction: column;
15-
align-items: center;
16-
padding: 30px;
12+
background-color: rgba(255, 255, 255, 0.1);
1713
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
14+
padding: 30px;
1815
border-radius: 15px;
1916
width: 90%;
20-
background-color: rgba(255, 255, 255, 0.1);
2117
margin: 10px;
2218
text-align: center;
2319
}
2420

2521
.heading {
2622
font-size: 35px;
27-
text-align: center;
2823
font-weight: 700;
2924
}
3025

3126
.quote {
3227
font-size: 30px;
33-
font-weight: bold;
28+
font-weight: 600;
3429
}
3530

3631
.author {
37-
margin: 10px;
38-
text-align: right;
3932
font-size: 25px;
33+
margin: 10px;
4034
font-style: italic;
4135
}
4236

@@ -48,14 +42,13 @@ body {
4842
margin-top: 15px;
4943
background-color: rgba(255, 255, 255, 0.3);
5044
border-color: rgba(255, 255, 255, 0.6);
51-
width: 300px;
52-
color: black;
5345
text-transform: uppercase;
46+
width: 300px;
5447
}
5548

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);
49+
.btn:hover{
50+
background-color: rgba(255,255,255,.6);
51+
box-shadow: 0 4px 4px rgba(0,0,0,.3);
52+
transition: all 300ms ease-in-out;
53+
color: green;
6154
}

0 commit comments

Comments
 (0)