workshop-2023/javascript/example02/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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>JavaScript II</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="description" content="" />
</head>

<body>
<h1>JavaScript II</h1>
<div id="buttons">
    <input type="button" onclick="makeSquare()" value="Zum Quadrat">
    <input type="button" onclick="makeCircle()" value="Zum Kreis">
    <input type="button" onclick="makeOrange()" value="Orange">
    <input type="button" onclick="makeBlue()" value="Blau">
    <input type="button" onclick="makeBigText()" value="Grosser Text">
    <input type="button" onclick="makeRegularText()" value="Normaler Text">
    <input type="button" onclick="makeSmallText()" value="Kleiner Text">
    <input type="button" onclick="makeFadeOut()" value="FadeOut">
    <input type="button" onclick="makeFadeIn()" value="FadeIn">
</div>

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

</body>

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

    function makeSquare()
    {
        div.style.width = '400px';
        div.style.height = '400px';
        div.style.borderRadius = '0px';
    }

    function makeCircle()
    {
        div.style.width = '400px';
        div.style.height = '400px';
        div.style.borderRadius = '400px';
    }

    function makeOrange()
    {
        div.style.backgroundColor = '#ff6600';
    }

    function makeBlue()
    {
        div.style.backgroundColor = '#336699';
    }

    function makeBigText()
    {
        div.style.fontSize = '30px';
    }

    function makeRegularText()
    {
        div.style.fontSize = '16px';
    }

    function makeSmallText()
    {
        div.style.fontSize = '6px';
    }

    function makeFadeIn()
    {
        let opacity = 0; // Initial opacity
        let interval = setInterval(function() {
            if (opacity < 1) {
                opacity += 0.1;
                div.style.opacity = opacity;
            } else {
                clearInterval(interval); // Stop the interval when opacity reaches 1
            }
        }, 50);
    }

    function makeFadeOut()
    {
        let opacity = 1; // Initial opacity
        let interval = setInterval(function() {
            if (opacity > 0) {
                opacity -= 0.1;
                div.style.opacity = opacity;
            } else {
                clearInterval(interval); // Stop the interval when opacity reaches 0
            }
        }, 50);
    }

</script>

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

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

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

</html>