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

+11-27
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

+23-28
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

+1-1
Loading

‎projects/photo-gallery/styles.css

+57-57
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)