diff --git a/index.html b/index.html
index 225923c..edcd793 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
- Selecting Elements - JavaScript DOM Manipulation
+ Events - JavaScript DOM Manipulation
@@ -10,9 +10,14 @@
Box 1
+
Box 2
+
+
+
+
Box 3
@@ -23,10 +28,18 @@
Box 3
Box 4
+
+
Input
+
+
diff --git a/script-before.js b/script-before.js
deleted file mode 100644
index e69de29..0000000
diff --git a/script-done.js b/script-done.js
new file mode 100644
index 0000000..1b7af11
--- /dev/null
+++ b/script-done.js
@@ -0,0 +1,98 @@
+function showAlert() {
+ alert('Alert by Function Call');
+}
+
+const clickMeBtn = document.getElementById('btn-click-me');
+
+clickMeBtn.onclick = function(event) {
+ event.stopPropagation();
+ event.stopImmediatePropagation();
+ console.log('Button Clicked');
+}
+
+clickMeBtn.onmouseover = function() {
+ console.log('Mouse Over');
+}
+
+const box1 = document.getElementById('box1');
+
+box1.addEventListener('click', function() {
+ console.log('Clicked on Box 1');
+})
+
+clickMeBtn.addEventListener('click', function() {
+ console.log('Another Click Event');
+});
+
+const link = document.getElementById('link');
+
+link.addEventListener('click', function(event) {
+ event.preventDefault();
+});
+
+var box4 = document.getElementById('box4');
+
+box4.addEventListener('click', function(event) {
+ if(event.target.tagName === 'LI') {
+ console.log('Clicked on a List Item');
+ }
+});
+
+const inputs = document.querySelectorAll('input');
+const submitBtn = document.querySelector('button[type=submit]');
+
+inputs[0].addEventListener('change', function(event) {
+ console.log(event.target.value);
+});
+
+submitBtn.addEventListener('click', function(event) {
+ event.preventDefault();
+ if(inputs[0].value === '' || inputs[1].value === '') {
+ alert('Input Field cannot be Empty!');
+ } else {
+ var input0Data = inputs[0].value;
+ var input1Data = inputs[1].value;
+ console.log('Your Name:', input0Data, 'And Your Email:', input1Data);
+ }
+});
+
+document.addEventListener('keydown', function(event) {
+ console.log('Key Down Event');
+ console.log('Pressed Key: ' + event.key);
+ console.dir(event);
+});
+
+document.addEventListener('keypress', function() {
+ console.log('Key Press Event');
+});
+
+document.addEventListener('keyup', function() {
+ console.log('Key Up Event');
+});
+
+clickMeBtn.addEventListener('mouseover', function() {
+ console.log('On Mouse Over using addEventListener');
+});
+
+clickMeBtn.addEventListener('mouseout', function() {
+ console.log('On Mouse Out');
+});
+
+window.addEventListener('load', function() {
+ console.log('Your Page Fully Loaded!');
+});
+
+document.addEventListener('DOMContentLoaded', function() {
+ console.log('Your Markup is Ready!');
+});
+
+var img1 = document.querySelector('img[alt=valid-img]');
+var img2 = document.querySelector('img[alt=invalid-img]');
+
+img1.addEventListener('load', function() {
+ console.log('Image 1 Has Successfully Loaded!');
+});
+
+img2.addEventListener('error', function(event) {
+ console.log('Image Cannot be loaded!');
+});
diff --git a/script.js b/script.js
index e69de29..0c86571 100644
--- a/script.js
+++ b/script.js
@@ -0,0 +1 @@
+// Start Writing Code Here
diff --git a/style.css b/style.css
index 9cd1ca7..25a6a8c 100644
--- a/style.css
+++ b/style.css
@@ -9,6 +9,26 @@ body {
background-color: #e3e3e3;
}
+button {
+ background-color: #fff;
+ border: none;
+ text-transform: uppercase;
+ padding: 8px 15px;
+ cursor: pointer;
+ border-radius: 4px;
+ font-weight: 900;
+ margin-top: 10px;
+}
+
+input {
+ border: none;
+ display: block;
+ margin: 10px auto;
+ width: 100%;
+ padding: 8px 15px;
+ border-radius: 4px;
+}
+
.wrapper {
display: flex;
margin: 0 auto;
@@ -72,6 +92,16 @@ body {
background-color: #4CAF50;
}
+.images {
+ margin-top: 10px;
+}
+
+.images img {
+ display: block;
+ margin: 0 auto;
+ padding: 10px 0;
+}
+
.black-bg {
background-color: #000;
}