Skip to content

Commit d961227

Browse files
author
Sonyl Nagale
committed
Custom event
1 parent ccff17e commit d961227

File tree

6 files changed

+2003
-0
lines changed

6 files changed

+2003
-0
lines changed

‎chapter-7/event-stream/example/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title></title>
7+
</head>
8+
9+
<body>
10+
<p class="date"></p>
11+
<p class="details"></p>
12+
<button>Click me!</button>
13+
<script src="index.js"></script>
14+
</body>
15+
16+
</html>

‎chapter-7/event-stream/example/index.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const myEvent = new Event('details')
2+
3+
document.querySelector('button').addEventListener('click', (e) => {
4+
document.querySelector('.date').innerHTML = `Hello! It is currently ${new Date()}.`
5+
myEvent.details = e
6+
document.dispatchEvent(myEvent)
7+
})
8+
9+
document.addEventListener('details', (e) => {
10+
document.querySelector('.details').innerHTML = `x: ${e.details.x} y: ${e.details.y}`
11+
})

‎chapter-7/event-stream/stickies/index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title></title>
7+
<link rel="stylesheet" type="text/css" href="style.css" />
8+
</head>
9+
10+
<body>
11+
<input class="box-color-input jscolor" type="text" placeholder="Sticky Color">
12+
<input class="box-color-note" type="text" placeholder="Sticky Note Message">
13+
<button class="box-creator-button">Create a Sticky!</button>
14+
15+
<div class="container"></div>
16+
17+
<div id="messageBox">
18+
<p>This sticky's color is <span id="color"></span> and its message is <span id="message"></span>.
19+
<p><button id="delete">Delete this sticky</button> <button id="close">Close</button></p>
20+
</div>
21+
22+
<script src="jscolor.js"></script>
23+
<script src="script.js"></script>
24+
</body>
25+
26+
</html>

0 commit comments

Comments
 (0)