workshop-2023/javascript/example03/index.html at main · tuub/workshop-2023 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>JavaScript III</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="description" content="" />
</head>

<body>
<h1>JavaScript III</h1>
<div id="buttons">
    <input type="button" id="toggle-rotation" value="Start / Stop">
    <input type="button" id="toggle-direction" value="Rückwärts">
</div>

<div id="my-area">
    <span>Veränderung ist gut</span>
</div>
</body>

<script>
    let div = document.getElementById('my-area');

    let toggleRotationBtn = document.getElementById('toggle-rotation');
    let toggleDirectionBtn = document.getElementById('toggle-direction');

    let isRotating = false;
    let isRotatingForward = true;

    let runner;
    let degrees = 0;

    function startRotation () {
        runner = setInterval(function() {
            degrees++;

            let modifier = '+';
            if (!isRotatingForward) {
                modifier = '-';
            }

            div.style.transform = 'rotate(' + modifier + degrees + 'deg)';
        }, 10)
        isRotating = true;
    }

    function stopRotation () {
        clearInterval(runner);
        isRotating = false;
    }

    toggleRotationBtn.addEventListener('click', function() {
        if (!isRotating) {
            startRotation();
        } else {
            stopRotation();
        }
    })

    toggleDirectionBtn.addEventListener('click', function() {
        stopRotation();

        if (isRotatingForward === true) {
            isRotatingForward = false;
            toggleDirectionBtn.value = 'Vorwärts';
        } else {
            isRotatingForward = true;
            toggleDirectionBtn.value = 'Rückwärts';
        }

        startRotation()
    })

</script>

<style>
    #buttons {
        text-align: center;
    }

    #my-area {
        margin: 75px auto auto;
        background-color: #336699;
        height: 300px;
        width: 300px;
        line-height: 300px;
        color: #fff;
        font-size: 12px;
        text-align: center;
    }

    #my-area span {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
    }

</style>

</html>