Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 7c5b973

Browse files
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
Lines changed: 17 additions & 29 deletions
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>
Lines changed: 14 additions & 13 deletions
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+
constbtnEl = document.getElementById("btn");
2+
constquoteEl = document.getElementById("quote");
3+
constauthorEl = 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);
Lines changed: 12 additions & 19 deletions
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:04px4pxrgba(0,0,0,0.3);
49+
.btn:hover{
50+
background-color: rgba(255,255,255,.6);
51+
box-shadow:04px4pxrgba(0,0,0,.3);
52+
transition: all 300ms ease-in-out;
53+
color: green;
6154
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /