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

Описание:
У вас есть массив объектов, представляющих пользователей. Каждый объект содержит следующие свойства: 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() для извлечения имён пользователей.

#домашка

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

Лучшие статьи @free_html_lessons:
1. Сокращение текста на css
2. Советы для ускорения верстки
3. Selection and range

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

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

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

Как сделать таймер обратного отсчета на js?

Читать 👨‍💻

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

Где брать заказы фрилансеру

Читать 👨‍💻

#фриланс

Макет для тренировки (EASYearn)
Средняя сложность. Лендинг и личный кабинет

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

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

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() позволяет настроить цвета и направление.

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