Skip to content

Commit 55ae029

Browse files
sahandghavidelsahandghavidel
committed
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

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

+3
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

+13-19
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>

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

+26
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

-14
This file was deleted.

‎projects/anime-pics-genrator/spinner.svg

+6
Loading

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

+26-57
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), 0 6px 6px rgba(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)