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
This repository was archived by the owner on Feb 16, 2022. It is now read-only.

Commit 2ca795d

Browse files
committed
eventListeners added to the form and delete icon'
1 parent 5d43e3d commit 2ca795d

File tree

14 files changed

+516
-0
lines changed

14 files changed

+516
-0
lines changed

‎lessons/events-on-page/README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Описание
2+
* Функция `createML` генерирует список фильмов и сортирует их с помощью функции` sortArr`
3+
* Добавлены обработчики событий к форме и значкам корзины. Первый добавляет фильм в список
4+
фильмов, сортирует получившийся список и довавляет новое значение в свойство `movies` объекта
5+
`movieDB`. Второй удаляет фильм из объекта и со страницы.

‎lessons/events-on-page/package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"name": "@lessons/events-in-page",
3+
"version": "0.0.0",
4+
"license": "BSD 3-Clause"
5+
}
Lines changed: 353 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,353 @@
1+
* {
2+
-webkit-box-sizing: border-box;
3+
box-sizing: border-box;
4+
margin: 0;
5+
padding: 0;
6+
font-family: 'Roboto', sans-serif
7+
}
8+
9+
.header {
10+
display: -webkit-box;
11+
display: -ms-flexbox;
12+
display: flex;
13+
height: 100px
14+
}
15+
16+
.header__search {
17+
display: -webkit-box;
18+
display: -ms-flexbox;
19+
display: flex;
20+
-webkit-box-pack: center;
21+
-ms-flex-pack: center;
22+
justify-content: center;
23+
-webkit-box-align: center;
24+
-ms-flex-align: center;
25+
align-items: center;
26+
height: 100%;
27+
width: 300px;
28+
background: #ffd500
29+
}
30+
31+
.header__search form {
32+
position: relative;
33+
width: 260px;
34+
height: 30px
35+
}
36+
37+
.header__search form input {
38+
width: 100%;
39+
border: none;
40+
border-bottom: 2px solid #ffffff;
41+
background-color: transparent;
42+
color: #ffffff;
43+
font-size: 24px;
44+
line-height: 28px;
45+
padding-bottom: 5px;
46+
outline: none
47+
}
48+
49+
.header__search form input::-webkit-input-placeholder {
50+
color: #ffffff
51+
}
52+
53+
.header__search form input:-ms-input-placeholder {
54+
color: #ffffff
55+
}
56+
57+
.header__search form input::-ms-input-placeholder {
58+
color: #ffffff
59+
}
60+
61+
.header__search form input::placeholder {
62+
color: #ffffff
63+
}
64+
65+
.header__search form:after {
66+
content: '';
67+
display: block;
68+
position: absolute;
69+
top: 2px;
70+
right: 10px;
71+
background: url("../icons/search.svg") center center/cover no-repeat;
72+
width: 24px;
73+
height: 24px
74+
}
75+
76+
.header__logo {
77+
display: -webkit-box;
78+
display: -ms-flexbox;
79+
display: flex;
80+
-webkit-box-pack: center;
81+
-ms-flex-pack: center;
82+
justify-content: center;
83+
-webkit-box-align: center;
84+
-ms-flex-align: center;
85+
align-items: center;
86+
height: 100%;
87+
width: calc(100% - 360px)
88+
}
89+
90+
.promo {
91+
height: 780px;
92+
display: -webkit-box;
93+
display: -ms-flexbox;
94+
display: flex
95+
}
96+
97+
.promo__menu {
98+
width: 300px;
99+
height: 100%;
100+
background: #212121;
101+
padding: 60px 0 0 10px
102+
}
103+
104+
.promo__menu-item {
105+
display: block;
106+
font-size: 28px;
107+
line-height: 33px;
108+
color: #d6d9dc;
109+
text-decoration: none;
110+
font-weight: 300;
111+
padding-left: 40px;
112+
margin-top: 18px
113+
}
114+
115+
.promo__menu-item:hover {
116+
color: #ffd500
117+
}
118+
119+
.promo__menu-item_active {
120+
border-left: 2px solid #ffd500;
121+
color: #ffd500
122+
}
123+
124+
.promo__content {
125+
width: calc(100% - 600px)
126+
}
127+
128+
.promo__bg {
129+
height: 360px;
130+
background: url("../img/mars.webp") no-repeat top;
131+
padding: 107px 0 0 61px
132+
}
133+
134+
.promo__genre {
135+
font-weight: bold;
136+
font-size: 18px;
137+
line-height: 21px;
138+
color: #ffffff;
139+
text-transform: uppercase
140+
}
141+
142+
.promo__title {
143+
font-weight: bold;
144+
font-size: 48px;
145+
line-height: 56px;
146+
color: #ffffff;
147+
text-transform: uppercase
148+
}
149+
150+
.promo__descry {
151+
width: 481px;
152+
font-weight: bold;
153+
font-size: 18px;
154+
line-height: 21px;
155+
color: #ffffff;
156+
text-transform: uppercase
157+
}
158+
159+
.promo__ratings {
160+
margin-top: 13px
161+
}
162+
163+
.promo__ratings span {
164+
font-weight: bold;
165+
font-size: 18px;
166+
line-height: 21px;
167+
color: #ffd500;
168+
margin-right: 25px
169+
}
170+
171+
.promo__interactive {
172+
display: -webkit-box;
173+
display: -ms-flexbox;
174+
display: flex
175+
}
176+
177+
.promo__interactive > div {
178+
width: 50%;
179+
padding: 30px 0 0 60px
180+
}
181+
182+
.promo__interactive-title {
183+
display: inline-block;
184+
font-weight: bold;
185+
font-size: 24px;
186+
line-height: 28px;
187+
color: #000000
188+
}
189+
190+
.promo__interactive-title:after {
191+
content: '';
192+
display: block;
193+
width: 33%;
194+
height: 2px;
195+
background-color: #000000
196+
}
197+
198+
.promo__interactive-list {
199+
list-style-type: none;
200+
margin-top: 35px;
201+
display: -webkit-box;
202+
display: -ms-flexbox;
203+
display: flex;
204+
-webkit-box-orient: vertical;
205+
-webkit-box-direction: normal;
206+
-ms-flex-direction: column;
207+
flex-direction: column;
208+
-webkit-box-align: start;
209+
-ms-flex-align: start;
210+
align-items: flex-start
211+
}
212+
213+
.promo__interactive-item {
214+
display: inline-block;
215+
position: relative;
216+
font-weight: 300;
217+
font-size: 20px;
218+
line-height: 18px;
219+
color: #000000;
220+
margin-bottom: 15px;
221+
padding-right: 40px;
222+
text-transform: uppercase
223+
}
224+
225+
.promo__interactive-item span {
226+
display: block;
227+
position: absolute;
228+
left: -30px;
229+
top: 50%;
230+
-webkit-transform: translateY(-50%);
231+
transform: translateY(-50%);
232+
width: 20px;
233+
height: 20px;
234+
background: url("../icons/star.svg") center center/cover no-repeat
235+
}
236+
237+
.promo__interactive-item:before {
238+
content: '';
239+
position: absolute;
240+
bottom: -5px;
241+
display: block;
242+
width: calc(100% - 40px);
243+
height: 2px;
244+
background-color: #ffd500
245+
}
246+
247+
.promo__interactive-item:hover .delete {
248+
content: '';
249+
display: block;
250+
position: absolute;
251+
right: 0;
252+
top: 50%;
253+
-webkit-transform: translateY(-50%);
254+
transform: translateY(-50%);
255+
width: 20px;
256+
height: 20px;
257+
background: url("../icons/trash.png") center center/cover no-repeat;
258+
cursor: pointer
259+
}
260+
261+
.promo__interactive .add .promo__interactive-title {
262+
margin-bottom: 25px
263+
}
264+
265+
.promo__interactive .add span {
266+
display: block;
267+
margin: 10px 0;
268+
font-weight: bold;
269+
font-size: 16px;
270+
line-height: 16px;
271+
color: #000000
272+
}
273+
274+
.promo__interactive .add .yes {
275+
display: inline;
276+
margin-left: 10px
277+
}
278+
279+
.promo__interactive .add input[type="text"] {
280+
width: 270px;
281+
height: 45px;
282+
line-height: 50px;
283+
font-size: 16px;
284+
background: rgba(196, 196, 196, 0.29);
285+
border: 1px solid rgba(0, 0, 0, 0.19);
286+
padding: 0 15px;
287+
outline: none;
288+
border-radius: 4px
289+
}
290+
291+
.promo__interactive .add input[type="text"]::-webkit-input-placeholder {
292+
font-weight: 300;
293+
font-size: 16px;
294+
color: rgba(0, 0, 0, 0.53)
295+
}
296+
297+
.promo__interactive .add input[type="text"]:-ms-input-placeholder {
298+
font-weight: 300;
299+
font-size: 16px;
300+
color: rgba(0, 0, 0, 0.53)
301+
}
302+
303+
.promo__interactive .add input[type="text"]::-ms-input-placeholder {
304+
font-weight: 300;
305+
font-size: 16px;
306+
color: rgba(0, 0, 0, 0.53)
307+
}
308+
309+
.promo__interactive .add input[type="text"]::placeholder {
310+
font-weight: 300;
311+
font-size: 16px;
312+
color: rgba(0, 0, 0, 0.53)
313+
}
314+
315+
.promo__interactive .add button {
316+
display: block;
317+
margin-top: 15px;
318+
width: 170px;
319+
height: 45px;
320+
background: #ffd500;
321+
font-weight: bold;
322+
font-size: 14px;
323+
line-height: 14px;
324+
color: #ffffff;
325+
border: none;
326+
outline: none;
327+
cursor: pointer
328+
}
329+
330+
.promo__interactive .add button:active {
331+
-webkit-transform: scale(0.95);
332+
transform: scale(0.95)
333+
}
334+
335+
.promo__adv {
336+
background: #212121;
337+
width: 300px;
338+
height: 100%
339+
}
340+
341+
.promo__adv-title {
342+
font-weight: bold;
343+
font-size: 18px;
344+
line-height: 21px;
345+
color: #ffd500;
346+
margin: 20px 0;
347+
text-align: center
348+
}
349+
350+
.promo__adv img {
351+
width: 100%;
352+
margin-bottom: 10px
353+
}

‎lessons/events-on-page/src/icons/logotype.svg‎

Lines changed: 3 additions & 0 deletions
Loading[フレーム]
Lines changed: 4 additions & 0 deletions
Loading[フレーム]
Lines changed: 3 additions & 0 deletions
Loading[フレーム]
6.16 KB
Loading[フレーム]
64.7 KB
Loading[フレーム]
179 KB
Loading[フレーム]
466 KB
Loading[フレーム]

0 commit comments

Comments
(0)

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