Задача: Создание интерактивной формы регистрации
Описание задачи:
Создайте простую веб-страницу с формой регистрации. Форма должна содержать поля для ввода имени, электронной почты и пароля. Пользователь должен увидеть сообщение об ошибке, если введенные данные не соответствуют следующим требованиям:
- Имя: не может быть пустым и должно содержать минимум 3 символа.
- Электронная почта: должна быть в формате email (например, user@example.com).
- Пароль: должен содержать минимум 8 символов, хотя бы одну цифру и одну заглавную букву.
Требования:
- HTML для создания формы.
- CSS для стилизации формы.
- JavaScript для проверки введенных данных в реальном времени и отображения соответствующих сообщений об ошибках.
Шаги:
- Создайте HTML файл с формой.
- Стилизуйте форму с помощью CSS.
- Добавьте JavaScript код для валидации полей формы в реальном времени.
#домашка
Описание задачи:
Создайте простую веб-страницу с формой регистрации. Форма должна содержать поля для ввода имени, электронной почты и пароля. Пользователь должен увидеть сообщение об ошибке, если введенные данные не соответствуют следующим требованиям:
- Имя: не может быть пустым и должно содержать минимум 3 символа.
- Электронная почта: должна быть в формате email (например, user@example.com).
- Пароль: должен содержать минимум 8 символов, хотя бы одну цифру и одну заглавную букву.
Требования:
- HTML для создания формы.
- CSS для стилизации формы.
- JavaScript для проверки введенных данных в реальном времени и отображения соответствующих сообщений об ошибках.
Шаги:
- Создайте HTML файл с формой.
- Стилизуйте форму с помощью CSS.
- Добавьте JavaScript код для валидации полей формы в реальном времени.
#домашка
❤2👍2
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Что такое JavaScript фреймворки?
2. Тернарный оператор
3. Тег <output>
Лучшие фронтенд вакансии @job_webdev:
1. Frontend developer
2. HTML-верстальщик
3. Верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. UI/UX-дизайнер
3. Графический дизайнер
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Что такое JavaScript фреймворки?
2. Тернарный оператор
3. Тег <output>
Лучшие фронтенд вакансии @job_webdev:
1. Frontend developer
2. HTML-верстальщик
3. Верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. UI/UX-дизайнер
3. Графический дизайнер
#лучшеезанеделю
👍3
Задача: Ленивый бесконечный генератор простых чисел
Напиши генератор primeGenerator(), который при каждом вызове next() будет возвращать следующее простое число.
Пример:
Подсказка:
Можно реализовать простую проверку на простое число (через деление на числа до √n), и в генераторе перебирать числа от 2 и выше, возвращая только простые
#домашка
Напиши генератор primeGenerator(), который при каждом вызове next() будет возвращать следующее простое число.
Пример:
const gen = primeGenerator();
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3
console.log(gen.next().value); // 5
console.log(gen.next().value); // 7
console.log(gen.next().value); // 11
Подсказка:
Можно реализовать простую проверку на простое число (через деление на числа до √n), и в генераторе перебирать числа от 2 и выше, возвращая только простые
#домашка
👍4
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Стоит ли использовать bootstrap?
2. Как использовать БЭМ на практике?
3. Ошибки в js
Лучшие фронтенд вакансии @job_webdev:
1. Frontend developer
2. HTML-верстальщик
3. Frontend разработчик
Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. UI/UX-дизайнер
3. Intern web дизайнер
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Стоит ли использовать bootstrap?
2. Как использовать БЭМ на практике?
3. Ошибки в js
Лучшие фронтенд вакансии @job_webdev:
1. Frontend developer
2. HTML-верстальщик
3. Frontend разработчик
Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. UI/UX-дизайнер
3. Intern web дизайнер
#лучшеезанеделю
❤2
Задача: Сверстать и запрограммировать интерактивный светофор, который:
Имеет три круга (красный, жёлтый, зелёный).
При клике на кнопку «Старт» начинает переключать цвета в цикле:
Красный → Жёлтый → Зелёный → Жёлтый → Красный …
Каждый цвет горит заданное время:
Красный — 3 секунды
Жёлтый — 1 секунда
Зелёный — 3 секунды
После нажатия кнопки «Стоп» светофор останавливается на текущем цвете.
Перезапуск с кнопки «Старт» продолжает с текущего цвета, а не с начала.
Усложнение:
Сделать, чтобы при изменении размера окна светофор автоматически масштабировался и занимал 30% от ширины экрана, сохраняя правильные пропорции кругов и расстояния между ними.
#домашка
Имеет три круга (красный, жёлтый, зелёный).
При клике на кнопку «Старт» начинает переключать цвета в цикле:
Красный → Жёлтый → Зелёный → Жёлтый → Красный …
Каждый цвет горит заданное время:
Красный — 3 секунды
Жёлтый — 1 секунда
Зелёный — 3 секунды
После нажатия кнопки «Стоп» светофор останавливается на текущем цвете.
Перезапуск с кнопки «Старт» продолжает с текущего цвета, а не с начала.
Усложнение:
Сделать, чтобы при изменении размера окна светофор автоматически масштабировался и занимал 30% от ширины экрана, сохраняя правильные пропорции кругов и расстояния между ними.
#домашка
👍6
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Фреймворк foundation
2. Как работать с форматом JSON в HTML и JavaScript?
3. Асинхронность js
Лучшие фронтенд вакансии @job_webdev:
1. Верстальщик
2. HTML-верстальщик
3. Frontend разработчик
Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. UI/UX-дизайнер
3. Графический дизайнер
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Фреймворк foundation
2. Как работать с форматом JSON в HTML и JavaScript?
3. Асинхронность js
Лучшие фронтенд вакансии @job_webdev:
1. Верстальщик
2. HTML-верстальщик
3. Frontend разработчик
Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. UI/UX-дизайнер
3. Графический дизайнер
#лучшеезанеделю
👍1