Задача на TypeScript

Дан массив задач:

type Task = { id: number; title: string; priority: 'low' | 'medium' | 'high' };

const tasks: Task[] = [
  { id: 1, title: 'Do laundry', priority: 'low' },
  { id: 2, title: 'Finish project', priority: 'high' },
  { id: 3, title: 'Buy groceries', priority: 'medium' },
];

Отсортируй задачи по приоритету: сначала high, потом medium, потом low.

#домашка

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

Лучшие статьи @free_html_lessons:
1. Toast Notifications на чистом css
2. Как браузер рисует сайт: что такое layout, paint и reflow
3. Поисковая оптимизация для начинающих

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

Лучшие дизайн вакансии @job_webdesign:
1. Дизайнер мобильных приложений
2. UI/UX Designer
3. UX/UI дизайнер

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

Как валидировать формы на JavaScript

Многие начинающие верстальщики ограничиваются required, type="email" и pattern="". Это удобно, но часто недостаточно. Гибкая валидация требует JavaScript.

Простой пример валидации email

HTML:
<form id="myForm">
  <input type="email" name="email" placeholder="Введите email" required />
  <button type="submit">Отправить</button>
</form>

JS:

const form = document.getElementById("myForm");

form.addEventListener("submit", (e) => {
  e.preventDefault();

  const emailInput = form.email;
  const email = emailInput.value;

  if (!email.includes("@") || !email.includes(".")) {
    alert("Пожалуйста, введите корректный email");
    emailInput.focus();
    return;
  }

  alert("Форма успешно отправлена");
  form.reset();
});

Варианты валидации
1. HTML-проверка через pattern:

<input type="text" pattern="[A-Za-z]{3,}" title="Только латиница, минимум 3 буквы">

2. JS: input.validity
js

if (!emailInput.validity.valid) {
  alert("Некорректный email");
}

3. JS: setCustomValidity()

emailInput.setCustomValidity("Пожалуйста, проверьте email");

Работает только с формами, которые потом отправляются нативно (form.submit() без preventDefault).

Дополнительные советы
Используй trim() при проверке, чтобы убрать пробелы.

Проверяй не только email, но и пароли, телефоны, checkbox'ы.

Добавляй визуальные подсказки (цвета, сообщения).

Почему это важно?
Плохая валидация = сломанные формы, негативный UX и ошибки на бэке.
Хорошая валидация:
- помогает пользователю
- экономит время
- делает интерфейс понятным

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

inverse text-sizing with attr

Смотреть на codepen 👨‍💻

#практика

Атрибут novalidate

Читать 👨‍💻

#html | #теория

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

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

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

HTML + CSS – Слайдер-карточка

Условие:
Сверстай компонент карточки, в которой:
- есть фото (например, 300x200),
- поверх фото затемнение при ховере,
- и стрелки по бокам (влево / вправо),
- при клике на стрелку — карточка меняется (слайд).

Усложнение: Сделай без JS, только на CSS (используй :checked, label, input[type=radio], position: absolute и т.п.).

#домашка

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

Лучшие статьи @free_html_lessons:
1. inverse text-sizing with attr
2. Атрибут novalidate
3. Как валидировать формы на JavaScript

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

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

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