HTML-CSS-Project/chapter9.html at main · TulyXPlatform/HTML-CSS-Project · 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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chapter 9: HTML Events</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<h2 class="chapter-header">Chapter 9: HTML EVENTS</h2>

<!-- Window Events -->
<div class="tag-section">
<h3>Window Events</h3>
<div class="tag-demo">
<div class="head-demo">
<p>
<h5>onload Event</h5>
<body onload="alert('Page is loaded!')">
<h1>This is a heading</h1>
</body>
</p>
<p>
<h5>onresize Event</h5>
<body onresize="alert('You have resized the window!')">
<h1>Resize the browser window</h1>
</body>
</p>
</div>
</div>
</div>

<!-- Form Events -->
<div class="tag-section">
<h3>Form Events</h3>
<div class="tag-demo">
<div class="head-demo">
<p>
<h5>onfocus Event</h5>
First name: <input type="text" onfocus="this.style.background='yellow'" />
</p>
<p>
<h5>onblur Event</h5>
Enter name: <input type="text" id="fname" onblur="alert('Hi '+this.value)" />
</p>
<p>
<h5>onchange Event</h5>
<select onchange="alert('You selected: '+this.value)">
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Mercedes">Mercedes</option>
<option value="Volvo">Volvo</option>
</select>
</p>
<p>
<h5>oninput Event</h5>
<input type="text" oninput="document.getElementById('out').innerHTML='You wrote: '+this.value" />
<p id="out"></p>
</p>
</div>
</div>
</div>

<!-- Keyboard Events -->
<div class="tag-section">
<h3>Keyboard Events</h3>
<div class="tag-demo">
<div class="head-demo">
<p>
<h5>onkeydown Event</h5>
<input type="text" onkeydown="alert('Key pressed')" />
</p>
<p>
<h5>onkeyup Event</h5>
<input type="text" onkeyup="this.value=this.value.toUpperCase()" placeholder="Type name..." />
</p>
<p>
<h5>onkeypress Event</h5>
<input type="text" onkeypress="alert('Key pressed')" />
</p>
</div>
</div>
</div>

<!-- Mouse Events -->
<div class="tag-section">
<h3>Mouse Events</h3>
<div class="tag-demo">
<div class="head-demo">
<p>
<h5>onclick Event</h5>
<button onclick="alert('Button clicked')">Click Me</button>
</p>
<p>
<h5>ondblclick Event</h5>
<button ondblclick="alert('Button double clicked')">Double Click Me</button>
</p>
<p>
<h5>onmousemove Event</h5>
<p onmousemove="enlarge(this)" style="font-size:16px; display:inline-block; padding:10px; border:1px solid #000; width:300px;">Move mouse over this text to enlarge font</p>
</p>
<p>
<h5>onmousedown & onmouseup Events</h5>
<p id="p1" onmousedown="this.style.color='red'" onmouseup="this.style.color='blue'">
Click and hold here. Release to change color.
</p>
</p>
<p>
<h5>onmouseover & onmouseout Events</h5>
<p onmouseover="this.style.fontSize='32px'" onmouseout="this.style.fontSize='20px'">
Hover over this text to enlarge font. Move out to reset.
</p>
</p>
</div>
</div>
</div>

<!-- Clipboard Events -->
<div class="tag-section">
<h3>Clipboard Events</h3>
<div class="tag-demo">
<div class="head-demo">
<p>
<h5>oncopy Event</h5>
<input type="text" value="Try copying this" oncopy="alert('Copied!')" />
</p>
<p>
<h5>oncut Event</h5>
<input type="text" value="Try cutting this" oncut="alert('Cut!')" />
</p>
<p>
<h5>onpaste Event</h5>
<input type="text" value="Try pasting here" onpaste="alert('Pasted!')" />
</p>
</div>
</div>
</div>
<script>
const maxFontSize = 32; // maximum font size
const minFontSize = 16; // original font size

function enlarge(x) {
  var oldFontSize = parseFloat(window.getComputedStyle(x).fontSize);
  if(oldFontSize < maxFontSize){
    x.style.fontSize = (oldFontSize + 2) + "px";
  }
}

function resetSize(x){
  x.style.fontSize = minFontSize + "px";
}
</script>
</body>
</html>