Eco Tuft — это веб-страница, на которой объясняется, как использовать более экологичные альтернативы крафту.
Дата проекта: весна 2023 г.
Обзор проекта.Целью этого проекта было поделиться более экологичными альтернативами при разработке веб-сайта, использующего JavaScript и CSS, чтобы придать веб-странице чистый вид, который хорошо работает. Основными особенностями этого приложения были использование объектов в Javascript для отображения различной информационной графики и API, позволяющего пользователю взаимодействовать со страницей и находить то, что ему нужно.
Задача.Задача, которую должен был решить этот проект, заключалась в том, чтобы помочь кому-то найти более экологичные методы. Одной из таких практик было окрашивание растений, и есть раздел, где можно узнать о растениях, поэтому, если пользователь хочет выращивать их для окрашивания, он может узнать об этом. Задача разработки для этого проекта заключалась в том, чтобы создать текстовый ввод в документе HTML, чтобы пользователь мог искать, о каком растении он хотел бы узнать больше, а затем его растение искалось в API растений, а результаты заполнялись на HTML-странице. Опять же, я хотел, чтобы это была интерактивная веб-страница, поэтому я решил включить объекты, чтобы пользователь мог щелкнуть то, что он хочет увидеть, и веб-сайт покажет его.
Решение.Для этого проекта я начал с шаблона начальной загрузки и изменил его так, как мне хотелось. Я также начал использовать файл Javascript, с которым мы работали в классе, для национальных парков. Как только я нашел переменные и смог распечатать их на HTML-странице, пришло время выяснить, как добавить пользовательский ввод для поиска конкретных растений в API. Для этого шага мне нужно было какое-то руководство, поэтому я обратился к YouTube. Я посмотрел это видео, чтобы понять процесс поиска API на основе пользовательского ввода https://youtu.be/VJOQhYByzfM.
Вот первый файл Javascript, содержащий данные Plant API.
Два файла javascript, которые я использовал. Во-первых, это мой javascript-файл «базы данных», который содержит мои объекты, а во-вторых, это мой файл API Plant.
Следующей задачей для меня после разработки было получение макета там, где я хотел. Сначала каждая тема и информационная графика располагались в своем разделе и располагались по центру, и мне не нравились интервалы и то, сколько места они занимали. Поэтому, чтобы переместить макет, я использовал гибкий дисплей и изменил CSS, пока не был доволен результатами.
Последней важной частью процесса разработки являются результаты API. Эта часть была сложнее, чем я хотел. Я думаю, потому что в файле JS я создал div для каждого результата с помощью document.createElement(‘Div’), поэтому я не был уверен, как добавить класс к элементу div, чтобы добавить CSS. Если бы у меня было больше времени, я бы вернулся и сделал это.
Результаты: я бы сказал, что веб-страница была довольно успешной. К сожалению, из-за использования бесплатной версии API не все растения будут загружаться, а переменная default_image.original_url не всегда загружается, поэтому, когда она не загружается, она использует первое растение в API, которое является типом папоротника. Я научился использовать пользовательский ввод для поиска в API, чем очень горжусь. Я также понимаю, как лучше использовать объекты, и чувствую себя более уверенно в своих способностях к Javascript. Некоторые следующие шаги, которые я хотел бы повторить, — это размещение результатов в слайд-шоу или карусели.
Веб-страница:
API завода: https://perenual.com/docs/api
