Внешние проекты среднего уровня

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

  1. Машина случайных цитат

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

Вот ссылка на проект. Пожалуйста, посмотрите.
https://codepen.io/salmankhalid187/full/jxVobr

2. Показать местную погоду

Эта задача состояла из двух шагов. На первом этапе вы получаете свое географическое местоположение с устройства, а на втором этапе вы должны использовать API погоды, чтобы получить обновление погоды. Кроме того, вы должны добавить изображение внизу показаний, которое соответствует погодным условиям.

Вот ссылка на проект. Пожалуйста, посмотрите.
https://codepen.io/salmankhalid187/full/ELZXXz

3. Просмотр Википедии

Здесь я использовал API Википедии, чтобы получить соответствующий список статей из Википедии. Здесь есть еще одна кнопка, которая ведет пользователя к случайной статье в Википедии. Здесь я попытался сделать полностью адаптивный пользовательский интерфейс с помощью начальной загрузки, а также использовал вызовы ajax для использования API Википедии.

Вот ссылка на проект. Пожалуйста, посмотрите.
https://codepen.io/salmankhalid187/pen/YLZpVJ

4. API Twitch TV

Здесь я отобразил список пользователей, которые регулярно проводят трансляции на TwitchTv. Я использовал вызовы ajax, которые я изучил в предыдущем разделе, чтобы получить информацию о каждом канале, включая его ссылку, логотип и подробности. Я использовал альтернативные цветовые схемы, чтобы сделать список каналов более заметным, а также использовал начальную загрузку, чтобы сделать его отзывчивым и удобным для пользователя.

Вот ссылка на проект. Пожалуйста, посмотрите.
https://codepen.io/salmankhalid187/full/aGWxmg

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

Вы можете отслеживать мой прогресс по сертификации Front End Development Certification здесь. Спасибо за чтение.