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

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

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

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

#домашка

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

Лучшие статьи @free_html_lessons:
1. Что такое JavaScript фреймворки?
2. Тернарный оператор
3. Тег <output>

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

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

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

Стоит ли использовать bootstrap?

Читать 👨‍💻

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

Ошибки в js

Читать 👨‍💻

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

Макет для тренировки (ООО ИСТ)

Перейти к макету 🧑‍💻

#практика | #макет

Задача: Ленивый бесконечный генератор простых чисел

Напиши генератор 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 и выше, возвращая только простые

#домашка

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

Лучшие статьи @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 дизайнер

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

Асинхронность js

Читать 👨‍💻

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

Как работать с форматом JSON в HTML и JavaScript?

Читать 👨‍💻

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

HTML тег video

Читать 👨‍💻

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

Фреймворк foundation

Читать 👨‍💻

#css | #теория

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

Перейти к макету 🧑‍💻

#практика | #макет

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

Имеет три круга (красный, жёлтый, зелёный).
При клике на кнопку «Старт» начинает переключать цвета в цикле:
Красный → Жёлтый → Зелёный → Жёлтый → Красный …
Каждый цвет горит заданное время:
Красный — 3 секунды
Жёлтый — 1 секунда
Зелёный — 3 секунды
После нажатия кнопки «Стоп» светофор останавливается на текущем цвете.
Перезапуск с кнопки «Старт» продолжает с текущего цвета, а не с начала.

Усложнение:
Сделать, чтобы при изменении размера окна светофор автоматически масштабировался и занимал 30% от ширины экрана, сохраняя правильные пропорции кругов и расстояния между ними.

#домашка

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

Лучшие статьи @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. Графический дизайнер

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

Полезные сss функции 1 часть

Читать 👨‍💻

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

HTML <template> и <slot> — динамический контент без фреймворков

Раньше, чтобы повторно вставлять куски HTML, приходилось дублировать код или генерировать его в JS строками.
Но есть два тега, которые сильно упрощают задачу: <template> и <slot>.

1. <template> — заготовка для HTML
Этот тег не отображается на странице, пока вы явно не вставите его содержимое через JavaScript.
Пример:

<template id="card-template">
  <div class="card">
    <h3></h3>
    <p></p>
  </div>
</template>

<div id="container"></div>

<script>
  const template = document.getElementById('card-template');
  const container = document.getElementById('container');

  const data = [
    { title: "Карточка 1", text: "Первое описание" },
    { title: "Карточка 2", text: "Второе описание" }
  ];

  data.forEach(item => {
    const clone = template.content.cloneNode(true);
    clone.querySelector('h3').textContent = item.title;
    clone.querySelector('p').textContent = item.text;
    container.appendChild(clone);
  });
</script>

Что происходит:
template.content — это "невидимый" фрагмент HTML.
cloneNode(true) копирует весь его контент.
Мы изменяем текст и вставляем в DOM.

2. <slot> — динамическое содержимое в Web Components
<slot> используется внутри кастомных элементов, чтобы вставлять туда любой HTML снаружи.
Пример:

<template id="user-card">
  <div class="user-card">
    <slot name="avatar"></slot>
    <slot name="info"></slot>
  </div>
</template>
<script>
  class UserCard extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      const template = document.getElementById('user-card');
      shadow.appendChild(template.content.cloneNode(true));
    }
  }
  customElements.define('user-card', UserCard);
</script>

<user-card>
  <img slot="avatar" src="avatar.png" width="50">
  <div slot="info">Имя: Тигран</div>
</user-card>

Что происходит:
Создаём кастомный элемент <user-card>.
Внутри шаблона <slot> указывает, куда вставлять содержимое.
Атрибут slot у дочерних элементов определяет, в какой слот они попадут.
Когда применять
Генерация повторяющихся блоков (карточки, списки, таблицы).
Создание переиспользуемых UI-компонентов без библиотек.
В связке с Web Components для сложных интерфейсов.

#полезности #html

CSS @supports - что это и как использовать?

Читать 👨‍💻

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

Font-stretch css

Читать 👨‍💻

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