<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Information</title>
</head>
<body>
<div id="user-info">
<!-- Сюда будет выводиться информация о пользователе -->
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const apiKey = 'fhrw-5lhk-otos-m8z2-wsaq-b78a';
const url = 'https://qerko.com/api/user';
// Формируем запрос к API
fetch(url, {
headers: {
'Authorization': `Bearer ${apiKey}`
}
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
displayUserInfo(data);
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
});
// Функция для отображения информации о пользователе на странице
function displayUserInfo(userInfo) {
const userInfoElement = document.getElementById('user-info');
userInfoElement.innerHTML = `
<h2>User Information</h2>
<p>Name: ${userInfo.name}</p>
<p>Email: ${userInfo.email}</p>
<p>Age: ${userInfo.age}</p>
<!-- Другие данные о пользователе, если они есть -->
`;
}
});
</script>
</body>
</html>