Задача: Создание интерактивной формы регистрации

Описание задачи:
Создайте простую веб-страницу с формой регистрации. Форма должна содержать поля для ввода имени, электронной почты и пароля. Пользователь должен увидеть сообщение об ошибке, если введенные данные не соответствуют следующим требованиям:
- Имя: не может быть пустым и должно содержать минимум 3 символа.
- Электронная почта: должна быть в формате email (например, user@example.com).
- Пароль: должен содержать минимум 8 символов, хотя бы одну цифру и одну заглавную букву.

Требования:
- HTML для создания формы.
- CSS для стилизации формы.
- JavaScript для проверки введенных данных в реальном времени и отображения соответствующих сообщений об ошибках.

Шаги:
- Создайте HTML файл с формой.
- Стилизуйте форму с помощью CSS.
- Добавьте JavaScript код для валидации полей формы в реальном времени.

#домашка

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Микрофронтенды
2. Оптимизация производительности веб сайтов
3. Атрибут autofocus

Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик РУТ КОД
2. Frontend-разработчик OWNR SOLUTIONS
3. Frontend-разработчик

Лучшие дизайн вакансии @job_webdesign:
1. UI/UX дизайнер
2. Web-дизайнер ZephyrLab
3. Web-дизайнер

#лучшеезанеделю

CSS margin-block

Читать 👨‍💻

#css | #полезности

Как сделать светлую и темную тему?

Читать 👨‍💻

#какэтосделать

Как создать простую галерею изображений с увеличением по клику

Читать 👨‍💻

#какэтосделать

Макет для тренировки (трикотаж)

Посмотреть макет 👨‍💻

#макетдлятренировки

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Как создать простую галерею изображений с увеличением по клику
2. CSS margin-block
3. Как сделать светлую и темную тему?

Лучшие фронтенд вакансии @job_webdev:
1. HTML верстальщик Тильда
2. HTML верстальщик
3. Frontend разработчик

Лучшие дизайн вакансии @job_webdesign:
1. Web дизайнер
2. Web дизайнер
3. UI-UX дизайнер

#лучшеезанеделю

Зачем Нужен TypeScript: Преимущества Использования

Читать 👨‍💻

#полезнаястатья

Как сделать плавный скроллинг по разделам

Читать 👨‍💻

#какэтосделать

HTML range

Читать 👨‍💻

#теория | #html

Задача: Фильтрация и сортировка списка пользователей

Описание:
У вас есть массив объектов, представляющих пользователей. Каждый объект содержит следующие свойства: name (имя пользователя), age (возраст пользователя) и isActive (булево значение, указывающее, активен ли пользователь).

Ваша задача:
Отфильтровать массив, оставив только активных пользователей.
Отсортировать активных пользователей по возрасту в порядке возрастания.
Вернуть массив имён отсортированных активных пользователей.
Пример входных данных:

const users = [
    { name: 'Alice', age: 25, isActive: true },
    { name: 'Bob', age: 30, isActive: false },
    { name: 'Charlie', age: 20, isActive: true },
    { name: 'David', age: 35, isActive: true },
    { name: 'Eve', age: 28, isActive: false }
];

Пример выходных данных:

['Charlie', 'Alice', 'David']

Указания:
Используйте метод filter() для фильтрации активных пользователей.
Используйте метод sort() для сортировки пользователей по возрасту.
Используйте метод map() для извлечения имён пользователей.

#домашка

Макет для тренировки (woo works)

Посмотреть макет 👨‍💻

#макетдлятренировки

image-rendering

Читать 👨‍💻

#css | #полезности

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. image-rendering
2. HTML range
3. Как сделать плавный скроллинг по разделам

Лучшие фронтенд вакансии @job_webdev:
1. Разработчик с опытом написания дизайн системы
2. Frontend разработчик
3. HTML-верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. UI-UX дизайнер
2. Web-дизайнер
3. UI-UX дизайнер

#лучшеезанеделю

Задача: Управление библиотекой (на ООП)

Создайте классы для управления библиотекой книг. Вам нужно создать следующие классы:
Book — класс для представления книги.
Library — класс для управления коллекцией книг.
Класс Book
Класс Book должен иметь следующие свойства и методы:

Свойства:
title (название книги)
author (автор книги)
year (год издания книги)
genre (жанр книги)
Методы:

Конструктор для инициализации свойств
Метод getSummary() для получения краткой информации о книге в виде строки: "Title" by Author, published in Year (Genre)
Класс Library
Класс Library должен иметь следующие свойства и методы:

Свойства:
books (массив книг)

Методы:
Конструктор для инициализации свойства books пустым массивом
Метод addBook(book) для добавления книги в библиотеку
Метод removeBook(title) для удаления книги по названию
Метод findBooksByAuthor(author) для поиска книг по автору, возвращает массив книг
Метод findBooksByGenre(genre) для поиска книг по жанру, возвращает массив книг
Метод getAllBooks() для получения всех книг в библиотеке

Пример использования:

// Создание экземпляров книг
const book1 = new Book('To Kill a Mockingbird', 'Harper Lee', 1960, 'Fiction');
const book2 = new Book('1984', 'George Orwell', 1949, 'Dystopian');
const book3 = new Book('The Great Gatsby', 'F. Scott Fitzgerald', 1925, 'Fiction');
// Создание экземпляра библиотеки и добавление книг
const library = new Library();
library.addBook(book1);
library.addBook(book2);
library.addBook(book3);
// Поиск книг по автору
const orwellBooks = library.findBooksByAuthor('George Orwell');
console.log(orwellBooks);
// Поиск книг по жанру
const fictionBooks = library.findBooksByGenre('Fiction');
console.log(fictionBooks);
// Получение всех книг
const allBooks = library.getAllBooks();
console.log(allBooks);
// Удаление книги
library.removeBook('1984');
console.log(library.getAllBooks());

#домашка