Learning

Предыдущие части: Часть 1

6. Поиск книг

Уровень: 2 — средний

Описание: приложение для поиска книг по названию, автору и т.д. Найденные книги и соответствующая информация о них выводится в виде списка.

Возможности

  • Ввод запроса в поле ввода.
  • Запрос отправляется через API, который возвращает массив найденных книг и данные о них (название, автор, год публикации, обложка и др.).
  • Пользователь видит книги в виде списка.

Дополнительные фичи

  • Для каждой книги добавьте ссылку на внешний источник, где можно увидеть о ней больше информации.
  • Реализуйте адаптивный дизайн.
  • Добавьте анимированный прелоадер

Ссылки и ресурсы

Google Books API

Пример проекта

BookSearch-React

7. Игра на запоминание

Уровень: 2 — средний

Описание: в этой игре нужно запоминать изображения на карточках. Вы переворачиваете карточку, кликнув по ней, чтобы увидеть изображение. Далее, среди других карточек вам нужно отыскать ту, у которой такое же изображение.

Возможности:

  • На экране отображается сетка n на n (n — это целое число). Изначально все карточки представлены «рубашкой» кверху (состояние hidden).
  • Есть кнопка для старта игры, после нажатия на которую запускается таймер.
  • Пользователь может нажать на любую карточку, чтобы увидеть скрытое изображение (изменить состояние на visible). Изображение остаётся видимым пока пользователь не нажмёт на другую карточку.

При нажатии на следующую карточку:

  • Если есть совпадение, то обе карточки выходят из игры (скрываются или остаются постоянно в состоянии visible).
  • Если совпадений нет, то обе карточки переворачиваются обратно, рубашкой вверх (состояние hidden).
  • Когда все совпадения найдены, пользователь видит сообщение с поздравлением и время, которое заняло прохождение игры.

Дополнительные фичи

  • Добавьте уровни сложности. Повысить сложность можно ограничив время на прохождение и/или увеличить количество карточек.
  • Сделайте возможность увидеть статистику (количество побед/поражений, лучшее время на каждом уровне сложности).

Ссылки и ресурсы

Wikipedia

Примеры проекта

Flip — card memory game

SMB3 Memory Card Game

8. Генератор Markdown таблиц

Уровень: 2 — средний

Описание: приложение, которое конвертирует обычную таблицу с данными, загруженную пользователем (опционально), в таблицу формата Markdown.

Возможности

  • Создавать HTML таблицы с заданным количеством рядов и колонок.
  • Вводить текст в каждую ячейку.
  • Генерировать Markdown таблицу на основе HTML таблицы.
  • Предпросмотр Markdown таблицы.

Дополнительные фичи

  • Пользователь может скопировать в буфер обмена Markdown таблицу, нажав кнопку.
  • Добавить новый ряд или колонку в указанном месте.
  • Полностью удалить ряд или колонку.
  • Определить выравнивание текста (влево, по центру, вправо) для ячейки, колонки, ряда или таблицы в целом.

Ссылки и ресурсы

Пример проекта

Tables Generator / Markdown Tables

9. String Art

Уровень: 2 — средний

Описание: решение этой задачи научит вас создавать простую анимированную графику с помощью геометрии и анимационных алгоритмов.

На экране плавно движется разноцветная линия, касаясь границ экрана, она отталкивается и меняет направление движения.

По мере движения линии она оставляет за собой след из 10–20 линий, которые постепенно исчезают.

Используйте чистый HTML/CSS/JavaScript. Использование сторонних библиотек не допускается.

Возможности

  • Прорисовка разноцветной линии начинается в случайной позиции в пределах границ окна.
  • Каждые 20 мс прорисовывается новая копия линии в новой позиции. Позиция определяется по траектории (инкрементное расстояние от предыдущей строки на основе конечных точек).
  • Когда любая из конечных точек касается границ экрана, направление меняется на угол, определённый случайным числом.
  • Постепенное затухание интенсивности предыдущих линий происходит так, что видимыми остаются последние 10–20 линий.

Дополнительные фичи

  • Добавьте возможность задавать длину линии и скорость.
  • Запустите несколько линий в пределах одного окна, двигающихся с разной скоростью и по разным траекториям.

Ссылки и ресурсы

Пример проекта

Это похожий проект, но с маленьким окном и отсутствием разных цветов. Daniel Cortes

10. To-Do App

Уровень: 2 — средний

Описание: классическое To-Do приложение, в котором пользователь записывает список дел.

Возможности

  • Пользователь видит поле для ввода запланированного «дела».
  • Пользователь подтверждает ввод нажатием клавиши enter или кнопки, а затем видит, что «дело» добавлено корректно.
  • Возможность пометить «дело» как выполненное.
  • Удалить «дело» нажатием кнопки (или нажатием по нему в списке).

Дополнительные фичи

  • Редактирование «дел».
  • Просмотр всех выполненных «дел».
  • Просмотр списка активных «дел».
  • Отображение даты создания «дела».
  • Хранение записей после закрытия приложения и восстановление при повторном запуске.

Ссылки и ресурсы

localStorage

Пример проекта

Не пропустите наиболее сложные и интересные задачи в следующей части.

Перевод статьи Florin Pop: Here are some app ideas you can build to level up your coding skills

Предыдущая статьяСоздание чат-приложения в режиме реального времени с Vue.js, Socket.IO и Node.js
Следующая статьяАлгоритм XGBoost: пусть он царствует долго!