JS Задача: Объедините два массива по ID

Описание:
Учитывая два массива arr1 и arr2, верните новый массив joinedArray. Все объекты в каждом из двух входных массивов будут содержать поле id, которое имеет целочисленное значение.
joinedArray - это массив, сформированный путем объединения arr1 и arr2 на основе их идентификационного ключа.
Длина joinedArray должна быть равна длине уникальных значений id. Возвращаемый массив должен быть отсортирован в порядке возрастания на основе идентификационного ключа.
Если данный идентификатор существует в одном массиве, но не в другом, то единственный объект с таким идентификатором должен быть включен в результирующий массив без изменений.
Если два объекта имеют общий идентификатор, их свойства должны быть объединены в один объект:
Если ключ существует только в одном объекте, эта единственная пара ключ-значение должна быть включена в объект.
Если ключ включен в оба объекта, значение в объекте из arr2 должно переопределять значение из arr1.

Пример:

Input: 
arr1 = [
    {"id": 1, "x": 1},
    {"id": 2, "x": 9}
], 
arr2 = [
    {"id": 3, "x": 5}
]
Output: 
[
    {"id": 1, "x": 1},
    {"id": 2, "x": 9},
    {"id": 3, "x": 5}
]

#домашка

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

Лучшие статьи @free_html_lessons:
1. Где брать заказы фрилансеру
2. Макет для тренировки (EASYearn)
3. CSS анимации текста при скролле

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

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

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

Создаём красивую кнопку загрузки с анимацией на CSS

Эффектная кнопка загрузки сделает ваш интерфейс более современным и приятным для пользователя. Вот простой способ её реализации:
HTML:

<button class="loading-button">
  <span class="loading-text">Загрузка...</span>
  <span class="spinner"></span>
</button>

.loading-button {
  position: relative;
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
}
.spinner {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 15px;
  height: 15px;
  border: 2px solid transparent;
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  transform: translateY(-50%);
}
@keyframes spin {
  0% { transform: rotate(0deg) translateY(-50%); }
  100% { transform: rotate(360deg) translateY(-50%); }
}

Теперь у вашей кнопки есть анимация загрузки, которая мгновенно привлекает внимание.

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

Слова программиста

Читать 🧑‍💻

#полезности

Как создавать динамические стили с помощью SCSS-циклов

SCSS-циклы упрощают работу с однотипными стилями, например, при задании разных цветов для элементов.

SCSS:

$button-colors: (primary: #3498db, success: #2ecc71, danger: #e74c3c);
.button {
  @each $name, $color in $button-colors {
    &--#{$name} {
      background-color: $color;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  }
}

Генерируемый CSS:

.button--primary {
  background-color: #3498db;
  color: #fff;
}
.button--success {
  background-color: #2ecc71;
  color: #fff;
}
.button--danger {
  background-color: #e74c3c;
  color: #fff;
}

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

Как использовать псевдокласс :has() для навигации

С помощью :has() можно улучшить UX меню. Например, сделать так, чтобы активный раздел подсвечивался, даже если вы находитесь на дочерней странице.

HTML:

<nav>
  <ul>
    <li><a href="/">Главная</a></li>
    <li>
      <a href="/blog">Блог</a>
      <ul>
        <li><a href="/blog/post1">Пост 1</a></li>
        <li><a href="/blog/post2">Пост 2</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS:

nav li:has(a.active) > a {
  font-weight: bold;
  color: #007bff;
}

Если на любой из дочерних страниц будет класс active, родительский пункт меню автоматически подсветится. Это полезно для сложных сайтов.

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

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

Градиенты в тексте — это модный тренд, который можно использовать не только для заголовков, но и для адаптивных интерфейсов.

HTML:

<h1 class="gradient-text">Смотри, я градиентный!</h1>

CSS:

.gradient-text {
background: linear-gradient(90deg, #ff6ec4, #7873f5, #00d4ff);
-webkit-background-clip: text;
color: transparent;
font-size: clamp(2rem, 5vw, 4rem);
}
clamp() обеспечивает адаптивный размер текста.
linear-gradient() позволяет настроить цвета и направление.

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

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

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

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

JS Задача: Event Emitter

Описание:
Разработайте класс EventEmitter. Этот интерфейс аналогичен (но с некоторыми отличиями) интерфейсу, описанному в Node.js или интерфейсу назначения событий в DOM. EventEmitter должен позволять подписываться на события и отправлять их.

Ваш класс EventEmitter должен иметь следующие два метода:
subscribe - Этот метод принимает два аргумента: имя события в виде строки и функцию обратного вызова. Эта функция обратного вызова будет вызвана позже, когда событие будет отправлено.
У события должно быть несколько слушателей для одного и того же события. При отправке события с несколькими обратными вызовами каждый из них должен вызываться в том порядке, в котором они были подписаны. Должен быть возвращен массив результатов. Можно предположить, что ни один из обратных вызовов, передаваемых для subscribe, не является ссылочно идентичным.
Метод subscribe также должен возвращать объект с методом unsubscribe, который позволяет пользователю отказаться от подписки. При его вызове обратный вызов должен быть удален из списка подписок, а значение undefined должно быть возвращено

Пример:

Input: 
actions = ["EventEmitter", "emit", "subscribe", "subscribe", "emit"], 
values = [[], ["firstEvent"], ["firstEvent", "function cb1() { return 5; }"],  ["firstEvent", "function cb1() { return 6; }"], ["firstEvent"]]
Output: [[],["emitted",[]],["subscribed"],["subscribed"],["emitted",[5,6]]]
Explanation: 
const emitter = new EventEmitter();
emitter.emit("firstEvent"); // [], no callback are subscribed yet
emitter.subscribe("firstEvent", function cb1() { return 5; });
emitter.subscribe("firstEvent", function cb2() { return 6; });
emitter.emit("firstEvent"); // [5, 6], returns the output of cb1 and cb2

#домашка

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

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

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

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

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

Вопросы по css на собеседовании

Читать 👨‍💻

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

SEO фишки

Читать 👨‍💻

#полезности

Полезные расширения Chrome для верстки

Читать 👨‍💻

#полезности

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

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

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

JS Задача: Список задач (To-Do List)

Читать 👨‍💻

#домашка

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

Лучшие статьи @free_html_lessons:
1. Вопросы по css на собеседовании
2. SEO фишки
3. Полезные расширения chrome

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

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

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