Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d464c78

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

Lines changed: 40 additions & 11 deletions
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-
<formid="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

Lines changed: 54 additions & 0 deletions
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

Lines changed: 69 additions & 114 deletions
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:0px0px5pxrgba(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:005pxrgba(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:0px0px5pxrgba(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:005pxrgba(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)

AltStyle によって変換されたページ (->オリジナル) /