Предыдущие части: Часть 1
6. Поиск книг
Уровень: 2 — средний
Описание: приложение для поиска книг по названию, автору и т.д. Найденные книги и соответствующая информация о них выводится в виде списка.
Возможности
- Ввод запроса в поле ввода.
- Запрос отправляется через API, который возвращает массив найденных книг и данные о них (название, автор, год публикации, обложка и др.).
- Пользователь видит книги в виде списка.
Дополнительные фичи
- Для каждой книги добавьте ссылку на внешний источник, где можно увидеть о ней больше информации.
- Реализуйте адаптивный дизайн.
- Добавьте анимированный прелоадер
Ссылки и ресурсы
Пример проекта
7. Игра на запоминание
Уровень: 2 — средний
Описание: в этой игре нужно запоминать изображения на карточках. Вы переворачиваете карточку, кликнув по ней, чтобы увидеть изображение. Далее, среди других карточек вам нужно отыскать ту, у которой такое же изображение.
Возможности:
- На экране отображается сетка n на n (n — это целое число). Изначально все карточки представлены «рубашкой» кверху (состояние
hidden). - Есть кнопка для старта игры, после нажатия на которую запускается таймер.
- Пользователь может нажать на любую карточку, чтобы увидеть скрытое изображение (изменить состояние на
visible). Изображение остаётся видимым пока пользователь не нажмёт на другую карточку.
При нажатии на следующую карточку:
- Если есть совпадение, то обе карточки выходят из игры (скрываются или остаются постоянно в состоянии
visible). - Если совпадений нет, то обе карточки переворачиваются обратно, рубашкой вверх (состояние
hidden). - Когда все совпадения найдены, пользователь видит сообщение с поздравлением и время, которое заняло прохождение игры.
Дополнительные фичи
- Добавьте уровни сложности. Повысить сложность можно ограничив время на прохождение и/или увеличить количество карточек.
- Сделайте возможность увидеть статистику (количество побед/поражений, лучшее время на каждом уровне сложности).
Ссылки и ресурсы
Примеры проекта
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 или кнопки, а затем видит, что «дело» добавлено корректно.
- Возможность пометить «дело» как выполненное.
- Удалить «дело» нажатием кнопки (или нажатием по нему в списке).
Дополнительные фичи
- Редактирование «дел».
- Просмотр всех выполненных «дел».
- Просмотр списка активных «дел».
- Отображение даты создания «дела».
- Хранение записей после закрытия приложения и восстановление при повторном запуске.
Ссылки и ресурсы
Пример проекта
Не пропустите наиболее сложные и интересные задачи в следующей части.
Перевод статьи Florin Pop: Here are some app ideas you can build to level up your coding skills
