Skip to content

Commit 47a76ff

Browse files
sahandghavidelsahandghavidel
committedDec 11, 2022
update the photo api project
1 parent 8a5ba99 commit 47a76ff

File tree

18 files changed

+123
-2218
lines changed

18 files changed

+123
-2218
lines changed
 

‎projects/cat-api/45_Chatting_app/client/index.html

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

‎projects/cat-api/45_Chatting_app/client/index.js

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

‎projects/cat-api/45_Chatting_app/client/message.mp3

-24.2 KB
Binary file not shown.

‎projects/cat-api/45_Chatting_app/client/package-lock.json

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

‎projects/cat-api/45_Chatting_app/client/package.json

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

‎projects/cat-api/45_Chatting_app/client/styles.css

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

‎projects/cat-api/45_Chatting_app/server/Procfile

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎projects/cat-api/45_Chatting_app/server/package-lock.json

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

‎projects/cat-api/45_Chatting_app/server/package.json

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

‎projects/cat-api/45_Chatting_app/server/server.js

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

‎projects/cat-api/46_image_slider/app.js

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

‎projects/cat-api/46_image_slider/index.html

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

‎projects/cat-api/46_image_slider/style.css

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

‎projects/cat-api/app.js

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

‎projects/cat-api/index.html

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,45 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77

8-
<title>Getting Started with APIs</title>
8+
<title>Get Random Photos</title>
99
<link rel="stylesheet" href="styles.css" />
1010
</head>
1111
<body>
1212
<div class="container">
13-
<h1>Getting Started with APIs</h1>
13+
<h1>Get Random Photos</h1>
1414

15-
<h2>Enter the number of kitties</h2>
16-
<input type="text" class="inp-box" id="inp-box" />
17-
<small id="errorBox"></small>
15+
<h2>Enter the number of photos</h2>
16+
<input
17+
type="number"
18+
class="input"
19+
value="2"
20+
min="1"
21+
max="10"
22+
id="input"
23+
/>
24+
<small class="errorMessage" id="errorMessage">Error message</small>
1825

19-
<button id="btn_generate" class="btn">Display</button>
26+
<button id="btn" class="btn">Get photos</button>
2027

21-
<div id="gallery" class="gallery"></div>
28+
<div id="gallery" class="gallery">
29+
<img
30+
src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
31+
alt="image"
32+
/>
33+
<img
34+
src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
35+
alt="image"
36+
/>
37+
<img
38+
src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
39+
alt="image"
40+
/>
41+
<img
42+
src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
43+
alt="image"
44+
/>
45+
</div>
2246
</div>
23-
<script src="app.js"></script>
47+
<script src="index.js"></script>
2448
</body>
2549
</html>

‎projects/cat-api/index.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
const galleryEl = document.getElementById("gallery");
2+
const errorMessageEl = document.getElementById("errorMessage");
3+
const btnEl = document.getElementById("btn");
4+
5+
async function loadImage() {
6+
const inputValue = document.getElementById("input").value;
7+
if (inputValue > 10 || inputValue < 1) {
8+
errorMessageEl.style.display = "block";
9+
errorMessageEl.innerHTML = "Number should be between 1 and 10";
10+
11+
return;
12+
}
13+
14+
let images = "";
15+
16+
try {
17+
btnEl.style.display = "none";
18+
loading = `<img
19+
src="spinner.svg"
20+
alt="image"
21+
/>`;
22+
23+
galleryEl.innerHTML = loading;
24+
25+
await fetch(
26+
`https://api.unsplash.com/photos?per_page=${inputValue}&query=office&page=${Math.round(
27+
Math.random() * 1000
28+
)}&client_id=2zo4prpSQRMCG-gokmZT4sGe9hIAkcbdiTct1dnRzAY`
29+
)
30+
.then((res) => res.json())
31+
.then((data) => {
32+
if (data) {
33+
errorMessageEl.style.display = "none";
34+
data.forEach((pic) => {
35+
images += `
36+
<img src=${pic.urls.small} alt="cat" />
37+
`;
38+
});
39+
galleryEl.style.display = "block";
40+
galleryEl.innerHTML = images;
41+
}
42+
});
43+
44+
btnEl.style.display = "block";
45+
} catch (error) {
46+
console.log(error);
47+
errorMessageEl.style.display = "block";
48+
errorMessageEl.innerHTML = "An error happened, please try again later";
49+
btnEl.style.display = "block";
50+
}
51+
}
52+
53+
btnEl.addEventListener("click", loadImage);

‎projects/cat-api/spinner.svg

Lines changed: 6 additions & 0 deletions
Loading

‎projects/cat-api/styles.css

Lines changed: 32 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,75 @@
1-
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
2-
3-
:root {
4-
--error-color: #dc3545;
5-
--success-color: #28a745;
6-
--warning-color: #ffc107;
7-
}
8-
9-
* {
1+
body {
102
margin: 0;
113
padding: 0;
12-
box-sizing: border-box;
13-
}
14-
15-
body {
16-
font-family: 'Open Sans', sans-serif;
17-
font-size: 16px;
18-
background-color: #19172e;
4+
font-family:'Courier New', Courier, monospace;
5+
background: linear-gradient(to bottom, lightgreen, lightblue);
196
display: flex;
20-
flex-direction: column;
217
justify-content: center;
228
align-items: center;
239
min-height: 100vh;
10+
2411
}
2512

2613
.container {
27-
background-color: rgba(255, 255, 255, 0.05);
28-
padding: 1em;
14+
background: aliceblue;
15+
padding: 20px;
2916
border-radius: 5px;
30-
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
17+
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
3118
width: 90%;
3219
text-align: center;
3320
display: flex;
34-
3521
flex-direction: column;
3622
align-items: center;
37-
flex-wrap: wrap;
23+
margin: 10px;
3824

3925
}
4026

41-
h1 {
42-
color: #fff;
43-
margin-bottom: 20px;
27+
h2{
28+
font-weight: 400;
4429
}
45-
#errorBox{
46-
color: crimson;
30+
31+
.errorMessage{
32+
display: none;
33+
color: red;
34+
font-weight: 600;
35+
margin: 10px;
36+
}
37+
38+
.gallery{
39+
display: none;
4740
}
4841

4942
.gallery img {
50-
width: 18vw;
51-
height: 18vh;
43+
width: 400px;
44+
height: 250px;
5245
object-fit: cover;
46+
border-radius: 10px;
47+
margin: 5px;
5348
}
5449

55-
.inp-box{
56-
text-transform: uppercase;
57-
width: 250px;
58-
height: 45px;
59-
outline: none;
60-
border: none;
61-
margin: 20px 0;
62-
padding: 10px;
50+
.input{
51+
padding: 20px 10px;
6352
font-size: 18px;
6453
border-radius: 3px;
6554
background-color: white;
66-
transition: all 300ms ease;
55+
text-align: center;
6756
}
6857
.btn {
6958
text-transform: uppercase;
7059
width: 250px;
7160
height: 45px;
72-
outline: none;
73-
border: none;
7461
margin: 20px 0;
7562
font-size: 18px;
76-
border-radius: 3px;
77-
background-color: white;
63+
border-radius: 5px;
64+
background-color: black;
65+
color: aliceblue;
7866
cursor: pointer;
7967
transition: all 300ms ease;
8068
}
8169

8270
.btn:hover {
83-
color: #fff;
84-
background-color: #5c1ed5;
71+
color: white;
72+
background-color: green;
8573
cursor: pointer;
8674
}
8775

88-
.btn:focus {
89-
outline: none;
90-
}
91-
92-
footer {
93-
color: pink;
94-
font-size: 1rem;
95-
padding: 22px;
96-
line-height: 3vh;
97-
margin-top: 30px;
98-
}
99-
100-
footer a {
101-
color: inherit;
102-
}
103-
104-
footer a:visited {
105-
color: inherit;
106-
}

0 commit comments

Comments
 (0)
Please sign in to comment.