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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Цвет от мышки</title>
    <style>

        body { height: 100vh; margin: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; }
        h1 { color: white; font-family: sans-serif; }
    </style>
</head>
<body>
    <h1>Поводи мышкой!</h1>
    <script>
        let body = document.querySelector('body')
        body.addEventListener('mousemove', changeColor)

        function changeColor(event) {
            let w = window.innerWidth
            let h = window.innerHeight
            let mouseX = event.clientX / (w / 255)
            let mouseY = event.clientY / (h / 255)
            body.style.backgroundColor = 'rgb(' + mouseX + ',' + mouseY + ', 40)'
        }
    </script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Клики по блокам</title>
    <style>

        body { margin: 0; overflow-x: hidden; display: flex; flex-wrap: wrap; }
        div { width: 50%; height: 50vh; display: flex; justify-content: center; align-items: center;
              font-size: 2em; color: white; cursor: pointer; transition: all ease .25s; }
        .box1 { background-color: #28c7fa; }
        .box2 { background-color: #775ada; }
        .box3 { background-color: #002651; }
        .box4 { background-color: #ff304f; }
    </style>
</head>
<body>
    <div class="box1">Нажми на меня!</div>
    <div class="box2">Нажми на меня!</div>
    <div class="box3">Нажми на меня!</div>
    <div class="box4">Нажми на меня!</div>
    <script>
        let boxes = document.getElementsByTagName('div')

        function boxClicked(event) {
            event.target.textContent = 'Больше не нажимай!'
            event.target.style.backgroundColor = 'tomato'
        }

        for (let i = 0; i < boxes.length; i++) {
            boxes[i].addEventListener('click', boxClicked)
        }
    </script>
</body>
</html>

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

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

        body { height: 100vh; margin: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; }
        span { color: black; font-size: 5em; cursor: pointer; transition: border-bottom ease .15s; }
        span:hover { text-shadow: 1px 1px 0 black, 2px 2px 0 black, 3px 3px 0 black, 4px 4px 0 black; }
    </style>
</head>
<body>
    <h1>
        <span>H</span><span>E</span><span>L</span><span>L</span><span>O</span>
    </h1>
    <script>
        let body = document.querySelector('body')
        let word = document.querySelectorAll('span')
        body.addEventListener('mousemove', changeColor)

        for (let i = 0; i < word.length; i++) {
            word[i].addEventListener('click', changeDirection)
        }

        function changeColor(event) {
            let r = event.clientX / (window.innerWidth / 255)
            let g = event.clientY / (window.innerHeight / 255)
            let b = 80
            for (let i = 0; i < word.length; i++) {
                word[i].style.color = 'rgb(' + r + ',' + g + ',' + b + ')'
                r += r * 0.25
                g += g * 0.25
                b += b * 0.05
            }
        }

        function changeDirection(event) {
            let element = event.target
            if (!element.style.borderBottom) {
                element.style.borderBottom = '15px solid red'
            } else {
                element.style.borderBottom = ''
            }
        }
    </script>
</body>
</html>

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

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

let count = 0
let countText = document.querySelector('#count')

document.querySelector('#plus').addEventListener('click', function () {
    count++
    countText.textContent = count
})

document.querySelector('#reset').addEventListener('click', function () {
    count = 0
    countText.textContent = count
})

let input = document.querySelector('#task')
let list = document.querySelector('#list')

document.querySelector('#add').addEventListener('click', function () {
    if (input.value === '') {
        return
    }
    let li = document.createElement('li')
    li.textContent = input.value
    li.addEventListener('click', function () {
        li.remove()
    })
    list.append(li)
    input.value = ''
})

let button = document.querySelector('#theme')

button.addEventListener('click', function () {
    document.body.classList.toggle('dark')
})