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 8a5ba99

Browse files
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
Lines changed: 21 additions & 0 deletions
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>
Lines changed: 7 additions & 8 deletions
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
});
Lines changed: 1 addition & 1 deletion
Loading[フレーム]
Lines changed: 56 additions & 0 deletions
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‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

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

Lines changed: 0 additions & 29 deletions
This file was deleted.

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

Lines changed: 0 additions & 57 deletions
This file was deleted.

‎projects/currency-converter/index.html‎

Lines changed: 28 additions & 34 deletions
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‎

Lines changed: 22 additions & 16 deletions
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-
constcurrencySecondEl=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)

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