В этой статье вы узнаете, как создать приложение-генератор советов от frontendmentor.io на Javascript с использованием вызовов API.

В наши дни быть фронтенд-разработчиком — это портфолио, которое вы создали за эти годы. Наличие отличного портфолио является обязательным условием для получения работы мечты, о которой вы всегда мечтали.

Независимо от того, какие языки вы знаете или какие баллы у вас были в колледже, если вы не можете применить свои знания в реальном мире, вам не стоит браться за эту работу.

В этом уроке я помогу вам создать отличный проект, который вы сможете продемонстрировать в своем портфолио, чтобы сделать его лучше, чем когда-либо. Все активы, которые я буду использовать для этого проекта, будут доступны на frontendmentor.io. Создайте свою учетную запись и загрузите активы этого проекта. Вот рабочий сайт, который я развернул на страницах Github. Давайте начнем!

Создание базовой структуры папок Проекта:

После загрузки ресурсов в zip-файл разархивируйте файлы и создайте два файла самостоятельно и добавьте их в указанный index.html, один — style.css для стилей и другой — script.js для выполнения вызовов API. Вот структура папок проекта после этого.

Делаем HTML-разметку проекта:

После создания структуры папок произведем разметку проекта. Это необходимая разметка проекта.

В HTML я поместил весь проект в контейнерdiv, чтобы стилизовать тело проекта и использовать его для центрирования карточки с помощью свойства flexbox.

Элемент card содержит цену, номер цены и кнопку изменения. элемент цитаты содержит совет, который будет динамически изменяться API, указанным в файле проекта Readme.md. Теперь займемся стилизацией элементов в соответствии со стилем, заданным в папке с дизайном. Элемент change содержит изображение кнопки, которую необходимо использовать в соответствии с изображением предварительного просмотра.

Делаем стиль проекта:

Элемент контейнера:

Теперь займемся стилями проекта. Во-первых, мы стилизуем контейнер. Вот как мы должны это делать.

Обратите внимание, что я также импортировал шрифт из Google Fonts. Мы должны использовать этот шрифт в элементе цитаты и присвоить ему семейство шрифтов Manrope.

Я сделал его гибким контейнером и центрировал дочерний элемент, который является картой. Я также придал ему цвет, который был на изображении предварительного просмотра проекта, и сделал переполнение скрытым, чтобы скрыть полосы прокрутки со страницы.

Обратите внимание, что я задал универсальному элементу поля и отступы, равные 0. Таким образом, элемент-контейнер может занимать все пространство страницы.

Элемент карты:

Это стиль, присвоенный элементу карты:

Размеры карты должны быть такими, чтобы соотношение сторон было как можно ближе к изображению на превью, а также элементы внутри карты должны максимально точно соответствовать изображению.

На приведенном выше изображении я сделал его гибким контейнером и присвоил свойству justify-content значение space-around. Таким образом, мы получаем пространство вокруг каждого элемента, даже вокруг терминальных элементов.

Я использовал отступ таким образом, чтобы разместить кнопку на границе карты. Я также дал ему семейство шрифтов Manrope, как упоминалось ранее.

номер совета и элементы совета:

Это стиль, который должен быть добавлен к тексту совета и совета Num соответственно. Я использовал цвета в соответствии с style-guide.md и применил размер шрифта по мере необходимости.

элемент контейнера цитаты:

Это стиль тега контейнера цитаты:

Я жестко задал высоту и ширину элемента цитаты таким образом, чтобы текст не выходил за пределы элемента. Я также сделал его гибким контейнером для центрирования текста по горизонтали и вертикали.

Делаем разделительный элемент:

Вот как сделать разделительный элемент. Я сделал значение по умолчанию для рабочего стола, а для мобильных устройств установлю из медиа-запросов.

Я дал этому элементу фон изображения и сделал так, чтобы он закрывал элемент и не повторялся.

Делаем кнопку:

Вот как мы должны сделать кнопку проекта.

ChangeIcon — это кнопка, которую мы получили из имеющихся у нас ресурсов, а change — это контейнер, который я использовал, чтобы получить положение кнопки прямо на элементе карты. Я сделал указатель курсора в div изменения, также я использовал свойство position, чтобы расположить div на границе элемента карты.

Делая все это, мы получаем UI проекта, как на превью-изображении рабочего стола. Теперь мы будем использовать медиа-запросы, чтобы сделать сайт адаптивным для мобильных устройств.

Добавление медиазапросов в проект:

На изображении выше я отрегулировал размер текста, чтобы он соответствовал меньшему экрану. Я также изменил размер элементов, чтобы сделать то же самое.
Обратите внимание, что я также изменил фоновое изображение элемента-разделителя на изображение, удобное для мобильных устройств. Я сделал это, потому что это нужно было сделать по вызову. Если вы не делаете это для frontendmentor.io, я бы посоветовал не менять изображение.

Теперь посмотрим, как получить совет от API, приведенный в файле Readme.md.

Делаем логику проекта с помощью JavaScript:

Вот полный JavaScript проекта

На изображении выше я объявил переменные из элементов DOM. «num» и «совет» будут использоваться для изменения значений элементов «adviceNum» и «advice» соответственно. «change» прослушает событие click и вызовет функцию getAdvice. Эта функция выполнит вызов API, а также обновит значение переменных. Это функция.

Это асинхронная функция, поскольку она должна ждать ответа от API. Затем он устанавливает ответ на соответствующую переменную DOM.

Заключение:

Это конец проекта, мы его завершили и вот как он выглядит.

В следующей статье я расскажу, как разместить проект на страницах GitHub. Надеюсь, вам понравился урок о том, как сделать приложение-генератор советов. Подписывайтесь на меня в Твиттере, когда я пишу там о веб-разработке, а также подписывайтесь на меня здесь, на Medium, чтобы получать новости о моей последней статье.

Хорошего дня😉.