Practicing on JS BOM

AhmadAshrf · web-flow · commit 38e1a7221c26 · 2022-04-04T15:58:50.000+02:00
diff --git a/JS BOM Practice/index.html b/JS BOM Practice/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Javascript BOM Practice</title>
+</head>
+<body>
+    <input type="text" placeholder="Enter a Key" id="enteredKey">
+    <br>
+    <input type='button' value="Click on Me" id="clicked">
+    <br>
+    <input type="button" value="Start Clock" id="Clock">
+    <br>
+    <div id="current-clock" style="text-align: center; font-weight: bold;"></div>
+    <script src="main.js"></script>  
+</body>
+</html>
diff --git a/JS BOM Practice/main.js b/JS BOM Practice/main.js
@@ -0,0 +1,38 @@
+(function userInput() {
+    let input = window.document.getElementById('enteredKey')
+    input.addEventListener('keydown', (e) => {
+        alert('You Pressed: ' + e.key)
+    });
+}());
+
+
+(function userClicked() {
+    let clicked = window.document.getElementById('clicked')
+    clicked.addEventListener('click', (event) => {
+        if (event.button === 0) { // 0 = left click
+            alert('You Clicked Left Mouse Button')
+        } else if (event.button === 2) { // 2 = right click
+            alert('You Clicked Right Mouse Button')
+        } else { // 1 = middle click
+            alert('You Clicked Middle Mouse Button')
+        }
+    })
+}());
+
+
+window.document.addEventListener('keydown',(e) => {
+    if(e.altKey && e.key ==='w'){
+        alert('clock stopped..')
+        clearInterval(window)
+    }
+})
+
+window.document.getElementById('Clock').onclick = () => {
+    alert('Clock Started ...')
+    var currClock = window.document.getElementById('current-clock')
+    currClock.innerHTML = new Date().toLocaleTimeString()
+
+    setInterval(() => {
+        currClock.innerHTML = new Date().toLocaleTimeString()
+    }, 1000)
+};
