Магазин открыток Sunil
Прошло почти 2 месяца курса разработки программного обеспечения в школе Flatiron, и я готов начать свой первый этап проекта.
Идея у меня была простая — создать сайт карточного аукциона для моих коллекционных карточек (карт YuGiOh), которые я собирал с 7-го класса. Я уже начал сортировать свои карты, чтобы выставить их на продажу на eBay, когда мне пришла в голову идея использовать это в качестве идеи проекта для курса.
Начиная
У меня уже было представление о том, как должна выглядеть моя веб-страница, поэтому первое, что я сделал, — это открыл Microsoft Paint и нарисовал черновик того, как будет выглядеть конечный продукт.
Основные цвета франшизы Yugioh — синий и красный. Поэтому вверху страницы будет большой синий баннер с названием страницы (Sunil’s Card Shop) и логотипом Yugioh. Под ним будут две кнопки. Один, чтобы показать карты, доступные для аукциона, и другой, чтобы представить новую карту для аукциона. Под баннером будет тело веб-страницы с красным фоном.
HTML и CSS
Как только у меня в голове сложилось изображение веб-страницы, перенесенное на бумагу, пришло время начать создавать ее с нуля. Это означает, что нужно начинать с файла HTML и стилизовать этот файл с помощью CSS. Во время курса во Flatiron я узнал о библиотеках стилей, а просмотрев пример проекта, выполненного инструктором по Flatiron, я открыл для себя веб-сайт materializecss.com. С помощью этого веб-сайта я смог создать свою веб-страницу и оформить ее так, как я себе представлял. Я начал с панели навигации и баннера. На веб-странице materializecss я искал панель навигации и нашел стиль, с которым хотел работать. Оттуда оставалось только скопировать предоставленный код непосредственно в мой HTML-документ и добавить собственное содержание. У меня был мой заголовок в левом верхнем углу, мой логотип из изображений Google в центре баннера и две кнопки под ним и слева. Когда я работал над баннером, мне пришло в голову, что, поскольку это сайт аукциона, на странице, вероятно, должен быть таймер обратного отсчета, чтобы обозначить окончание аукциона. Поэтому я разместил таймер в той же строке, что и две кнопки, но выровнял его по правой стороне страницы.
База данных
После того, как веб-страница была создана, мне нужно было придать ей функциональность. Чтобы сделать это, сначала мне нужно было бы создать базу данных для работы веб-страницы. Я создал файл db.json, который будет действовать как мой сервер, а не использовать общедоступный API. Я сделал это, потому что карты, которые будут отображаться на веб-странице, являются моими собственными, поэтому мне нужно будет записать свои собственные данные.
Внутри моего файла db.json был объект «карточки». Этот объект содержал массив объектов, и каждый из этих объектов относился к карточке с информацией об этой карточке. Терминал.
JavaScript
Когда мой сервер настроен и работает, пришло время добавить функциональность моей странице. Сначала нужно было настроить функцию «DOMContentLoaded». Я знал, что когда страница загружается, я хотел, чтобы тело страницы было пустым, чтобы на экране был только красный фон. Я также хотел, чтобы мой таймер играл в баннере.
document.addEventListener('DOMContentLoaded',()=›{
начать обратный отсчет()
})
функция обновления страницы () {
main.innerHTML = ''
}
«Основным» в этом коде является элемент div тела, который я хотел сделать пустым при загрузке страницы.
После того, как страница загрузилась, мне нужно было активировать две кнопки, поэтому я начал с кнопки «Просмотреть коллекцию».
Все, что я хотел, чтобы кнопка делала при нажатии, это извлекала все карты с сервера и запускала функцию для каждого объекта карты.
Функция, которую я запускал для каждого объекта, заключалась в отображении каждого объекта в виде «карточки» в HTML-документе в виде неупорядоченного списка.
Каждая карточка становилась элементом ul, а внутреннее содержимое элемента записывалось непосредственно в функцию.
Каждая карточка затем добавлялась к «основному» div в теле и заполняла веб-страницу при нажатии кнопки просмотра коллекции.
Теперь, когда карты были созданы и отображены на странице, мне нужно было дать пользователю возможность делать ставки на карту. Каждая карта начиналась со ставки в 5 долларов и содержала кнопку «Ставка», которая увеличивала текущую ставку на 5 долларов. Это было просто сделано внутри функции карты рендеринга путем добавления прослушивателя событий к кнопке ставки, которая будет изменять текстовое содержимое «текущей ставки» каждый раз, когда кнопка будет нажата. Как только ставка была обновлена, отдельная функция также запускала метод «POST», который обновлял мой сервер новой «текущей ставкой».
Каждая карта также содержала кнопку «выкуп», которая позволяла пользователю приобрести карту по цене выше ставки. Цель создания этой кнопки, в дополнение к имитации опции eBay «купить сейчас», состояла в том, чтобы дать мне повод создать функцию метода «УДАЛИТЬ» для объектов моей карты.
Отправка формы
Далее была кнопка «Аукцион новой карты». Я хотел, чтобы при нажатии кнопки карточки исчезали с экрана, а их место занимала форма. Затем пользователь мог заполнить форму, чтобы отправить свою карту на аукцион. Когда форма была отправлена, она возвращала предварительный просмотр карты в нижней части экрана. После этого, если они снова нажимали кнопку просмотра коллекции, форма исчезала и заменялась карточками, а новая карточка добавлялась в нижнюю часть экрана.
Чтобы начать этот процесс, я добавил к кнопке прослушиватель событий, который запускал бы функцию «createNewCard» при нажатии. Эта функция начнется с запуска «функции pageRefresh», а затем создаст элемент формы. Содержимое этого элемента было записано непосредственно в функцию. В конце элемента была кнопка, по нажатию которой отправлялась форма.
При отправке формы будет запущена новая функция «newCardObj».
Эта функция создаст новый объект карты и запустит 2 разные функции с этим новым объектом. Во-первых, он отобразит эту новую карточку в HTML-документе. Затем он запускал метод «POST» и обновлял сервер новой картой.
Работа над этим проектом была настоящим опытом. 3 месяца назад я и представить себе не мог, что создам что-то настолько интерактивное с нуля. Flatiron School, ее инструкторы и репетиторы оказали мне замечательную помощь в моем путешествии к тому, чтобы стать инженером-программистом. Хотя эта веб-страница относительно проста. Я с нетерпением жду того, что я смогу сделать для своих будущих проектов. Для всех, кто хотел бы посмотреть на мой код, ссылку на мой репозиторий GitHub можно найти здесь: https://github.com/SunyDoo/Phase1-Final-Project.
Спасибо за чтение!
Сунил
