Skip to content

Commit 809611e

Browse files
0xsarwagya0xsarwagya
authored
Merge pull request #9 from gbasset/Simpsons-Quotes
Simpsons quotes
2 parents c40f69f + 4c61a2c commit 809611e

File tree

6 files changed

+265
-18
lines changed

6 files changed

+265
-18
lines changed

‎Simpsons-Quotes/README.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Random Simpsons Quotes
2+
3+
4+
**A fun project that displays random quotes from The Simpsons using HTML, CSS, and JavaScript.**
5+
This project allows users to fetch random quotes from the popular animated show "The Simpsons."
6+
![Alt text](capture.png )
7+
### Features
8+
- **Random Quote Generation**: Users can click a button to fetch a new quote from The Simpsons.
9+
- **Dynamic Content**: The quote and associated character image are displayed instantly upon fetching.
10+
- **Loader Animation**: A visual loading animation is displayed while the quote is being fetched.
11+
- **Error Handling**: Displays an error message for network issues or when the API call fails.
12+
13+
## Description
14+
This project provides a simple interface for users to interact with an API that returns quotes from "The Simpsons." Users can click a button to retrieve a random quote, which is then displayed along with an image of the character who said it.
15+
16+
The project utilizes HTML for structure, CSS for styling and animation, and JavaScript to handle the logic of fetching quotes from the API and updating the UI dynamically.
17+
18+
## Prerequisites
19+
Before running this project, you should have a basic understanding of the following technologies:
20+
- **HTML**: Used for structuring the user interface of the quote generator.
21+
- **CSS**: Used to style the interface and provide a visually appealing layout.
22+
- **JavaScript**: Handles the logic for fetching quotes from the API and updating the display based on user interactions.
23+
24+
## How to Use
25+
1. Open the `index.html` file in your web browser.
26+
2. Click the button labeled "Get a New Quote" to fetch a random quote.
27+
3. The quote and the associated character's image will be displayed on the screen.
28+
4. If there is an error while fetching the quote, an error message will be shown.
29+
30+
## Installation
31+
To run this project locally:
32+
1. Clone the repository or download the files.
33+
2. Open `index.html` in any web browser.
34+
35+
## Installing Instructions
36+
Explain how to set up and run your package/script on the user's local machine. Include steps like:
37+
1. Clone the repository:
38+
```bash
39+
git clone https://github.com/king04aman/All-In-One-Javascript-Projects.git
40+
```
41+
2. Navigate to the project directory:
42+
```bash
43+
cd All-In-One-Javascript-Projects/Temperature-convertor
44+
```
45+
3. Open `index.html` in a web browser.
46+
47+
## Author
48+
- [Basset Gaëtan](https://github.com/gbasset)

‎Simpsons-Quotes/homer.jpg

34 KB
Loading

‎Simpsons-Quotes/index.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<script src="main.js"></script>
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<link rel="stylesheet" href="style.css">
9+
<title>Simpsons Quotes</title>
10+
</head>
11+
<body>
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>
25+
</html>

‎Simpsons-Quotes/main.js

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

‎Simpsons-Quotes/style.css

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
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+
min-height: 350px;
35+
}
36+
#quoteText{
37+
font-size: larger;
38+
}
39+
.quote_section{
40+
border: #0a0a0a 1px groove;
41+
border-radius: 5px;
42+
padding: 5px 10px 5px 10px;
43+
width: 100%;
44+
background-color: rgba(213, 210, 210, 0.53);
45+
}
46+
img {
47+
opacity: 0;
48+
max-height: 400px;
49+
width: auto;
50+
}
51+
52+
img.visible {
53+
opacity: 1;
54+
}
55+
56+
.btn_class {
57+
background-color: #ff001a;
58+
border: 0 solid #E5E7EB;
59+
box-sizing: border-box;
60+
color: #000000;
61+
display: flex;
62+
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";
63+
font-size: 1rem;
64+
font-weight: 700;
65+
justify-content: center;
66+
line-height: 1.75rem;
67+
padding: .75rem 1.65rem;
68+
position: relative;
69+
text-align: center;
70+
text-decoration: none #000000 solid;
71+
text-decoration-thickness: auto;
72+
width: 100%;
73+
max-width: 460px;
74+
position: relative;
75+
cursor: pointer;
76+
transform: rotate(-2deg);
77+
user-select: none;
78+
-webkit-user-select: none;
79+
touch-action: manipulation;
80+
margin-bottom: 10px;
81+
}
82+
83+
.btn_class:focus {
84+
outline: 0;
85+
}
86+
87+
.btn_class:after {
88+
content: '';
89+
position: absolute;
90+
border: 1px solid #000000;
91+
bottom: 4px;
92+
left: 4px;
93+
width: calc(100% - 1px);
94+
height: calc(100% - 1px);
95+
}
96+
97+
.btn_class:hover:after {
98+
bottom: 2px;
99+
left: 2px;
100+
}
101+
102+
@media (min-width: 768px) {
103+
.btn_class {
104+
padding: .75rem 3rem;
105+
font-size: 1.25rem;
106+
}
107+
}
108+
109+
.loader {
110+
border: 8px solid #f3f3f3;
111+
border-top: 8px solid #ff001a;
112+
border-radius: 50%;
113+
width: 60px;
114+
height: 60px;
115+
animation: spin 1s linear infinite;
116+
/*position: absolute;*/
117+
top: 50%;
118+
margin: 60px auto 10px auto;
119+
transform: translate(-50%, -50%);
120+
display: none;
121+
}
122+
123+
@keyframes spin {
124+
0% { transform: rotate(0deg); }
125+
100% { transform: rotate(360deg); }
126+
}

‎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)