Skip to content

Commit 1818598

Browse files
sahandghavidelsahandghavidel
committed
update the photo gallery project
1 parent d543507 commit 1818598

File tree

4 files changed

+92
-113
lines changed

4 files changed

+92
-113
lines changed

‎projects/photo-gallery/index.html

Lines changed: 11 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,44 +4,28 @@
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-
8-
<title>Photos Gallery</title>
9-
<link rel="stylesheet" href="styles.css" />
7+
<title>Photo Gallery</title>
8+
<link rel="stylesheet" href="styles.css">
109
</head>
1110
<body>
1211
<div class="container">
13-
<h1>Photos Gallery</h1>
14-
12+
<h1>Photo Gallery</h1>
1513
<h2>Enter the number of photos</h2>
1614
<input
1715
type="number"
16+
id="input"
1817
class="input"
1918
value="2"
2019
min="1"
2120
max="10"
22-
id="input"
2321
/>
24-
<small class="errorMessage" id="errorMessage">Error message</small>
25-
26-
<button id="btn" class="btn">Get photos</button>
27-
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-
/>
22+
<small class="errorMessage" id="errorMessage">Error Message</small>
23+
<button class="btn" id="btn">Get Photos</button>
24+
<div class="gallery" id="gallery">
25+
<img src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="image">
26+
<img src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="image">
27+
<img src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="image">
28+
<img src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="image">
4529
</div>
4630
</div>
4731
<script src="index.js"></script>

‎projects/photo-gallery/index.js

Lines changed: 23 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,48 @@
1-
const galleryEl = document.getElementById("gallery");
2-
const errorMessageEl = document.getElementById("errorMessage");
31
const btnEl = document.getElementById("btn");
2+
const errorMessageEl = document.getElementById("errorMessage");
3+
const galleryEl = document.getElementById("gallery");
44

5-
async function loadImage() {
5+
async function fetchImage() {
66
const inputValue = document.getElementById("input").value;
7+
78
if (inputValue > 10 || inputValue < 1) {
89
errorMessageEl.style.display = "block";
9-
errorMessageEl.innerHTML = "Number should be between 1 and 10";
10-
10+
errorMessageEl.innerText = "Number should be between 0 and 11";
1111
return;
1212
}
1313

14-
let images = "";
14+
imgs = "";
1515

1616
try {
1717
btnEl.style.display = "none";
18-
loading = `<img
19-
src="spinner.svg"
20-
alt="image"
21-
/>`;
22-
18+
const loading = `<img src="spinner.svg" />`;
2319
galleryEl.innerHTML = loading;
24-
2520
await fetch(
26-
`https://api.unsplash.com/photos?per_page=${inputValue}&query=office&page=${Math.round(
21+
`https://api.unsplash.com/photos?per_page=${inputValue}&page=${Math.round(
2722
Math.random() * 1000
28-
)}&client_id=2zo4prpSQRMCG-gokmZT4sGe9hIAkcbdiTct1dnRzAY`
29-
)
30-
.then((res) => res.json())
31-
.then((data) => {
23+
)}&client_id=B8S3zB8gCPVCvzpAhCRdfXg_aki8PZM_q5pAyzDUvlc`
24+
).then((res) =>
25+
res.json().then((data) => {
3226
if (data) {
33-
errorMessageEl.style.display = "none";
3427
data.forEach((pic) => {
35-
images += `
36-
<img src=${pic.urls.small} alt="cat" />
37-
`;
28+
imgs += `
29+
<img src=${pic.urls.small} alt="image"/>
30+
`;
31+
galleryEl.style.display = "block";
32+
galleryEl.innerHTML = imgs;
33+
btnEl.style.display = "block";
34+
errorMessageEl.style.display = "none";
3835
});
39-
galleryEl.style.display = "block";
40-
galleryEl.innerHTML = images;
4136
}
42-
});
43-
44-
btnEl.style.display = "block";
37+
})
38+
);
4539
} catch (error) {
4640
console.log(error);
4741
errorMessageEl.style.display = "block";
48-
errorMessageEl.innerHTML = "An error happened, please try again later";
42+
errorMessageEl.innerHTML = "An error happened, try again later";
4943
btnEl.style.display = "block";
44+
galleryEl.style.display = "none";
5045
}
5146
}
5247

53-
btnEl.addEventListener("click", loadImage);
48+
btnEl.addEventListener("click", fetchImage);

‎projects/photo-gallery/spinner.svg

Lines changed: 1 addition & 1 deletion
Loading

‎projects/photo-gallery/styles.css

Lines changed: 57 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,75 @@
1-
body {
2-
margin: 0;
3-
padding: 0;
4-
font-family:'Courier New', Courier, monospace;
5-
background: linear-gradient(to bottom, lightgreen, lightblue);
6-
display: flex;
7-
justify-content: center;
8-
align-items: center;
9-
min-height: 100vh;
101

2+
body{
3+
margin: 0;
4+
font-family: 'Courier New', Courier, monospace;
5+
background: linear-gradient(to bottom, lightgreen, lightblue);
6+
display: flex;
7+
min-height: 100vh;
8+
justify-content: center;
9+
align-items: center;
10+
text-align: center;
1111
}
1212

13-
.container {
14-
background: aliceblue;
15-
padding: 20px;
16-
border-radius: 5px;
17-
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
18-
width: 90%;
19-
text-align: center;
20-
display: flex;
21-
flex-direction: column;
22-
align-items: center;
23-
margin: 10px;
24-
13+
.container{
14+
background-color: aliceblue;
15+
padding: 20px;
16+
border-radius: 5px;
17+
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
18+
width: 90%;
19+
margin: 10px;
20+
display: flex;
21+
flex-direction: column;
22+
text-align: center;
23+
justify-content: center;
24+
align-items: center;
2525
}
2626

2727
h2{
28-
font-weight: 400;
28+
font-weight: 400;
29+
}
30+
31+
.input{
32+
padding: 20px 10px;
33+
font-size: 18px;
34+
background-color: white;
35+
border-radius: 5px;
36+
text-align: center;
37+
width: 100px;
2938
}
3039

3140
.errorMessage{
32-
display: none;
33-
color: red;
34-
font-weight: 600;
35-
margin: 10px;
41+
color: red;
42+
font-weight: 600;
43+
margin: 10px;
44+
display: none;
3645
}
3746

38-
.gallery{
39-
display: none;
47+
.btn{
48+
text-transform: uppercase;
49+
width: 250px;
50+
height: 45px;
51+
margin: 20px 0;
52+
font-size: 18px;
53+
border-radius: 5px;
54+
background-color: black;
55+
color: aliceblue;
56+
57+
}
58+
59+
.btn:hover{
60+
color: aliceblue;
61+
background-color: green;
62+
cursor: pointer;
63+
transition: background-color 300ms ease-in-out;
4064
}
41-
42-
.gallery img {
65+
.gallery img{
4366
width: 400px;
4467
height: 250px;
4568
object-fit: cover;
46-
border-radius: 10px;
69+
border-radius: 5px;
4770
margin: 5px;
48-
}
49-
50-
.input{
51-
padding: 20px 10px;
52-
font-size: 18px;
53-
border-radius: 3px;
54-
background-color: white;
55-
text-align: center;
56-
}
57-
.btn {
58-
text-transform: uppercase;
59-
width: 250px;
60-
height: 45px;
61-
margin: 20px 0;
62-
font-size: 18px;
63-
border-radius: 5px;
64-
background-color: black;
65-
color: aliceblue;
66-
cursor: pointer;
67-
transition: all 300ms ease;
68-
}
69-
70-
.btn:hover {
71-
color: white;
72-
background-color: green;
73-
cursor: pointer;
7471
}
7572

73+
.gallery{
74+
display: none;
75+
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy