html/lab6/task7/index.html - master - Coderdev/web-static-labs

html/lab6/task7/index.html
61 строка2 KB
Coderdev
12 май 2026, 12:37
12 май 2026, 12:37d8ecd0f
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Профили пользователей</title>
</head>
<body>
    <h2>Загрузка профиля</h2>
    <button id="load-user">Загрузить профиль</button>
    <p>Сохранено профилей: <span id="user-count">0</span></p>
    <a href="profiles_list.html">Посмотреть сохраненные профили</a>

    <div id="current-user"></div>

    <script>
        const loadBtn = document.getElementById('load-user');
        const countSpan = document.getElementById('user-count');
        const userDisplay = document.getElementById('current-user');

        function updateCount() {
            const profiles = JSON.parse(localStorage.getItem('saved_profiles')) || [];
            countSpan.textContent = profiles.length;
        }

        async function fetchUser() {
            try {
                const response = await fetch('https://randomuser.me/api/');
                const data = await response.json();
                const user = data.results[0];

                const userData = {
                    id: user.login.uuid,
                    name: `${user.name.first} ${user.name.last}`,
                    email: user.email,
                    photo: user.picture.medium
                };

                userDisplay.innerHTML = `
                    <img src="${userData.photo}">
                    <p>${userData.name}</p>
                    <button onclick='saveUser(${JSON.stringify(userData)})'>Сохранить этот профиль</button>
                `;
            } catch (error) {
                console.error('Ошибка:', error);
            }
        }

        window.saveUser = (userData) => {
            const profiles = JSON.parse(localStorage.getItem('saved_profiles')) || [];
            profiles.push(userData);
            localStorage.setItem('saved_profiles', JSON.stringify(profiles));
            updateCount();
            userDisplay.innerHTML = '<p>Профиль сохранен!</p>';
        };

        loadBtn.addEventListener('click', fetchUser);
        window.addEventListener('storage', updateCount);
        updateCount();
    </script>
</body>
</html>