Управление элементами на странице. DOM, часть 3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clicker</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            background-color: red;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all ease .25s;
        }
        #game_box {
            height: 500px;
            width: 500px;
            background-color: #4056F4;
            display: flex;
            justify-content: space-around;
            flex-direction: column;
            align-items: center;
        }
        #score {
            width: 50%;
            background-color: white;
            text-align: center;
        }
        #clicker {
            background-color: #CE2D4F;
            cursor: pointer;
            transition: all ease 0.25s;
        }
        #clicker h1 {
            white-space: nowrap;
            color: white;
            padding: 1em;
        }
        .gameOver {
            font-size: 4em;
            padding: 1em;
            color: black;
            background-color: white;
            border-radius: 25px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="game_box">
        <div id="score">
            <h2>score: <span id="count">0</span></h2>
        </div>
        <div id="clicker"><h1>
            Click on me: <span>0</span> times!
        </h1></div>
    </div>
    <script>
let background = document.querySelector('body');
let clicker = document.querySelector('#clicker');
let clickerText = document.querySelector('#clicker span');
let gameBox = document.querySelector('#game_box');
let score = document.querySelector('#score #count');
let colors = ['#1eff00', '#83ff0f', '#ffd30f', '#ff9f0f', '#ff670f', '#ff3f0f', '#ff130f'];
let gameScore = 0;
let gameLen = colors.length * 5 + 5;

clickerText.textContent = gameLen;

clicker.addEventListener('click', gameEvent);

function gameEvent(event) {
    gameScore++
    gameLen--
    clickerText.textContent = gameLen;
    score.textContent = gameScore
    if (gameScore % 5 == 0) {
        changeColor()
    }
}

function changeColor() {
    let color = colors.pop();
    if (color == undefined) {
        gameOver()
    }
    background.style.backgroundColor = color;
}

function gameOver() {
    gameBox.remove();
    let done = document.createElement('div');
    done.className = 'gameOver';
    done.textContent = 'Congratulations you win the game! Your final score: ' + gameScore;
    background.append(done);
}
</script>
</body>
</html>

Открыть готовую страницу с ответом ↗

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Курсор-кружок</title>
    <style>

        body { height: 100vh; margin: 0; background-color: #f4fa9c; cursor: none; overflow: hidden; }
        #ball { width: 50px; height: 50px; position: fixed; top: 0; left: 0; background-color: #fc5185; border-radius: 50%; z-index: 2; }
        .dot { width: 50px; height: 50px; position: fixed; background-color: #ff004c; border-radius: 50%; transform: translate(-50%, -50%); }
    </style>
</head>
<body>
    <div id="ball"></div>
    <script>
        let ball = document.querySelector('#ball')
        let body = document.querySelector('body')

        document.addEventListener('mousemove', moveEvent)
        document.addEventListener('click', clickEvent)

        function moveEvent(event) {
            ball.style.top = event.pageY - ball.clientHeight / 2 + 'px'
            ball.style.left = event.pageX - ball.clientWidth / 2 + 'px'
        }

        function clickEvent(event) {
            let dot = document.createElement('div')
            dot.className = 'dot'
            dot.style.top = event.clientY + 'px'
            dot.style.left = event.clientX + 'px'
            body.append(dot)
        }
    </script>
</body>
</html>

Открыть готовую страницу с ответом ↗

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Text parallax</title>
    <style>

        body { margin: 0; }
        .parallax { height: 100vh; background-color: #071e3d; display: flex; justify-content: center; align-items: center; position: relative; }
        .cont { height: 2000px; background-color: #278ea5; }
        h1 { color: white; font-size: 4em; font-family: 'Trebuchet MS', Arial, sans-serif; }
        span { position: relative; }
        #line { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: 10px; background-color: #feff89; }
    </style>
</head>
<body>
    <div class="parallax">
        <h1 id="text"><span>Text</span> <span>Parallax</span></h1>
        <div id="line"></div>
    </div>
    <div class="cont"></div>
    <script>
        let wordOne = document.querySelector('#text span:nth-child(1)')
        let wordTwo = document.querySelector('#text span:nth-child(2)')
        let line = document.querySelector('#line')
        let linePosition = line.offsetLeft

        window.addEventListener('scroll', function () {
            let scrollY = window.scrollY
            wordOne.style.top = scrollY * 0.25 + 'px'
            wordTwo.style.top = -scrollY * 0.25 + 'px'
            line.style.left = linePosition + scrollY * 0.35 + 'px'
        })
    </script>
</body>
</html>

Открыть готовую страницу с ответом ↗

let progress = document.querySelector('#progress')

window.addEventListener('scroll', function () {
    let total = document.documentElement.scrollHeight - window.innerHeight
    progress.style.width = window.scrollY / total * 100 + '%'
})

let coords = document.querySelector('#coords')

document.addEventListener('mousemove', function (event) {
    coords.textContent = 'X: ' + event.clientX + ', Y: ' + event.clientY
})