Reduce | Frontend Advent #4

Задача:

Сверстать планировщик нового года.

Как выполнить задание:

Это front-end приложение на React. Вся вёрстка уже готова, в этом задании вам нужно заниматься только логикой. Задание состоит из трёх этапов. На каждом этапе нужно убирать комментарии в коде и дописывать логику. Следуйте инструкциям ниже.

1 этап. Суммирование.

В файле App.tsx напишите расчёт общего бюджета в переменной totalBudget через reduce. Затем раскомментируйте вёрстку с использованием этой переменной.

2 этап. Фильтрация.

В файле App.tsx напишите подсчёт выполненных задач с помощью filter или reduce. Затем раскомментируйте вёрстку с использованием этой переменной.

3 этап. Формирование объекта.

Вам нужно сгруппировать все задачи по категориям. В результате должен получиться вот такой объект:

  {
    food: [
      { id: 1, title: 'Заказать еду', type: 'food', cost: 5000, completed: true },
    ],
    decoration: [
        { id: 2, title: 'Украсить елку', type: 'decoration', cost: 2000, completed: false },
        { id: 2, title: 'Украсить квартиру', type: 'decoration', cost: 3000, completed: false },
    ], ...
  }

Для этого в файле App.tsx напишите логику формирования объекта tasksByType с помощью reduce. Затем раскомментируйте вёрстку с использованием этой переменной.

Запуск проекта:

• npm i - установка библиотек
• npm run dev - сборка для разработки

Дополнительные материалы:

Документация - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
Видео - https://youtube.com/shorts/5gxHdwd44Gc?feature=share