Skip to content

Commit ead5dac

Browse files
zonayedpcazonayedpca
committed
Project File Ready
1 parent ba7e3a1 commit ead5dac

File tree

5 files changed

+145
-3
lines changed

5 files changed

+145
-3
lines changed

‎index.html

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,22 @@
22
<html lang="en" dir="ltr">
33
<head>
44
<meta charset="utf-8">
5-
<title>Selecting Elements - JavaScript DOM Manipulation</title>
5+
<title>Events - JavaScript DOM Manipulation</title>
66
<link rel="stylesheet" href="style.css">
77
</head>
88
<body>
99
<div class="wrapper">
1010
<div class="boxes">
1111
<div id="box1" class="box" data-atr="box1" data-extra="attrToRemove">
1212
<h4>Box 1</h4>
13+
<button id="btn-click-me" type="button" name="click">Click Me</button>
1314
</div>
1415
<div id="box2" class="box" data-atr="box2">
1516
<h4>Box 2</h4>
17+
<div class="images">
18+
<img src="https://via.placeholder.com/150x150" alt="valid-img">
19+
<img src="https://audkjskjghkfgdbgfbgjdfg.fhgfkdbgjdb/fbdsfjhbf.png" alt="invalid-img">
20+
</div>
1621
</div>
1722
<div id="box3" class="box" data-atr="box3">
1823
<h4>Box 3</h4>
@@ -23,10 +28,18 @@ <h4>Box 3</h4>
2328
<h4>Box 4</h4>
2429
<ul>
2530
<li>About this document</li>
26-
<li><a href="#">JavaScript DOM Manipulation</a></li>
27-
<li><a href="#">Learn With Zonayed</a></li>
31+
<li id="link"><a href="https://with.zonayed.me">JavaScript DOM Manipulation</a></li>
32+
<li><a href="https://with.zonayed.me">Learn With Zonayed</a></li>
2833
</ul>
2934
</div>
35+
<div id="box5" class="box">
36+
<h4>Input</h4>
37+
<form>
38+
<input type="text" name="name" placeholder="Your Name">
39+
<input type="text" name="email" placeholder="Your Email">
40+
<button type="submit" name="submit">Submit</button>
41+
</form>
42+
</div>
3043
</div>
3144
</div>
3245
<script src="script.js" charset="utf-8"></script>

‎script-before.js

Whitespace-only changes.

‎script-done.js

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
function showAlert() {
2+
alert('Alert by Function Call');
3+
}
4+
5+
const clickMeBtn = document.getElementById('btn-click-me');
6+
7+
clickMeBtn.onclick = function(event) {
8+
event.stopPropagation();
9+
event.stopImmediatePropagation();
10+
console.log('Button Clicked');
11+
}
12+
13+
clickMeBtn.onmouseover = function() {
14+
console.log('Mouse Over');
15+
}
16+
17+
const box1 = document.getElementById('box1');
18+
19+
box1.addEventListener('click', function() {
20+
console.log('Clicked on Box 1');
21+
})
22+
23+
clickMeBtn.addEventListener('click', function() {
24+
console.log('Another Click Event');
25+
});
26+
27+
const link = document.getElementById('link');
28+
29+
link.addEventListener('click', function(event) {
30+
event.preventDefault();
31+
});
32+
33+
var box4 = document.getElementById('box4');
34+
35+
box4.addEventListener('click', function(event) {
36+
if(event.target.tagName === 'LI') {
37+
console.log('Clicked on a List Item');
38+
}
39+
});
40+
41+
const inputs = document.querySelectorAll('input');
42+
const submitBtn = document.querySelector('button[type=submit]');
43+
44+
inputs[0].addEventListener('change', function(event) {
45+
console.log(event.target.value);
46+
});
47+
48+
submitBtn.addEventListener('click', function(event) {
49+
event.preventDefault();
50+
if(inputs[0].value === '' || inputs[1].value === '') {
51+
alert('Input Field cannot be Empty!');
52+
} else {
53+
var input0Data = inputs[0].value;
54+
var input1Data = inputs[1].value;
55+
console.log('Your Name:', input0Data, 'And Your Email:', input1Data);
56+
}
57+
});
58+
59+
document.addEventListener('keydown', function(event) {
60+
console.log('Key Down Event');
61+
console.log('Pressed Key: ' + event.key);
62+
console.dir(event);
63+
});
64+
65+
document.addEventListener('keypress', function() {
66+
console.log('Key Press Event');
67+
});
68+
69+
document.addEventListener('keyup', function() {
70+
console.log('Key Up Event');
71+
});
72+
73+
clickMeBtn.addEventListener('mouseover', function() {
74+
console.log('On Mouse Over using addEventListener');
75+
});
76+
77+
clickMeBtn.addEventListener('mouseout', function() {
78+
console.log('On Mouse Out');
79+
});
80+
81+
window.addEventListener('load', function() {
82+
console.log('Your Page Fully Loaded!');
83+
});
84+
85+
document.addEventListener('DOMContentLoaded', function() {
86+
console.log('Your Markup is Ready!');
87+
});
88+
89+
var img1 = document.querySelector('img[alt=valid-img]');
90+
var img2 = document.querySelector('img[alt=invalid-img]');
91+
92+
img1.addEventListener('load', function() {
93+
console.log('Image 1 Has Successfully Loaded!');
94+
});
95+
96+
img2.addEventListener('error', function(event) {
97+
console.log('Image Cannot be loaded!');
98+
});

‎script.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// Start Writing Code Here

‎style.css

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,26 @@ body {
99
background-color: #e3e3e3;
1010
}
1111

12+
button {
13+
background-color: #fff;
14+
border: none;
15+
text-transform: uppercase;
16+
padding: 8px 15px;
17+
cursor: pointer;
18+
border-radius: 4px;
19+
font-weight: 900;
20+
margin-top: 10px;
21+
}
22+
23+
input {
24+
border: none;
25+
display: block;
26+
margin: 10px auto;
27+
width: 100%;
28+
padding: 8px 15px;
29+
border-radius: 4px;
30+
}
31+
1232
.wrapper {
1333
display: flex;
1434
margin: 0 auto;
@@ -72,6 +92,16 @@ body {
7292
background-color: #4CAF50;
7393
}
7494

95+
.images {
96+
margin-top: 10px;
97+
}
98+
99+
.images img {
100+
display: block;
101+
margin: 0 auto;
102+
padding: 10px 0;
103+
}
104+
75105
.black-bg {
76106
background-color: #000;
77107
}

0 commit comments

Comments
 (0)