Привет разработчикам! Я хотел поделиться с вами своим последним проектом веб-разработки, 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 для циклического просмотра данных и динамического создания новых элементов по мере необходимости. Это позволило мне эффективно отображать информацию в четкой и организованной форме для пользователя.
Как это работает
Функции
- Поиск группы мышц: позволяет пользователям искать упражнения, нацеленные на определенные группы мышц.
- Персональные рекомендации: предоставляет пользователям персонализированные рекомендации по упражнениям на основе их целей в фитнесе и предпочтений.
- База данных упражнений: содержит множество упражнений с подробными инструкциями и видеодемонстрациями.
- Адаптивный дизайн: без проблем работает на различных устройствах с адаптивным макетом, который адаптируется к разным размерам экрана.
- Функция интерактивного поиска: позволяет пользователям легко фильтровать упражнения по группам мышц и другим критериям.
- Фитнес-цели: В комплект входит диаграмма с подробными рекомендациями по количеству подходов, повторений, отдыху и интенсивности желаемых фитнес-целей.