Skip to content

Commit a3ffebe

Browse files
gbassetgbasset
committed
feat(simpsons-quotes) : add css + js logic
1 parent 757255b commit a3ffebe

5 files changed

Lines changed: 195 additions & 26 deletions

File tree

‎Simpsons-Quotes/homer.jpg‎

34 KB
Loading

‎Simpsons-Quotes/index.html‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
<script src="main.js"></script>
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,12 +9,17 @@
89
<title>Simpsons Quotes</title>
910
</head>
1011
<body>
11-
<h1>Random Simpsons Quotes</h1>
12-
<button id="fetchQuote" onclick="getQuote()">Get a New Quote</button>
13-
<div class="quote-box" id="quoteBox">
14-
<p class="quote" id="quoteText">Click the button to get a quote!</p>
15-
<p class="character" id="characterName"></p>
16-
</div>
17-
</body>
18-
<script src="main.js"></script>
12+
<section class="container">
13+
<h1>Random Simpsons Quotes</h1>
14+
<div id="loader" class="loader"></div>
15+
<button id="fetchQuote" class="btn_class" onclick="getQuote()">Get a New Quote</button>
16+
<div class="quote-box" id="quoteBox">
17+
<img src="data:," class="image" aria-label="character" />
18+
<div class="quote_section">
19+
<p class="quote" id="quoteText">Click the button to get a quote!</p>
20+
<p class="character" id="characterName"></p>
21+
</div>
22+
</div>
23+
</section>
24+
</body>
1925
</html>

‎Simpsons-Quotes/main.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
2+
3+
const loader = document.getElementById("loader");
4+
function getQuote() {
5+
const quoteText = document.getElementById('quoteText');
6+
const characterName = document.getElementById('characterName');
7+
const imageUrl = document.querySelector(".image");
8+
fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
9+
.then(response => response.json())
10+
.then(data => {
11+
console.log("=>(main.js:20) data", data);
12+
const quote = data[0].quote;
13+
const character = data[0].character;
14+
imageUrl.src = data[0].image;
15+
imageUrl.classList.add('visible');
16+
quoteText.innerText = `"${quote}"`;
17+
characterName.innerText = `- ${character}`;
18+
})
19+
.catch(error => {
20+
console.error('Error fetching the quote:', error);
21+
document.getElementById('quoteText').innerText = 'Failed to fetch quote. Please try again.';
22+
});
23+
}

‎Simpsons-Quotes/style.css‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
body {
2+
/* solid background */
3+
background: rgb(0, 212, 255);
4+
/* gradient background*/
5+
background: linear-gradient(45deg, rgba(0, 212, 255, 1) 0%, rgba(11, 3, 45, 1) 100%);
6+
7+
/* photo background */
8+
background-image: url(homer.jpg);
9+
background-size: cover;
10+
background-position: center;
11+
color: white;
12+
display: flex;
13+
align-items: center;
14+
margin: auto 15%;
15+
height: 100vh;
16+
}
17+
h1{
18+
font-size: 35px;
19+
}
20+
.container {
21+
backdrop-filter: blur(16px) saturate(180%);
22+
-webkit-backdrop-filter: blur(16px) saturate(180%);
23+
background-color: rgba(17, 25, 40, 0.25);
24+
border-radius: 12px;
25+
border: 1px solid rgba(255, 255, 255, 0.125);
26+
padding: 38px;
27+
filter: drop-shadow(0 30px 10px rgba(0, 0, 0, 0.125));
28+
display: flex;
29+
flex-direction: column;
30+
align-items: center;
31+
justify-content: center;
32+
text-align: center;
33+
width: 500px;
34+
}
35+
#quoteText{
36+
font-size: larger;
37+
}
38+
.quote_section{
39+
border: #0a0a0a 1px groove;
40+
border-radius: 5px;
41+
padding: 5px 10px 5px 10px;
42+
width: 100%;
43+
background-color: rgba(213, 210, 210, 0.53);
44+
}
45+
img {
46+
opacity: 0;
47+
max-height: 400px;
48+
width: auto;
49+
}
50+
51+
img.visible {
52+
opacity: 1;
53+
}
54+
55+
.btn_class {
56+
background-color: #ff001a;
57+
border: 0 solid #E5E7EB;
58+
box-sizing: border-box;
59+
color: #000000;
60+
display: flex;
61+
font-family: ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
62+
font-size: 1rem;
63+
font-weight: 700;
64+
justify-content: center;
65+
line-height: 1.75rem;
66+
padding: .75rem 1.65rem;
67+
position: relative;
68+
text-align: center;
69+
text-decoration: none #000000 solid;
70+
text-decoration-thickness: auto;
71+
width: 100%;
72+
max-width: 460px;
73+
position: relative;
74+
cursor: pointer;
75+
transform: rotate(-2deg);
76+
user-select: none;
77+
-webkit-user-select: none;
78+
touch-action: manipulation;
79+
}
80+
81+
.btn_class:focus {
82+
outline: 0;
83+
}
84+
85+
.btn_class:after {
86+
content: '';
87+
position: absolute;
88+
border: 1px solid #000000;
89+
bottom: 4px;
90+
left: 4px;
91+
width: calc(100% - 1px);
92+
height: calc(100% - 1px);
93+
}
94+
95+
.btn_class:hover:after {
96+
bottom: 2px;
97+
left: 2px;
98+
}
99+
100+
@media (min-width: 768px) {
101+
.btn_class {
102+
padding: .75rem 3rem;
103+
font-size: 1.25rem;
104+
}
105+
}
106+
107+
.loader {
108+
border: 8px solid #f3f3f3;
109+
border-top: 8px solid #3498db;
110+
border-radius: 50%;
111+
width: 60px;
112+
height: 60px;
113+
animation: spin 1s linear infinite;
114+
position: absolute;
115+
top: 50%;
116+
left: 50%;
117+
transform: translate(-50%, -50%);
118+
display: none;
119+
}
120+
121+
@keyframes spin {
122+
0% { transform: rotate(0deg); }
123+
100% { transform: rotate(360deg); }
124+
}

‎Temperature-convertor/style.css‎

Lines changed: 34 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ body {
77
justify-content: center;
88
height: 100vh;
99
}
10-
input{
10+
11+
input {
1112
border: 0;
1213
outline: 0;
1314
color: rgb(60, 66, 87);
@@ -20,20 +21,23 @@ input{
2021
padding: 4px 8px;
2122
min-height: 28px;
2223
vertical-align: middle;
23-
transition: background-color .24s,box-shadow .24s;
24+
transition: background-color .24s, box-shadow .24s;
2425
transition-property: background-color, box-shadow;
2526
transition-duration: 0.24s, 0.24s;
2627
transition-timing-function: ease, ease;
2728
transition-delay: 0s, 0s;
2829
}
29-
:focus{
30+
31+
:focus {
3032
box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(58 151 212 / 36%) 0px 0px 0px 4px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(60 66 87 / 16%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px;
3133
}
32-
h1,h2{
34+
35+
h1, h2 {
3336
color: #86b0ff;
3437
text-align: center;
3538
}
36-
button{
39+
40+
button {
3741
display: inline-block;
3842
outline: none;
3943
cursor: pointer;
@@ -46,24 +50,31 @@ button{
4650
transition: box-shadow 0.2s ease 0s, -ms-transform 0.1s ease 0s, -webkit-transform 0.1s ease 0s, transform 0.1s ease 0s;
4751
background: #fff;
4852
color: #222222;
49-
}:hover {
53+
}
54+
55+
:hover {
5056
border-color: #000000;
5157
background: #f7f7f7;
5258
}
59+
5360
.btn-section {
5461
display: flex;
5562
justify-content: space-around;
5663
}
57-
.btn-section button{
64+
65+
.btn-section button {
5866
width: 150px;
5967
color: #f7f7f7;
6068
background-color: #86b0ff;
6169
text-align: center;
6270

63-
}:hover {
71+
}
72+
73+
:hover {
6474
border-color: #000000;
6575
}
66-
#form{
76+
77+
#form {
6778
max-width: 500px;
6879
min-width: 450px;
6980
min-height: 200px;
@@ -75,23 +86,27 @@ button{
7586
border: 1px solid rgba(255, 255, 255, .25);
7687
border-radius: 20px;
7788
background-color: rgba(255, 255, 255, 0.45);
78-
box-shadow: 0px 4px 6px 0px rgba(50,50,93,0.11) , 0px 1px 3px 0px rgba(0,0,0,0.08);
89+
box-shadow: 0px 4px 6px 0px rgba(50, 50, 93, 0.11), 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
7990
}
80-
.input-section{
91+
92+
.input-section {
8193
display: flex;
8294
flex-direction: column;
8395
margin: 10px 3px;
8496
}
85-
.input-section label{
86-
font-weight: bold;
87-
margin-bottom: 5px;
97+
98+
.input-section label {
99+
font-weight: bold;
100+
margin-bottom: 5px;
88101
}
89-
#btn-submit{
102+
103+
#btn-submit {
90104
width: 120px;
91105
text-align: center;
92106
margin: 10px auto;
93107
}
94-
.response{
108+
109+
.response {
95110
color: red;
96111
font-size: x-large;
97112
font-weight: 900;
@@ -100,9 +115,10 @@ button{
100115
display: block;
101116
text-align: center;
102117
height: 50px;
103-
line-height: 50px;
118+
line-height: 50px;
104119
}
120+
105121
button.selected {
106122
color: #3300ff;
107-
border-color: #3300ff;
123+
border-color: #3300ff;
108124
}

0 commit comments

Comments
 (0)