Интерактивный веб-сайт, который извлекает данные из API для получения информации о стране и курсах конвертации валюты в режиме реального времени.
Дата проекта: весна 2023 г.
Обзор проекта. В финальном проекте моего курса Advanced Web Development мне было поручено использовать API, Vue.js, Node.js или другую платформу в сочетании со всем остальным, чему мы научились в течение семестра, чтобы создать Веб-сайт. Я создал веб-сайт поисковой системы Country Guide, используя 2 разных API, которые обеспечивали конвертацию валюты и данные о стране в режиме реального времени, а также Javascript для создания интерактивного образовательного веб-сайта.
Задача: хотя у меня частично были учебные пособия, которые помогли мне получить общее представление о работающей функции поиска, извлекающей информацию из базы данных, и API, обеспечивающем конвертацию валюты в реальном времени, они легко объединялись. в функциональном единственном проекте было сложной задачей. Еще одна проблема заключалась в том, чтобы разместить поиск по стране и конвертер валют на одной странице рядом друг с другом. После некоторых экспериментов я решил, что использование кнопок для связи между страницами было бы лучшим методом, но я пытался понять, как сделать так, чтобы кнопки соответствовали стилю и располагались в таком месте, которое не отвлекало бы от общего дизайна страницы. страница была очень сложной.
Решение:
Используя основу учебника, я создал две страницы отдельно. Используя свои знания CSS, JavaScript и HTML, я отредактировал результаты руководства, чтобы создать более унифицированный и более функциональный продукт, а также создал кнопки, связывающие две страницы вместе. Изначально я хотел, чтобы оба элемента располагались на одной странице рядом, но, к сожалению, я не мог понять, как это сделать, и мне пришлось использовать свои навыки решения проблем, чтобы придумать новое решение, которое было по-прежнему одинаково функциональна для той цели, которой я хотел, чтобы она служила. Используя CSS, я также добавил небольшие тени под каждым полем на обеих страницах, чтобы добавить единообразия и внешнего вида. Я также импортировал шрифт и изображение для страницы конвертера валют.
Ниже кнопки преобразования пользователь имеет доступ к кнопке «Назад». Первоначально у меня была кнопка «Назад», связанная с предыдущей историей страницы, но после дальнейшего тестирования я понял, что это вызовет проблему, если пользователь попытается получить доступ к конвертеру валют до ввода страны в строке поиска на главной странице. Чтобы решить эту проблему, я решил просто связать кнопку «Назад» с адресом страницы руководства по стране, чтобы она работала независимо от того, была ли история предыдущих посещений или нет. С эстетической точки зрения мне также нужно было придумать, как сделать так, чтобы новые кнопки, которые я добавил, хорошо вписывались в общий вид веб-сайта. Когда вы впервые добавляете кнопки на страницу, они неуклюже появляются в верхнем левом углу или на странице и прыгают, когда размер элементов смещается и изменяется во время взаимодействия. Используя CSS, я смог решить эту проблему, сгруппировав новую кнопку с полем на странице.
Результаты. Хотя все получилось не совсем так, как я себе представлял, я очень гордился тем, что смог сделать, и действительно многое узнал о том, как различные элементы страницы взаимодействуют друг с другом. . Сначала я был очень расстроен, потому что, что бы я ни делал, я просто не мог понять, как сделать так, чтобы это выглядело именно так, как я себе представлял, но после дальнейших размышлений я смог использовать свои творческие способности и навыки решения проблем, чтобы создать другое решение. свяжите оба компонента вместе. Если бы я продолжал улучшать свой веб-сайт в будущем, я хотел бы продолжать попытки разместить поисковую систему и конвертер валют на одной странице, а также конвертер валют, автоматически связанный с поиском по стране.
