MaxInterview - javascript online aufgaben

showing results for - "javascript online aufgaben"
31 Jan 2021
1<!DOCTYPE html>
2<html lang="en">
3 
4<head>
5    <title>Drag & Drop</title>
6</head>
7 
8<body>
9    <!-- Drag & Drop -->
10    <div id="div1" ondrop="drop(event)" ondragover="checkDrop(event)" class="dropField">
11        <h1>Drag & Drop</h1>
12    </div>
13    <!-- Switch -->
14    <div class="switchContainer">
15        <label class="switch">
16            <input id="switch" type="checkbox" onclick="switchText(event)">
17            <span class="slider round"></span>
18        </label>
19        <p id="switchText">Disallowed</p>
20    </div>
21 
22    <script>
23        function switchText(event) {
24            let text = "Disallowed";
25            if (event.target.checked) {
26                text = "Allowed";
27            }
28            document.getElementById('switchText').innerHTML = text;
29        }
30 
31        function checkDrop(event) {
32            if (document.getElementById('switch').checked) {
33                event.preventDefault();
34            } else {
35                event.stopPropagation();
36            }
37        }
38 
39        function drop(event) {
40            event.preventDefault();
41            console.log(event)
42                //Whatever you want to do after Drop
43        }
44    </script>
45 
46    <style>
47        .dropField {
48            width: 100%;
49            height: 10em;
50            text-align: center;
51            border: 3px black solid;
52        }
53        /* Switch */
54         
55        .switchContainer {
56            margin-top: 1em;
57            text-align: center;
58        }
59         
60        #switchText {
61            font-size: 20px;
62        }
63         
64        .switch {
65            position: relative;
66            display: inline-block;
67            width: 60px;
68            height: 34px;
69        }
70        /* Hide default HTML checkbox */
71         
72        .switch input {
73            opacity: 0;
74            width: 0;
75            height: 0;
76        }
77        /* The slider */
78         
79        .slider {
80            position: absolute;
81            cursor: pointer;
82            top: 0;
83            left: 0;
84            right: 0;
85            bottom: 0;
86            background-color: #ccc;
87            -webkit-transition: .4s;
88            transition: .4s;
89        }
90         
91        .slider:before {
92            position: absolute;
93            content: "";
94            height: 26px;
95            width: 26px;
96            left: 4px;
97            bottom: 4px;
98            background-color: white;
99            -webkit-transition: .4s;
100            transition: .4s;
101        }
102         
103        input:checked+.slider {
104            background-color: #2196F3;
105        }
106         
107        input:focus+.slider {
108            box-shadow: 0 0 1px #2196F3;
109        }
110         
111        input:checked+.slider:before {
112            -webkit-transform: translateX(26px);
113            -ms-transform: translateX(26px);
114            transform: translateX(26px);
115        }
116        /* Rounded sliders */
117         
118        .slider.round {
119            border-radius: 34px;
120        }
121         
122        .slider.round:before {
123            border-radius: 50%;
124        }
125    </style>
126</body>
127 
128</html>
129
source