Skip to content

Commit d464c78

Browse files
sahandghavidelsahandghavidel
committed
update image search app project
1 parent 99e37f2 commit d464c78

File tree

3 files changed

+163
-125
lines changed

3 files changed

+163
-125
lines changed

‎projects/image-search-app/index.html

+40-11
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,56 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<title>Unsplash Image Search App</title>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Image Search App</title>
68
<link rel="stylesheet" href="style.css" />
79
</head>
810
<body>
911
<h1>Image Search App</h1>
10-
<form id="search-form">
12+
<form>
1113
<input type="text" id="search-input" placeholder="Search for images..." />
12-
<button type="submit" id="search-button">Search</button>
14+
<button id="search-button">Search</button>
1315
</form>
14-
<div id="search-results">
16+
<div class="search-results">
1517
<!-- <div class="search-result">
1618
<img
17-
src="https://images.unsplash.com/photo-1503696967350-ad1874122058?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=Mnw0MTc4MDN8MHwxfHNlYXJjaHwxfHxuaWNlfGVufDB8fHx8MTY3NzgxOTYwMg&amp;ixlib=rb-4.0.3&amp;q=80&amp;w=400"
18-
alt="beach near road at daytime"
19-
/><a href="https://unsplash.com/photos/mpVZVCClgac" target="_blank"
20-
>beach near road at daytime</a
19+
src="https://plus.unsplash.com/premium_photo-1664361480561-3bdcd6eb3b6f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bmF0dXJlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=1000&q=60"
20+
alt="image"
21+
/>
22+
<a
23+
href="https://unsplash.com/photos/g-7X6T7vAI4"
24+
target="_blank"
25+
rel="noopener noreferrer"
26+
>an image of a beach</a
27+
>
28+
</div>
29+
<div class="search-result">
30+
<img
31+
src="https://plus.unsplash.com/premium_photo-1664361480561-3bdcd6eb3b6f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bmF0dXJlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=1000&q=60"
32+
alt="image"
33+
/>
34+
<a
35+
href="https://unsplash.com/photos/g-7X6T7vAI4"
36+
target="_blank"
37+
rel="noopener noreferrer"
38+
>an image of a beach</a
39+
>
40+
</div>
41+
<div class="search-result">
42+
<img
43+
src="https://plus.unsplash.com/premium_photo-1664361480561-3bdcd6eb3b6f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bmF0dXJlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=1000&q=60"
44+
alt="image"
45+
/>
46+
<a
47+
href="https://unsplash.com/photos/g-7X6T7vAI4"
48+
target="_blank"
49+
rel="noopener noreferrer"
50+
>an image of a beach</a
2151
>
2252
</div> -->
2353
</div>
24-
<button id="show-more-button">Show More</button>
25-
26-
<script src="app.js"></script>
54+
<button id="show-more-button">Show more</button>
55+
<script src="index.js"></script>
2756
</body>
2857
</html>

‎projects/image-search-app/index.js

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
const accessKey = "RZEIOVfPhS7vMLkFdd2TSKGFBS4o9_FmcV1Nje3FSjw";
2+
3+
const formEl = document.querySelector("form");
4+
const searchInputEl = document.getElementById("search-input");
5+
const searchResultsEl = document.querySelector(".search-results");
6+
const showMoreButtonEl = document.getElementById("show-more-button");
7+
8+
let inputData = "";
9+
let page = 1;
10+
11+
async function searchImages() {
12+
inputData = searchInputEl.value;
13+
const url = `https://api.unsplash.com/search/photos?page=${page}&query=${inputData}&client_id=${accessKey}`;
14+
15+
const response = await fetch(url);
16+
const data = await response.json();
17+
if (page === 1) {
18+
searchResultsEl.innerHTML = "";
19+
}
20+
21+
const results = data.results;
22+
23+
results.map((result) => {
24+
const imageWrapper = document.createElement("div");
25+
imageWrapper.classList.add("search-result");
26+
const image = document.createElement("img");
27+
image.src = result.urls.small;
28+
image.alt = result.alt_description;
29+
const imageLink = document.createElement("a");
30+
imageLink.href = result.links.html;
31+
imageLink.target = "_blank";
32+
imageLink.textContent = result.alt_description;
33+
34+
imageWrapper.appendChild(image);
35+
imageWrapper.appendChild(imageLink);
36+
searchResultsEl.appendChild(imageWrapper);
37+
});
38+
39+
page++;
40+
41+
if (page > 1) {
42+
showMoreButtonEl.style.display = "block";
43+
}
44+
}
45+
46+
formEl.addEventListener("submit", (event) => {
47+
event.preventDefault();
48+
page = 1;
49+
searchImages();
50+
});
51+
52+
showMoreButtonEl.addEventListener("click", () => {
53+
searchImages();
54+
});

‎projects/image-search-app/style.css

+69-114
Original file line numberDiff line numberDiff line change
@@ -1,170 +1,125 @@
11
body {
2-
background-color: #f9f9f9; /* Sets the background color of the body element to a light gray */
3-
font-family: Arial, sans-serif; /* Sets the font family of the text inside the body to Arial or a generic sans-serif font */
4-
font-size: 16px; /* Sets the font size of the text inside the body to 16 pixels */
5-
line-height: 1.6; /* Sets the line height of the text inside the body to 1.6 times the font size */
6-
color: #333; /* Sets the color of the text inside the body to a dark gray */
2+
background-color: #f9f9f9;
3+
font-family: Arial, Helvetica, sans-serif;
4+
line-height: 1.6;
5+
margin: 0;
76
}
87

98
h1 {
10-
font-size: 36px; /* Sets the font size of the h1 heading to 36 pixels */
11-
font-weight: bold; /* Makes the h1 heading bold */
12-
text-align: center; /* Centers the h1 heading horizontally within its container */
13-
margin-top: 40px; /* Adds a top margin of 40 pixels to the h1 heading */
14-
margin-bottom: 60px; /* Adds a bottom margin of 60 pixels to the h1 heading */
9+
font-size: 36px;
10+
font-weight: bold;
11+
text-align: center;
12+
margin-top: 40px;
13+
margin-bottom: 60px;
1514
}
1615

17-
#search-form {
18-
display: flex; /* Set the display property of the element to flex */
19-
justify-content: center; /* Center the child elements horizontally */
20-
align-items: center; /* Center the child elements vertically */
21-
margin-bottom: 60px; /* Add a bottom margin of 60 pixels to the element */
16+
form {
17+
display: flex;
18+
justify-content: center;
19+
align-items: center;
20+
margin-bottom: 60px;
2221
}
2322

2423
#search-input {
25-
width: 60%; /* Set the width of the element to 60% of its container */
26-
max-width: 400px; /* Set the maximum width of the element to 400 pixels */
27-
padding: 10px 20px; /* Add 10 pixels of padding to the top and bottom and 20 pixels of padding to the left and right of the element */
28-
border: none; /* Remove the border from the element */
29-
border-radius: 5px; /* Add a 5-pixel radius to the element's border corners */
30-
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); /* Add a 5-pixel box shadow to the element */
31-
font-size: 18px; /* Set the font size of the element to 18 pixels */
32-
color: #333; /* Set the text color of the element to #333 */
24+
width: 60%;
25+
max-width: 400px;
26+
padding: 10px 20px;
27+
border: none;
28+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
29+
border-radius: 5px;
30+
font-size: 18px;
31+
color: #333;
3332
}
3433

3534
#search-button {
36-
padding: 10px 20px; /* Sets the padding of the button */
37-
background-color: #4caf50; /* Sets the background color of the button */
38-
color: white; /* Sets the text color of the button */
39-
font-size: 18px; /* Sets the font size of the button text */
40-
border: none; /* Removes the border of the button */
41-
border-radius: 5px; /* Sets the border radius of the button */
42-
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); /* Sets the box shadow of the button */
43-
cursor: pointer; /* Changes the cursor to pointer when hovering over the button */
44-
transition: background-color 0.3s ease-in-out; /* Sets the transition effect when the background color changes */
35+
padding: 10px 20px;
36+
background-color: #4caf50;
37+
color: white;
38+
border: none;
39+
font-size: 18px;
40+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
41+
cursor: pointer;
42+
border-radius: 5px;
43+
transition: background-color 0.3s ease-in-out;
4544
}
4645

4746
#search-button:hover {
48-
background-color: #3e8e41; /* Changes the background color when hovering over the button */
47+
background-color: #3e8e41;
4948
}
5049

51-
#search-results {
52-
display: flex; /* sets the display type of the element to flex*/
53-
flex-wrap: wrap; /* allows the flex items to wrap to multiple lines*/
54-
justify-content: space-between; /* aligns the flex items along the main axis with equal spacing between them*/
55-
margin: 0 auto; /* sets the top and bottom margins to 0 and the left and right margins to auto*/
56-
max-width: 1200px; /* sets the maximum width of the element to 1200 pixels*/
50+
.search-results {
51+
display: flex;
52+
flex-wrap: wrap;
53+
justify-content: space-between;
54+
max-width: 1200px;
55+
margin: 0 auto;
56+
padding: 20px;
5757
}
5858

59-
/* Sets the styles for an individual search result element */
6059
.search-result {
61-
/* Adds 60px margin to the bottom of each search result element */
6260
margin-bottom: 60px;
63-
64-
/* Sets the width of the search result element to 30% of the parent container */
6561
width: 30%;
66-
67-
/* Adds rounded corners to the search result element */
6862
border-radius: 5px;
69-
70-
/* Adds a box shadow to the search result element */
71-
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
72-
73-
/* Hides any content that overflows the search result element */
63+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
7464
overflow: hidden;
7565
}
7666

67+
.search-result:hover img {
68+
transform: scale(1.05);
69+
}
70+
7771
.search-result img {
78-
/* Sets the width of the image to 100% of its container element */
7972
width: 100%;
80-
81-
/* Sets the height of the image to 200 pixels */
8273
height: 200px;
83-
84-
/* Determines how the image should be resized to cover its container without distorting its aspect ratio */
8574
object-fit: cover;
86-
87-
/* Specifies that any changes to the transform property of the image should be transitioned over a duration of 0.3 seconds with an easing function */
8875
transition: transform 0.3s ease-in-out;
8976
}
90-
91-
.search-result:hover img {
92-
transform: scale(1.05);
93-
/* The transform property scales the image by 1.05, making it 5% larger than its original size. This creates a zoom effect when the user hovers over the image. */
94-
}
95-
9677
.search-result a {
97-
display: block; /* sets the display type to block */
98-
padding: 10px; /* adds padding to the top and bottom of the element */
99-
color: #333; /* sets the text color to dark gray */
100-
text-decoration: none; /* removes any text decoration */
101-
transition: background-color 0.3s ease-in-out; /* sets a transition effect when the background color changes */
78+
padding: 10px;
79+
display: block;
80+
color: #333;
81+
text-decoration: none;
82+
transition: background-color 0.3s ease-in-out;
10283
}
10384

104-
.search-result a:hover {
105-
background-color: rgba(
106-
0,
107-
0,
108-
0,
109-
0.1
110-
); /* changes the background color to a light gray when the element is hovered over */
85+
.search-result:hover a {
86+
background-color: rgba(0, 0, 0, 0.1);
11187
}
11288

11389
#show-more-button {
114-
background-color: #008cba; /* Sets the background color of the button to a shade of blue */
115-
border: none; /* Removes the border around the button */
116-
color: white; /* Sets the font color of the button text to white */
117-
padding: 10px 20px; /* Sets the padding of the button to 10px on the top and bottom, and 20px on the left and right */
118-
text-align: center; /* Centers the button text horizontally */
119-
text-decoration: none; /* Removes any text decoration such as underlining */
120-
display: inline-block; /* Displays the button as an inline-level block container */
121-
font-size: 16px; /* Sets the font size of the button text to 16px */
122-
border-radius: 5px; /* Rounds the corners of the button to 5px */
123-
margin-top: 20px; /* Adds a 20px margin on the top of the button */
124-
transition: background-color 0.3s ease; /* Specifies a transition effect for the background color when hovering over the button */
125-
display: none; /* Hides the button */
126-
margin: 0 auto; /* Centers the button horizontally */
127-
margin-bottom: 40px; /* Adds a 40px margin on the bottom of the button */
128-
cursor: pointer; /* Sets the cursor to a pointer when hovering over the button */
90+
background-color: #008cba;
91+
border: none;
92+
color: white;
93+
padding: 10px 20px;
94+
display: block;
95+
margin: 20px auto;
96+
text-align: center;
97+
border-radius: 5px;
98+
cursor: pointer;
99+
transition: background-color 0.3s ease-in-out;
100+
display: none;
129101
}
130102

131103
#show-more-button:hover {
132-
background-color: #0077b5; /* Changes the background color of the button to a darker shade of blue when hovering over it */
104+
background-color: #0077b5;
133105
}
134106

135-
/* This is a CSS media query, which applies different styles based on the size of the screen.
136-
137-
The first media query applies when the screen width is a maximum of 768px. In this case, it changes the justify-content property of #search-results to center the search results horizontally. It also changes the width of .search-result to 45%.
138-
139-
The second media query applies when the screen width is a maximum of 480px. In this case, it changes the flex-direction property of #search-form to column, which stacks the search input and button vertically. It also adds a margin bottom to #search-input and changes the width of .search-result to 100%, making each search result take up the full width of the screen. */
140-
141-
/* The following styles will apply when the screen size is 768px or smaller */
142107
@media screen and (max-width: 768px) {
143-
/* Centers the search result items */
144-
#search-results {
145-
justify-content: center;
146-
}
147-
148-
/* Decreases the width of each search result item */
149108
.search-result {
150109
width: 45%;
151110
}
152111
}
153-
154-
/* The following styles will apply when the screen size is 480px or smaller */
155112
@media screen and (max-width: 480px) {
156-
/* Changes the direction of the search form to be vertical */
157-
#search-form {
113+
.search-result {
114+
width: 100%;
115+
}
116+
117+
form {
158118
flex-direction: column;
159119
}
160120

161-
/* Adds margin to the bottom of the search input */
162121
#search-input {
163122
margin-bottom: 20px;
164-
}
165-
166-
/* Makes each search result item full width */
167-
.search-result {
168-
width: 100%;
123+
width: 85%;
169124
}
170125
}

0 commit comments

Comments
 (0)