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

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

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

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

Напиши генератор 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 | #полезности