Я менял свои идеи 6 раз, прежде чем пришел к такому выводу для своего сайта. Мне было весело делать это, хотя по сравнению с классной работой, ведущей к этому. Учебная программа истощает лабораторные работы, и я задаюсь вопросом, сколько я на самом деле сохраняю. Со свободой, которую дал мне этот проект, я был рад просмотреть курсовую работу и провести собственное исследование для своего собственного видения.
Я хотел создать что-то, что позволило бы мне включить мою настоящую профессиональную работу из фотографии, но это не сработало и усложнило мне задачу. Я столкнулся с парой трудностей, прежде чем решил сделать этот веб-сайт, но вот мы здесь. Как вы понимаете, вы можете сказать, что я немного фанат Marvel. Я создал всплывающее окно и добавил функцию в функцию «DOMContentLoaded», чтобы выполнить одно из требований. Я получил эти изображения из обычного открытого поиска изображений в Интернете. Первая проблема, с которой я столкнулся, это тот факт, что все эти картинки были разных размеров. Я просмотрел много разных видео о том, как выстроить их в ряды, и столкнулся с другой проблемой. Я пробовал разные типы кода, но они не выстраивались должным образом, пока не понял, что мне не хватает закрывающего тега ‹/div›. Даже после исправления этой проблемы я не смог найти ничего, что помогло бы мне даже с размерами изображений. Я решил обрезать изображения по кругу и сохранил их в папке внутри проекта.
Сначала я проделал много работы с CSS и потратил время на то, чтобы выглядеть так, как мне представлялось, прежде чем приступить к кодированию JS, потому что то, что я хотел сделать, было очень простым. Я начал с того, что сделал так, чтобы изображения влияли на наведение курсора, кнопка «Найти мстителя» воздействовала на наведение, стилизовал фон и убедился, что он адаптируется к веб-сайту и созданию модального окна.
Когда дело дошло до работы с JS, я создал функцию, которая делала модальное всплывающее окно при загрузке страницы с двумя функциями, чтобы оно исчезло. Вы можете нажать на закрытие (x) в углу или щелкнуть в любом месте за пределами поля всплывающего окна. Я сделал так, чтобы кнопка «Найти Мстителя» была отключена при загрузке страницы и отключается после ее однократного использования. Это привело к функции добавления прослушивателя событий к изображениям, которые сделали кнопку «Найти мстителя» снова доступной для использования. Кнопка подключена к API, который выбирает случайные местоположения, и я выбрал часть информации, чтобы проиллюстрировать только город, расположенный в контейнере под кнопкой в виде ‹h3›.
Особенности, которые иллюстрирует мой веб-сайт, — это модальное всплывающее окно при загрузке страницы (в качестве предупреждения), которое нужно щелкнуть. Щелчок по одному из мстителей, чтобы определить их местоположение, что делает кнопку, подключенную к API для случайных местоположений, включенной. После создания местоположения выбранного вами Мстителя кнопка отключается, пока вы не нажмете на следующего Мстителя.
