Привет разработчикам! Я хотел поделиться с вами своим последним проектом веб-разработки, PocketSpotApp.

PocketSpotApp — это веб-приложение для фитнеса, которое позволяет пользователям искать упражнения для определенных групп мышц. Он был создан с использованием JavaScript, HTML и CSS.

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

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

Что касается общего дизайна, я хотел создать чистый и визуально привлекательный интерфейс, в котором было бы легко ориентироваться. Чтобы достичь этого, я использовал элементы HTML, такие как списки и формы, а также пользовательские стили CSS для создания цельного внешнего вида.

В целом, работа над PocketSpotApp была отличным опытом обучения, который позволил мне еще больше развить свои навыки в JavaScript, HTML и CSS. Я рад видеть, куда меня приведет этот проект, и с нетерпением жду возможности заняться будущими проектами веб-разработки.

Ссылка Github на PocketSpotApp

Разработан

Кори Уильямс

Требования

  • HTML
  • JavaScript
  • css

Код

Чтобы получить данные о фитнесе для PocketSpotApp, я использовал выборку JSON для получения информации из API, предоставленного api-ninjas.com. Это включало настройку запроса GET и обработку обещания, возвращаемого функцией выборки.

Как только данные были успешно извлечены, я использовал методы манипулирования DOM для отображения содержимого на странице. Это включало выбор соответствующих элементов из документа HTML и обновление их внутреннего HTML данными из API. Я также использовал функции JavaScript для циклического просмотра данных и динамического создания новых элементов по мере необходимости. Это позволило мне эффективно отображать информацию в четкой и организованной форме для пользователя.

Как это работает

Функции

  1. Поиск группы мышц: позволяет пользователям искать упражнения, нацеленные на определенные группы мышц.
  2. Персональные рекомендации: предоставляет пользователям персонализированные рекомендации по упражнениям на основе их целей в фитнесе и предпочтений.
  3. База данных упражнений: содержит множество упражнений с подробными инструкциями и видеодемонстрациями.
  4. Адаптивный дизайн: без проблем работает на различных устройствах с адаптивным макетом, который адаптируется к разным размерам экрана.
  5. Функция интерактивного поиска: позволяет пользователям легко фильтровать упражнения по группам мышц и другим критериям.
  6. Фитнес-цели: В комплект входит диаграмма с подробными рекомендациями по количеству подходов, повторений, отдыху и интенсивности желаемых фитнес-целей.