Независимо от того, пытаетесь ли вы изучить JavaScript или просто хотите добавить карточку профиля на свой сайт, эта статья научит вас, как ее создать.
Карточка профиля — это карточка, которая содержит информацию, относящуюся к пользователю. Карточка профиля, которую мы будем создавать, будет отображать имя пользователя, местоположение, сводку, телефон и адрес электронной почты.
Чтобы заполнить нашу карточку профиля контентом, мы будем вызывать следующие конечные точки API https://randomuser.me и https://picsum.photos.
Давайте начнем.
Сначала создадим следующие файлы:
HTML
Нашу карточку профиля можно разделить на две части. В одном разделе будет отображаться заголовок героя, в другом — информация о пользователе.
index.html
CSS
Теперь пришло время сделать нашу карточку профиля красивой. Сначала мы импортируем семейство шрифтов Lato из Google Fonts.
@import url('https://fonts.googleapis.com/css?family=Lato:300,700');
Для заголовка героя карточки профиля мы будем импортировать изображение с https://picsum.photos/. Одна интересная вещь в использовании этого API заключается в том, что он позволяет нам устанавливать размеры случайного изображения в зависимости от пути и параметров, которые мы определяем в URL-адресе. Например, для нашего проекта нам понадобится изображение размером 480 на 382 пикселя. Итак, все, что нам нужно сделать, это: https://picsum.photos/480/382. Чтобы получить случайное изображение, нам просто нужно добавить ?random к URL-адресу. Мы разместим изображение с помощью свойства background-image и установим background-size в cover, чтобы изображение не оставляло пробелов в своем контейнере. Мы также установим background-position на center, чтобы изображение было центрировано по горизонтали и вертикали.
Мы также будем использовать CSS Flexbox для выравнивания 3 элементов, которые будут содержать телефон, сотовый телефон и адрес электронной почты пользователя. Сначала мы установим свойство display родителя этих 3 элементов (.labels) равным flex.
.labels { display: flex; }
Далее мы применим следующие свойства CSS к трем элементам внутри .labels.
.labels .label { flex-grow: 1; }
flex-grow определяет, как оставшееся пространство внутри .labels должно быть распределено между 3 элементами. Установив flex-grow в 1, мы равномерно распределяем оставшееся пространство внутри .labels между каждым из 3 элементов.
Подробнее о CSS flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
styles.css
Javascript
Теперь мы подошли к последнему компоненту нашей карточки профиля. Чтобы заполнить нашу карточку профиля пользовательским контентом, мы будем использовать https://randomuser.me. Randomuser — это бесплатный API с открытым исходным кодом для генерации случайных пользовательских данных.
Мы будем использовать Fetch API (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) для извлечения контента из Randomuser API.
Поскольку мы делаем запрос GET, нам нужно только передать URL-адрес Fetch API. Чтобы получить данные от одного случайного пользователя, нам нужно добавить параметр запроса results=1 к URL-адресу.
Документация по API Randomuser.me: https://randomuser.me/documentation
Затем нам нужно преобразовать ответ, который мы получаем от randomuser.me, в JSON и, наконец, передать эти данные в наш модуль, который мы создадим, под названием ProfileCard.
const ProfileCard = (() => {
// insert code here
})();
В модуль ProfileCard мы добавим несколько селекторов, предназначенных для тех частей нашего HTML, которые мы хотели бы заполнить текстом и изображениями.
Мы также добавим метод с именем setData в модуль ProfileCard.
setData – это метод, который будет вызываться при получении данных из API Randomuser. У него есть параметр data, который будет данными, которые мы получим от API. Затем мы используем эти данные для заполнения выбранных узлов HTML.
script.js
Попробуй
Наша карточка профиля готова! Либо это? Одна вещь, которую мы не учли при создании нашей карточки профиля, — сделать ее адаптивной. Другие вещи, которые вы можете изменить, — это содержимое, цвет и шрифт карточки профиля. Не стесняйтесь изменять его по своему вкусу!
