Skip to content

Commit 8a5ba99

Browse files
sahandghavidelsahandghavidel
committed
Update anime pics generator
1 parent 55ae029 commit 8a5ba99

File tree

10 files changed

+160
-186
lines changed

10 files changed

+160
-186
lines changed

‎projects/amine-pics-generator/index.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
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">
7+
<title>Anime Pics Generator</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<h3>Anime Pics Generator</h1>
13+
<button class="btn" id="btn">Get Anime</button>
14+
<div class="anime-container">
15+
<img class="anime-img" src="https://c.files.bbci.co.uk/F382/production/_123883326_852a3a31-69d7-4849-81c7-8087bf630251.jpg">
16+
<h3 class="anime-name">Anime Name</h3>
17+
</div>
18+
</div>
19+
<script src="index.js"></script>
20+
</body>
21+
</html>

‎projects/anime-pics-genrator/index.js renamed to ‎projects/amine-pics-generator/index.js

+7-8
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
11
const btnEl = document.getElementById("btn");
2-
const animeBoxEl = document.querySelector(".anime-container");
2+
const animeContainerEl = document.querySelector(".anime-container");
33
const animeImgEl = document.querySelector(".anime-img");
4-
const animeNameEl = document.querySelector(".anime-name");
4+
const amineNameEl = document.querySelector(".anime-name");
55

66
btnEl.addEventListener("click", async function () {
77
try {
88
btnEl.disabled = true;
99
btnEl.innerText = "Loading...";
10-
animeNameEl.innerText = "Updating...";
10+
amineNameEl.innerText = "Updating...";
1111
animeImgEl.src = "spinner.svg";
1212
const response = await fetch("https://api.catboys.com/img");
1313
const data = await response.json();
14-
animeImgEl.src = data.url;
15-
16-
animeBoxEl.style.display = "block";
17-
animeNameEl.innerText = data.artist;
1814
btnEl.disabled = false;
1915
btnEl.innerText = "Get Anime";
16+
animeContainerEl.style.display = "block";
17+
animeImgEl.src = data.url;
18+
amineNameEl.innerText = data.artist;
2019
} catch (error) {
2120
console.log(error);
2221
btnEl.disabled = false;
2322
btnEl.innerText = "Get Anime";
24-
animeNameEl.innerText = "An error happened, try again";
23+
amineNameEl.innerText = "An error happened, please try again";
2524
}
2625
});

‎projects/anime-pics-genrator/spinner.svg renamed to ‎projects/amine-pics-generator/spinner.svg

+1-1
Loading

‎projects/amine-pics-generator/style.css

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
body{
2+
margin: 0;
3+
background: linear-gradient(to right, lightblue, yellow);
4+
display: flex;
5+
height: 100vh;
6+
justify-content: center;
7+
align-items: center;
8+
font-family: 'Courier New', Courier, monospace;
9+
}
10+
11+
.container{
12+
background: aliceblue;
13+
border-radius: 10px;
14+
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
15+
text-align: center;
16+
padding: 10px;
17+
width: 450px;
18+
margin: 5px;
19+
}
20+
21+
.btn{
22+
background-color: green;
23+
color: aliceblue;
24+
padding: 10px 30px;
25+
font-size: 16px;
26+
margin-bottom: 30px;
27+
border-radius: 6px;
28+
cursor: pointer;
29+
30+
}
31+
32+
.btn:disabled{
33+
background-color: gray;
34+
cursor: not-allowed;
35+
}
36+
37+
.anime-img{
38+
height: 300px;
39+
width: 300px;
40+
border-radius: 50%;
41+
border: 3px solid green;
42+
}
43+
44+
.anime-name{
45+
margin: 20px;
46+
background-color: green;
47+
color: aliceblue;
48+
padding: 10px;
49+
border-radius: 6px;
50+
font-size: 17px;
51+
font-weight: 600;
52+
}
53+
54+
.anime-container{
55+
display: none;
56+
}

‎projects/anime-pics-genrator/.vscode/settings.json

-3
This file was deleted.

‎projects/anime-pics-genrator/index.html

-29
This file was deleted.

‎projects/anime-pics-genrator/style.css

-57
This file was deleted.

‎projects/currency-converter/index.html

+28-34
Original file line numberDiff line numberDiff line change
@@ -5,43 +5,37 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Currency Converter</title>
8-
<link rel="stylesheet" href="style.css" />
8+
<link rel="stylesheet" href="style.css">
99
</head>
1010
<body>
11-
<div class="main-box">
12-
<h1>Currency Converter</h1>
13-
14-
<div class="currency">
15-
<select id="currency-first">
16-
<option value="AUD">AUD</option>
17-
<option value="CAD">CAD</option>
18-
<option value="EUR">EUR</option>
19-
<option value="GBP">GBP</option>
20-
<option value="INR">INR</option>
21-
<option value="JPY">JPY</option>
22-
<option value="USD" selected>USD</option>
23-
</select>
24-
<input type="number" id="worth-first" value="1" min="0" />
25-
</div>
26-
27-
28-
29-
<div class="currency">
30-
<select id="currency-second">
31-
<option value="AUD">AUD</option>
32-
<option value="CAD">CAD</option>
33-
<option value="EUR">EUR</option>
34-
<option value="GBP">GBP</option>
35-
<option value="INR" selected>INR</option>
36-
<option value="JPY">JPY</option>
37-
<option value="USD">USD</option>
38-
</select>
39-
<input type="number" id="worth-second" disabled />
11+
<div class="container">
12+
<h1>Currency Converter</h1>
13+
<div class="currency-container">
14+
<select id="currency-first">
15+
<option value="AUD">AUD</option>
16+
<option value="CAD">CAD</option>
17+
<option value="EUR">EUR</option>
18+
<option value="GBP">GBP</option>
19+
<option value="INR">INR</option>
20+
<option value="JPY">JPY</option>
21+
<option value="USD" selected>USD</option>
22+
</select>
23+
<input type="number" id="worth-first" value="1" min="0">
24+
</div>
25+
<div class="currency-container">
26+
<select id="currency-second">
27+
<option value="AUD">AUD</option>
28+
<option value="CAD">CAD</option>
29+
<option value="EUR">EUR</option>
30+
<option value="GBP">GBP</option>
31+
<option value="INR" selected>INR</option>
32+
<option value="JPY">JPY</option>
33+
<option value="USD">USD</option>
34+
</select>
35+
<input type="number" id="worth-second" disabled>
36+
</div>
37+
<p class="exchange-rate" id="exchange-rate">1 USD = 138.5802 JPY</p>
4038
</div>
41-
42-
<p class="exchange-rate" id="exchange-rate"></p>
43-
</div>
44-
</div>
4539
<script src="index.js"></script>
4640
</body>
4741
</html>

‎projects/currency-converter/index.js

+22-16
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,33 @@
1-
const exchangeRateEl = document.getElementById("exchange-rate");
21
const currencyFirstEl = document.getElementById("currency-first");
3-
const currencySecondEl = document.getElementById("currency-second");
2+
43
const worthFirstEl = document.getElementById("worth-first");
4+
5+
const currencySecondEl = document.getElementById("currency-second");
6+
57
const worthSecondEl = document.getElementById("worth-second");
68

7-
function convert() {
8-
const currencyFirstValue = currencyFirstEl.value;
9-
const currencySecondValue = currencySecondEl.value;
10-
//using API for conversion of currency units
9+
const exchangeRateEl = document.getElementById("exchange-rate");
10+
11+
updateRate()
12+
13+
function updateRate() {
1114
fetch(
12-
`https://v6.exchangerate-api.com/v6/5f9d1c87f7250159c9c9b17d/latest/${currencyFirstValue}`
15+
`https://v6.exchangerate-api.com/v6/5f9d1c87f7250159c9c9b17d/latest/${currencyFirstEl.value}`
1316
)
1417
.then((res) => res.json())
1518
.then((data) => {
16-
const rate = data.conversion_rates[currencySecondValue];
17-
exchangeRateEl.innerText = `1 ${currencyFirstValue} = ${rate} ${currencySecondValue}`;
19+
const rate = data.conversion_rates[currencySecondEl.value];
20+
console.log(rate);
21+
exchangeRateEl.innerText = `1 ${currencyFirstEl.value} = ${
22+
rate + " " + currencySecondEl.value
23+
}`;
1824

19-
worthSecondEl.value = (worthFirstEl.value * rate).toFixed(2);
25+
worthSecondEl.value = (worthFirstEl.value * rate).toFixed(2)
2026
});
2127
}
22-
//some javascript event listeners
23-
currencyFirstEl.addEventListener("change", convert);
24-
worthFirstEl.addEventListener("input", convert);
25-
currencySecondEl.addEventListener("change", convert);
26-
worthSecondEl.addEventListener("input", convert);
27-
convert();
28+
29+
currencyFirstEl.addEventListener("change", updateRate);
30+
31+
currencySecondEl.addEventListener("change", updateRate);
32+
33+
worthFirstEl.addEventListener("input", updateRate);

0 commit comments

Comments
 (0)