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 20d3a15

Browse files
modified task 2
1 parent 1cc9849 commit 20d3a15

File tree

3 files changed

+231
-45
lines changed

3 files changed

+231
-45
lines changed

‎2024/02/index.css

Lines changed: 123 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,15 @@
44
--bg-blue: #1aaaf2;
55
}
66

7+
html,
8+
body,
9+
p,
10+
ul,
11+
div {
12+
font-size: 24px;
13+
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
14+
}
15+
716
body {
817
display: flex;
918
box-sizing: border-box;
@@ -17,8 +26,11 @@ body {
1726
justify-content: center;
1827
}
1928

20-
.select-form.show {
21-
overflow: visible;
29+
.selected:hover,
30+
.select-form,
31+
li {
32+
background: var(--bg-main);
33+
color: rgb(80, 80, 80);
2234
}
2335

2436
.select-form {
@@ -27,58 +39,106 @@ body {
2739
width: 600px;
2840
height: 120px;
2941
min-height: 120px;
30-
border: 1px solid pink;
31-
font-size: 34px;
32-
background: var(--bg-main);
33-
overflow: hidden;
34-
color: black;
42+
color: rgb(80, 80, 80);
3543
}
3644

3745
input,
3846
ul {
3947
width: 100%;
4048
height: 100%;
4149
color: inherit;
42-
font-size: inherit;
43-
background: inherit;
50+
background: transparent;
4451
list-style-type: none;
4552
padding-left: 0px;
4653
}
4754

4855
input {
4956
padding: 20px 0;
50-
width: 80%;
57+
width: 70%;
58+
font-size: 34px;
5159
height: 60%;
5260
margin: 25px 80px;
5361
outline: 0;
5462
border: 1px solid transparent;
5563
box-sizing: border-box;
5664
}
5765

58-
input::placeholder {
59-
color: #26c9c3;
66+
label[for='search'] {
67+
pointer-events: none;
68+
position: absolute;
69+
left: 10%;
70+
top: 45px;
71+
transition: all 400ms;
72+
color: rgb(107, 107, 107);
6073
}
6174

62-
input:focus::placeholder {
63-
color: transparent;
75+
label[for='search'].showed,
76+
input:focus ~ label[for='search'] {
77+
position: absolute;
78+
top: -30px;
79+
font-size: 16px;
80+
left: 10px;
6481
}
6582

6683
input:focus {
6784
border-bottom: 1px solid rgb(148, 148, 148);
6885
}
6986

87+
.select-form .selected,
88+
.select-form.show li {
89+
display: flex;
90+
z-index: 1;
91+
}
92+
7093
li {
71-
height: inherit;
72-
width: inherit;
94+
display: none;
95+
position: relative;
96+
width: 600px;
97+
height: 120px;
7398
font-size: inherit;
74-
background: inherit;
75-
display: block;
76-
padding: 40px 20px;
99+
flex-wrap: nowrap;
100+
padding: 20px 20px;
77101
max-width: 100%;
78102
max-height: 100%;
79103
box-sizing: border-box;
80104
margin-bottom: 2px;
81105
cursor: pointer;
106+
z-index: -1;
107+
}
108+
109+
li::before {
110+
display: block;
111+
position: absolute;
112+
width: 100%;
113+
height: 100%;
114+
content: '';
115+
left: 0;
116+
top: 0;
117+
z-index: 5;
118+
background: transparent;
119+
}
120+
121+
li img {
122+
text-align: center;
123+
width: 20%;
124+
height: 100%;
125+
object-fit: contain;
126+
}
127+
128+
li div {
129+
display: flex;
130+
flex-direction: column;
131+
width: 75%;
132+
gap: 8px;
133+
align-items: flex-start;
134+
justify-content: center;
135+
padding-left: 30px;
136+
}
137+
138+
li p,
139+
li h5 {
140+
margin: 0;
141+
padding: 0;
82142
}
83143

84144
li:hover {
@@ -90,11 +150,53 @@ li.selected {
90150
position: absolute;
91151
left: 0;
92152
top: 0;
93-
border: 2px solid black;
94153
}
95154

96155
ul {
156+
height: auto;
157+
max-height: 600px;
158+
overflow-y: scroll;
97159
}
98160

99-
.show ul {
161+
.arrow-icon {
162+
position: absolute;
163+
display: block;
164+
right: 35px;
165+
top: 35px;
166+
height: 60%;
167+
z-index: 5;
168+
}
169+
170+
// ---- contacts styles ---
171+
172+
.contacts {
173+
display: block;
174+
width: auto;
175+
height: 200px;
176+
font-size: 60px;
177+
margin: auto;
178+
margin-bottom: 100px;
179+
z-index: 5;
180+
}
181+
.back-link {
182+
width: 100%;
183+
text-align: center;
184+
margin: 40px auto;
185+
text-decoration: none;
186+
font-size: 20px;
187+
}
188+
.back-link a,
189+
.social-link {
190+
text-decoration: none;
191+
}
192+
.back-link a:hover {
193+
text-decoration: underline !important;
194+
}
195+
196+
.social-link img {
197+
border-radius: 50%;
198+
vertical-align: sub;
199+
}
200+
.social-link img:hover {
201+
box-shadow: 3px 3px 20px -10px #000;
100202
}

‎2024/02/index.html

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,40 @@
88
<script type="text/javascript" defer src="./index.js"></script>
99
</head>
1010
<body>
11-
<div class="select-form">
12-
<input class="search" type="search" value="" placeholder="Your Favorite Holiday Movie" />
11+
<form class="select-form">
12+
<div class="arrow-icon">
13+
<img src="./assets/dropdown-arrow.svg" alt="arrows" />
14+
</div>
15+
<input class="search" name="search" type="search" value="" placeholder="" />
16+
<label for="search">Your Favorite Holiday Movie</label>
1317
<ul>
14-
<li>movie 1</li>
15-
<li>movie 2</li>
16-
<li>movie 3</li>
18+
<li>
19+
<img
20+
src="https://m.media-amazon.com/images/M/MV5BY2NlNTMwYzgtZjI2Ny00ZWExLWE2NDUtNzFlYTQyMmY1NjkwXkEyXkFqcGc@._V1_QL75_UX140_CR0,0,140,207_.jpg"
21+
alt="Kevin Spacey, Judy Davis, and Denis Leary in The Ref (1994)"
22+
/>
23+
<div>
24+
<h5>Title</h5>
25+
<p>2025</p>
26+
</div>
27+
</li>
1728
</ul>
18-
</div>
19-
<div style="width: auto; height: 200px; font-size: 60px; margin: auto; margin-bottom: 100px">
20-
<div style="width: 100%; text-align: center; margin: 40px auto; text-decoration: none; font-size: 20px">
29+
</form>
30+
<div class="contacts" style="width: auto; height: 200px; font-size: 60px; margin: auto; margin-bottom: 100px">
31+
<div
32+
class="back-link"
33+
style="width: 100%; text-align: center; margin: 40px auto; text-decoration: none; font-size: 20px"
34+
>
2135
<a style="text-decoration: none" href="https://github.com/hustle2live/Advent-of-JavaScript/">
2236
BACK TO REPO
2337
</a>
2438
</div>
25-
<a style="text-decoration: none" href="https://www.linkedin.com/in/vkuznietsov-bb066376/" target="_blank">
39+
<a
40+
class="social-link"
41+
style="text-decoration: none"
42+
href="https://www.linkedin.com/in/vkuznietsov-bb066376/"
43+
target="_blank"
44+
>
2645
<img
2746
style="border-radius: 50%; vertical-align: sub"
2847
src="../../ln.png"
@@ -31,7 +50,7 @@
3150
alt="github"
3251
/>
3352
</a>
34-
<a style="text-decoration: none" href="https://github.com/hustle2live" target="_blank">
53+
<a class="social-link" style="text-decoration: none" href="https://github.com/hustle2live" target="_blank">
3554
<img
3655
style="border-radius: 50%; vertical-align: sub"
3756
src="../../gh.ico"
@@ -40,7 +59,7 @@
4059
alt="github"
4160
/>
4261
</a>
43-
<a style="text-decoration: none" href="https://t.me/vkuznetsov28" target="_blank">
62+
<a class="social-link" style="text-decoration: none" href="https://t.me/vkuznetsov28" target="_blank">
4463
<img
4564
style="border-radius: 50%; vertical-align: sub"
4665
src="../../tg.png"

‎2024/02/index.js

Lines changed: 78 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,12 @@ const selectForm = document.querySelector('.select-form');
22
const optionList = document.querySelector('ul');
33
const options = Array.from(document.querySelectorAll('li'));
44
const searchInput = document.querySelector('.search');
5+
const labelInput = document.querySelector('label[for="search"]');
56
const passwordInput = document.querySelector('.form_input');
67

78
let isSelected = null;
8-
9-
optionList.addEventListener('click', (e) => {
10-
// console.log(e.target);
11-
});
9+
let initialData = [];
10+
let movieList = [];
1211

1312
selectForm.addEventListener('click', (e) => {
1413
const isSelected = e.target.classList.contains('selected');
@@ -22,8 +21,6 @@ selectForm.addEventListener('click', (e) => {
2221

2322
if (e.target.tagName.includes('LI')) {
2423
e.target.classList.add('selected');
25-
// selectForm.classList.remove('show');
26-
// e.stopPropagation();
2724
return;
2825
}
2926

@@ -32,15 +29,83 @@ selectForm.addEventListener('click', (e) => {
3229
e.stopPropagation();
3330
});
3431

35-
function handleShowInput() {
36-
if (isSelected) {
37-
searchInput.style.display = 'none';
32+
document.addEventListener('click', () => {
33+
selectForm.classList.remove('show');
34+
});
35+
36+
document.addEventListener('DOMContentLoaded', async () => {
37+
await fetch('./assets/top-100-christmas-movies.json')
38+
.then((response) => response.json())
39+
.then((data) => {
40+
initialData = data;
41+
movieList = initialData;
42+
})
43+
.catch((error) => {
44+
console.error('Error:', error);
45+
});
46+
47+
if (movieList.length > 0) {
48+
renderList();
49+
}
50+
});
51+
52+
const newElement = (tagName = 'div', attributes = {}, children = null) => {
53+
const newDomElement = document.createElement(tagName);
54+
for (const attrName of Object.keys(attributes)) {
55+
attrName && attributes[attrName] && newDomElement.setAttribute(attrName, attributes[attrName]);
56+
}
57+
58+
if (!children) return newDomElement;
59+
60+
if (!Array.isArray(children)) {
61+
newDomElement.innerText = children;
3862
} else {
39-
searchInput.style.display='block';
63+
children.forEach((child)=>newDomElement.appendChild(child));
4064
}
65+
66+
return newDomElement;
67+
};
68+
69+
const createMoviePreview = (movie) => {
70+
if (!movie) return;
71+
72+
const { Image, Title, Year } = movie;
73+
const [imageAlt, movieLink] = [movie['Image Alt'], movie['Movie Link']];
74+
75+
const movieTitle = newElement('h5', {}, Title.replace(/^\d+\.\s/, ''));
76+
const movieDescription = newElement('p', {}, Year);
77+
78+
const textContainer = newElement('div', {}, [movieTitle, movieDescription]);
79+
const movieImage = newElement('img', { src: Image, alt: imageAlt });
80+
const movieDOMElement = newElement('li', {}, [movieImage, textContainer]);
81+
82+
return movieDOMElement;
83+
};
84+
85+
function renderList(str = '') {
86+
optionList.innerHTML = '';
87+
88+
if (str) {
89+
const regex = new RegExp(str, 'gi');
90+
const filtered = initialData.filter((movie) => regex.test(movie.Title));
91+
movieList = filtered;
92+
} else {
93+
movieList = initialData;
94+
}
95+
96+
if (movieList.length > 20) {
97+
movieList.length = 20;
98+
}
99+
100+
movieList.forEach((movie) => (!movie ? null : optionList.append(createMoviePreview(movie))));
41101
}
42102

43-
document.addEventListener('click', () => {
44-
console.log('loaded');
45-
selectForm.classList.remove('show');
103+
searchInput.addEventListener('input', (e) => {
104+
const inputValue = e.target.value.trim();
105+
if (inputValue) {
106+
labelInput.classList.add('showed');
107+
} else {
108+
labelInput.classList.remove('showed');
109+
}
110+
renderList(inputValue);
46111
});

0 commit comments

Comments
(0)

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