До сих пор в программе разработки программного обеспечения Flatiron я еженедельно выполнял все задания, используя npm install/npmtest или bundle/rspec. Теперь этот новый проект для завершения Фазы 1 должен был быть создан мной самостоятельно, без каких-либо тестов или чего-либо еще, что привело бы меня к тому, что я делаю неправильно здесь. Я был так потерян, но я нашел свой путь. Итак, позвольте мне провести вас через это со мной.
Мой проект для фазы 1 представлял собой приложение Cat Fact, в котором я использовал API для извлечения данных и переноса их на HTML-страницу, показывающую один факт за раз. Я использовал функцию выборки, чтобы получить данные из API, добавить в DOM, проверить, работает ли функция, и после применения к странице удалить элемент, когда пользователь использует мою функцию {btnFact.onclick =()=› }для создания нового факта из данных внутри API.
Cat Facts позволяет пользователю наводить курсор на кнопки «Нравится» и «Не нравится», которые изменят отображение кошки из GIF-изображения счастливого кота с сердечками и любовью с курсором над «Нравится». Если пользователь наведет курсор на кнопку «Не нравится», GIF-ка изменится на GIF-анимацию злого кота. Я часами смотрел кошачьи GIF-файлы, чтобы найти идеальных кошек для использования в этом приложении, у меня есть три собственных кота, поэтому было очень сложно не опубликовать просто свое собственное изображение. Я был рад узнать, что для этого используется ярлык HTML. Я использовал ‹button id=”like” class=”btn-like” onmouseover=”changeCat(false)”›Like‹/button› и ‹button id="dislike" class= ”btn-dislike” onmouseover=”changeCat(true)”›Dislike‹/button› что-то настолько простое в реализации, что мое приложение выглядит намного лучше!
Делая это приложение, у меня было так много ЧТО!?! моменты. Один включался, когда моя функция выборки не перехватывала данные. Я пытался пройти лекцию, которая показала нам, как закончить проект за 1 час. Через пять минут я его не понял — потому что (спасибо моему инструктору за указание) в выбранном мной API не было никаких других данных, кроме .fact, а в его примере в лекции использовалось .setup (исправить было так же просто, как использовать слова fact.fact).
Кроме того, использование CSS и небольшая, а может быть, и ОЧЕНЬ большая помощь опытных ютуберов, которые продемонстрировали то, что мне просто не нравилось, — помогли мне добраться до нескольких последних коммитов, «Последних штрихов». Я вернулся к своему последнему проекту для Этапа 0 (создание личного веб-сайта с использованием javascript/html/css), чтобы проверить исходный код некоторых из этих CSS, чтобы увидеть еще одно приукрашивание was{ фон: URL(cat.jpg); фоновый повтор: без повтора; background-size: auto;}. Я запустил этот CSS-код, и мой очаровательный кошачий фон не покрывал страницу. Это потому, что я не запомнил этот код {background-size: cover;}. Я был так благодарен одноклассникам и инструкторам по slack и piazza, которые помогли мне дойти до конца. Я с гордостью могу сказать, что успешно извлек свои данные с помощью API, получил результат, создал удобную платформу, которая меняет информацию по клику, удаляя предыдущие данные. Я люблю узнавать что-то новое каждый день, и мне было очень интересно заниматься этим проектом.
