Skip to content

Commit 20d3a15

Browse files
hustle2livehustle2live
committed
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)