Тестовое задание - модальное окно - попап - JS, HTML

preview_player
Показать описание
Тестовое задание от кандидата. Задача - сделать модальное окно, или попап, который было бы легко использовать. То есть минимум кода на фронтенде. Как мне кажется, кандидат справился неплохо. Есть местами недоработки, но в целом - отлично. От себя я только добавил анимацию, местами поправил название переменных, мелкие изменения и применил в верстке с прошлого ролика.

--
Исходный код находится здесь:

- - - - - - - - - - - - - - - - - - - - - -

Подписывайся, чтобы не пропустить новые ролики!

- - - - - - - - - - - - - - - - - - - - - -
  1. Hi Pro!
  2. фронтенд
  3. javascript
  4. js
  5. тестовое задание
  6. popup
Рекомендации по теме
Тестовое задание - 0:05:09

Тестовое задание - модальное окно - попап - JS, HTML

как сделать pop 0:00:16

как сделать pop up (модальное окно) очень просто

Модальное окно (popup) 0:28:57

Модальное окно (popup) практика HTML CSS JavaScript

Модальное окно (popup) 0:19:25

Модальное окно (popup) на React с Headless UI

Модальное окно React, 0:00:17

Модальное окно React, js, html. Как сделать? Modal window

HTML & CSS 0:10:52

HTML & CSS практика | Модальное окно

Простое модальное окно 0:24:47

Простое модальное окно (Popup окно)

модальное окно html 0:00:12

модальное окно html css js figma

Новый HTML-элемент dialog 0:09:42

Новый HTML-элемент dialog навсегда изменит модальные окна

Как сделать всплывающее 0:18:47

Как сделать всплывающее окно (popup) на HTML CSS JavaScript

Тестовое задание UX/UI 0:13:49

Тестовое задание UX/UI дизайнера — Узнайте на что смотрят при проверке....

обучение программированию за 0:00:58

обучение программированию за минуту, всплывающие окна в JavaScript...

Практика JS: Модальное 0:10:54

Практика JS: Модальное окно на чистом JavaScript.

Модальное окно (попап) 0:10:55

Модальное окно (попап) для сайта. Как сделать всплывающее окно?...

Модальное окно css 0:04:49

Модальное окно css js || Popup окно без скролирования || js для новичков...

Модальное окно на 0:24:47

Модальное окно на html и css - вёрстка

Незаметно делаем модальные 0:18:50

Незаметно делаем модальные окна доступнее для незрячих...

#5 МОДАЛЬНОЕ ОКНО 0:37:22

#5 МОДАЛЬНОЕ ОКНО на Javascript

Попап на чистом 0:21:30

Попап на чистом js! Модальное окно на чистом JavaScript. Без jQuery!...

Уроки Bootstrap / 0:07:48

Уроки Bootstrap / Как сделать модальное окно, всплывающее окно на сайте...

Знакомьтесь, модальное окно, 0:35:50

Знакомьтесь, модальное окно, Анна Селезнёва

Всплывающее модальное окно 0:40:59

Всплывающее модальное окно - плагин

#4 ЭТО МЕНЯЕТ 0:00:39

#4 ЭТО МЕНЯЕТ В ВЕРСТКЕ ВСЕ [ scrollbar-gutter ]

Разбор тестового задания 0:08:29

Разбор тестового задания Middle Frontend Developer (плюсы и минусы)...

Комментарии
Автор

Классная реализация! И спасибо за исходники) Думаю возьму себе на вооружение.

GutsWarhammer
Автор

Объясните мне, пожалуйста, как новичку в вебе, почему нельзя просто сделать попап сразу в html, скрыть при загрузке страницы через display: none, а при нажатии менять на display: block?
P.S. большая часть кода мне не понятна, отсюда и вопрос, почему именно так правильно?
P.S.S. это ни в коем случае не наезд, исключительно желание развиваться и писать хороший, правильный код
Заранее спасибо

senysuvorov
Автор

У меня было тестовое сверстать сайт, с этим справился, хотя и не так как хотел рекрутер, и не сделал форму на php просто потому что не знал как её делать. В общем не отказали :(, но сказали перспективы есть и желание.

suralokinvelam