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 55ae029

Browse files
update anime pics generator project
1 parent 8f870b7 commit 55ae029

File tree

6 files changed

+74
-90
lines changed

6 files changed

+74
-90
lines changed
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

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

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,32 +4,26 @@
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Random Anime profile</title>
7+
<title>Anime Pics Generator</title>
88
<link rel="stylesheet" href="style.css" />
9-
<script src="script.js" defer></script>
109
</head>
1110
<body>
1211
<!-- main container -->
13-
<div class="main-container">
12+
<div class="container">
1413
<!-- the anime container -->
14+
<h3>Anime Pics Generator</h3>
15+
16+
<button id="btn" class="get-anime">Get Anime</button>
17+
<!-- the anime box -->
1518
<div class="anime-container">
16-
<h3>Anime Pics Genrator</h3>
17-
<h2>genrates Random Animes profile pics</h2>
18-
<button id="btn" class="get-anime">Get Anime</button>
19-
<!-- the anime box -->
20-
<div class="anime-box">
21-
<div class="hero-img">
22-
<img
23-
src="https://w.wallhaven.cc/full/lq/wallhaven-lqxr3y.jpg"
24-
class="anime"
25-
alt="hero-img"
26-
/>
27-
</div>
28-
<div class="hero-name">
29-
<h3></h3>
30-
</div>
31-
</div>
19+
<!-- <img
20+
src="example-for-styling.jpg"
21+
class="anime-img"
22+
/> -->
23+
<img src="spinner.svg" class="anime-img" />
24+
<h3 class="anime-name">Anime Name</h3>
3225
</div>
3326
</div>
27+
<script src="index.js"></script>
3428
</body>
3529
</html>
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const btnEl = document.getElementById("btn");
2+
const animeBoxEl = document.querySelector(".anime-container");
3+
const animeImgEl = document.querySelector(".anime-img");
4+
const animeNameEl = document.querySelector(".anime-name");
5+
6+
btnEl.addEventListener("click", async function () {
7+
try {
8+
btnEl.disabled = true;
9+
btnEl.innerText = "Loading...";
10+
animeNameEl.innerText = "Updating...";
11+
animeImgEl.src = "spinner.svg";
12+
const response = await fetch("https://api.catboys.com/img");
13+
const data = await response.json();
14+
animeImgEl.src = data.url;
15+
16+
animeBoxEl.style.display = "block";
17+
animeNameEl.innerText = data.artist;
18+
btnEl.disabled = false;
19+
btnEl.innerText = "Get Anime";
20+
} catch (error) {
21+
console.log(error);
22+
btnEl.disabled = false;
23+
btnEl.innerText = "Get Anime";
24+
animeNameEl.innerText = "An error happened, try again";
25+
}
26+
});

‎projects/anime-pics-genrator/script.js‎

Lines changed: 0 additions & 14 deletions
This file was deleted.
Lines changed: 6 additions & 0 deletions
Loading[フレーム]
Lines changed: 26 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,57 @@
1-
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");
2-
3-
* {
4-
box-sizing: border-box;
5-
}
61

72
body {
8-
font-family: "Poppins", sans-serif;
9-
font-weight: normal;
10-
background: linear-gradient(to right, #00afff, #00ff6c);
3+
margin: 0;
4+
background: linear-gradient(to right, lightblue, yellow);
115
display: flex;
12-
flex-direction: column;
6+
height:100vh;
137
justify-content: center;
148
align-items: center;
15-
height: 100vh;
16-
overflow: hidden;
17-
margin: 0;
9+
font-family:'Courier New', Courier, monospace;
1810
}
1911

20-
.main-container {
21-
background-color: rgba(255,255,255,0.863);
12+
.container {
13+
background-color: aliceblue;
2214
border-radius: 10px;
23-
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1),06px6pxrgba(0,0,0,0.1);
15+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
2416
text-align: center;
2517
padding: 10px;
26-
max-width: 100%;
27-
width: 800px;
28-
}
29-
30-
.anime-container h3 {
31-
font-size: 20px;
32-
font-weight: 600;
33-
text-transform: capitalize;
34-
padding-bottom: 10px;
35-
letter-spacing: 0.9px;
36-
}
37-
38-
.anime-container h2 {
39-
line-height: 30px;
40-
word-spacing: 1px;
41-
margin-bottom: 30px;
42-
position: relative;
18+
width: 450px;
19+
margin: 5px;
4320
}
4421

4522
.get-anime {
4623
margin-bottom: 30px;
47-
background-color: rgba(0,0,0,0.774);
48-
color: #fff;
24+
background-color: green;
25+
color: aliceblue;
4926
padding: 10px 30px;
50-
border: none;
5127
border-radius: 6px;
52-
outline: none;
5328
font-size: 16px;
54-
font-weight: 200;
5529
cursor: pointer;
56-
letter-spacing: 1px;
5730
}
5831

59-
.anime-box {
32+
.get-anime:disabled{
33+
background-color: gray;
34+
cursor: not-allowed;
35+
}
36+
37+
.anime-container {
38+
/* display: none; */
6039
display: none;
6140
}
6241

63-
.anime-box img {
42+
.anime-container img {
6443
height: 300px;
6544
width: 300px;
6645
border-radius: 50%;
67-
border: 10px solid #005da3;
68-
align-items: center;
46+
border: 3px solid green;
6947
}
7048

71-
.hero-name {
72-
margin-bottom: 30px;
73-
background-color: rgba(0, 0, 0, 0.774);
74-
color: #fff;
75-
padding: 10px 30px;
76-
border: none;
49+
.anime-name{
50+
margin: 20px;
51+
background-color: green;
52+
color: aliceblue;
53+
padding: 10px;
7754
border-radius: 6px;
78-
outline: none;
7955
font-size: 17px;
80-
font-weight: bold;
81-
}
82-
83-
@media screen and (max-width: 500px) {
84-
.main-container {
85-
width: 450px;
86-
flex-wrap: wrap;
87-
}
56+
font-weight: 600;
8857
}

0 commit comments

Comments
(0)

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