-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
104 lines (90 loc) · 3.76 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Övningar i DOM-manipulation</title>
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
<style>
/* Du kan lägga till lite CSS-stilar här */
</style>
</head>
<body>
<h1>Övningar i DOM-manipulation. Skriv i js/main.js</h1>
<!-- Avsnitt 1: Klickhändelse -->
<section>
<h2>Klickhändelse</h2>
<button id="clickButton">Klicka på mig</button>
<p id="clickOutput">Klicka på knappen för att ändra denna text.</p>
</section>
<!-- Avsnitt 2: Mouseover-händelse -->
<section>
<h2>Mouseover-händelse</h2>
<div id="mouseoverDiv" style="width: 100px; height: 100px; background-color: lightblue;"></div>
<p id="mouseoverOutput">Hovra över den blå rutan.</p>
</section>
<!-- Avsnitt 3: Formulärvalidering -->
<section>
<h2>Formulärvalidering</h2>
<form id="validationForm">
<label for="email">E-post:</label>
<input type="email" id="email" name="email">
<span id="emailError" style="color: red;"></span>
<br>
<button type="submit">Skicka</button>
</form>
</section>
<!-- Avsnitt 4: Dynamisk lista -->
<section>
<h2>Dynamisk lista</h2>
<ul id="list">
<li>Post 1</li>
<li>Post 2</li>
<li>Post 3</li>
</ul>
<input type="text" id="listInput" placeholder="Ny post">
<button id="addItemButton">Lägg till post</button>
</section>
<!-- Avsnitt 5: Val av DOM-element -->
<section>
<h2>Val av DOM-element</h2>
<p id="selectParagraph">Detta är ett stycke som kan väljas.</p>
<ul>
<li class="selectListItem">Post 1</li>
<li class="selectListItem">Post 2</li>
<li class="selectListItem">Post 3</li>
</ul>
<div class="selectDiv" style="background-color: lightyellow;">Denna div kan väljas.</div>
</section>
<!-- Avsnitt 6: Ändra stilar -->
<section>
<h2>Ändra stilar</h2>
<button id="changeColorButton">Ändra färg</button>
<p id="colorChangeTarget">Klicka på knappen för att ändra färgen på denna text.</p>
</section>
<!-- Avsnitt 7: Lägga till och ta bort klasser -->
<section>
<h2>Lägga till och ta bort klasser</h2>
<p class="classDemo">Detta stycke kan få en klass tillagd eller borttagen.</p>
<button id="addClassButton">Lägg till klass</button>
<button id="removeClassButton">Ta bort klass</button>
</section>
<script>
// JavaScript-koden för eventlisteners och DOM-manipulation, exempel.
// Avsnitt 5: Val av DOM-element
const selectParagraph = document.getElementById('selectParagraph');
const selectListItems = document.querySelectorAll('.selectListItem');
const selectDiv = document.querySelector('.selectDiv');
// Avsnitt 6: Ändra stilar
const colorChangeButton = document.getElementById('changeColorButton');
const colorChangeTarget = document.getElementById('colorChangeTarget');
// Avsnitt 7: Lägga till och ta bort klasser
const classDemoParagraph = document.querySelector('.classDemo');
const addClassButton = document.getElementById('addClassButton');
const removeClassButton = document.getElementById('removeClassButton');
// Lägg till händelselyssnare och manipuleringskod för varje avsnitt i main.js
// Du kan använda variablerna ovanför för att välja element och utföra åtgärder på dem.
</script>
<script src="js/main.js"></script>
</body>
</html>