Skip to content

Commit c24092d

Browse files
coderzamancoderzaman
committed
Document Object Model(DOM)
1 parent 539eb63 commit c24092d

File tree

7 files changed

+860
-0
lines changed

7 files changed

+860
-0
lines changed

‎11. Document Object Model(DOM)/event.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
9+
</head>
10+
11+
<body>
12+
<h1 id="showMessage"></h1>
13+
<div class="container ">
14+
<div class="row">
15+
<div class="col-6">
16+
<button class="btn btn-success" onclick="alert('Opps Don\'t Hit me!')">Clcik Me</button>
17+
<button class="btn btn-success" onmouseover="alert('Don\'t touch me!')">Clcik Me</button>
18+
<button class="btn btn-warning" id="btn3">Hit Me</button>
19+
<button class="btn btn-danger" id="btn4">Hit Me</button>
20+
</div>
21+
</div>
22+
<div class="row">
23+
<div class="col-6 my-5 from-sec">
24+
<form method="post">
25+
<div class="mb-3">
26+
<label for="fname" class="form-label">Full Name</label>
27+
<input type="text" class="form-control" id="fname">
28+
</div>
29+
<div class="mb-3">
30+
<label for="email" class="form-label">Email</label>
31+
<input type="email" class="form-control" id="email">
32+
</div>
33+
<div class="mb-3">
34+
<label for="password" class="form-label">Pasword</label>
35+
<input type="password" class="form-control" id="password">
36+
37+
</div>
38+
<div class="mb-3">
39+
<label for="repassword" class="form-label">Re Pasword <p id="chekpass"></p></label>
40+
<input type="password" class="form-control" id="repassword">
41+
</div>
42+
<a href="#" class="btn btn-danger text-light mt-3">Submit</a>
43+
</form>
44+
</div>
45+
</div>
46+
47+
48+
</div>
49+
50+
51+
52+
53+
<!-- link javacript file -->
54+
<script src="js/event.js"></script>
55+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
56+
</body>
57+
58+
</html>

‎11. Document Object Model(DOM)/img/pic_htmltree.gif

2.98 KB
Loading

‎11. Document Object Model(DOM)/index.html

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
9+
</head>
10+
11+
<body>
12+
<h1 id="showMessage"></h1>
13+
<div class="container">
14+
<div class="row">
15+
<div class="col-6">
16+
<h5 id="head_pro" class="my-3 fs-4">Programming Language</h5>
17+
<ol class="list-group list-group-numbered ol-1">
18+
<li class="list-group-item item-change">C++</li>
19+
<li class="list-group-item item-change-even">Java</li>
20+
<li class="list-group-item item-change">Python</li>
21+
<li class="list-group-item item-change-even">javacript</li>
22+
<li class="list-group-item item-change">PHP</li>
23+
</ol>
24+
</div>
25+
</div>
26+
<div class="row">
27+
<div class="col-6">
28+
<h5 class="my-3 fs-4">Tech Giant</h5>
29+
<ol class="list-group list-group-numbered ol-a">
30+
<li class="list-group-item"><a class="firt-link" href="https://google.com/">Google</a></li>
31+
<li class="list-group-item"> <a href="https://chat.openai.com/">Chatgpt</a></li>
32+
<li class="list-group-item"> <a href="https://web.telegram.org/">Telegram</a></li>
33+
<li class="list-group-item"> <a href="https://x.com/">X</a></li>
34+
<li class="list-group-item"> <a href="https://www.facebook.com/">Facebook</a></li>
35+
</ol>
36+
</div>
37+
</div>
38+
<div class="row">
39+
<div class="col-6 parent">
40+
<h5 class="my-3 fs-4 last-head">List Title</h5>
41+
<ul class="list-group">
42+
<li class="list-group-item"><a class="firt-link" href="https://google.com/">Google</a></li>
43+
<li class="list-group-item"> <a href="https://chat.openai.com/">Chatgpt</a></li>
44+
<li class="list-group-item"> <a href="https://web.telegram.org/">Telegram</a></li>
45+
<li class="list-group-item"> <a href="https://x.com/">X</a></li>
46+
<li class="list-group-item"> <a href="https://www.facebook.com/">Facebook</a></li>
47+
</ul>
48+
<ul>
49+
</ul>
50+
</div>
51+
</div>
52+
<div class="row">
53+
<div class="col-6 my-5">
54+
<form method="post">
55+
<div class="mb-3">
56+
<label for="exLinkName" class="form-label">Link Name</label>
57+
<input type="text" class="form-control" id="exLinkName">
58+
</div>
59+
<div class="mb-3">
60+
<label for="exLink" class="form-label">Link</label>
61+
<input type="text" class="form-control" id="exLink">
62+
</div>
63+
</form>
64+
</div>
65+
</div>
66+
<div class="row">
67+
<div class="col-6">
68+
<form>
69+
<div class="mb-3">
70+
<label for="fullName" class="form-label">Full Name</label>
71+
<input type="text" class="form-control" id="fullName">
72+
<a href="#" class="btn btn-primary mt-3">Submit</a>
73+
</div>
74+
</form>
75+
</div>
76+
</div>
77+
78+
79+
</div>
80+
<!-- link javacript file -->
81+
<script src="js/script.js"></script>
82+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
83+
</body>
84+
85+
</html>

‎11. Document Object Model(DOM)/js/event.js

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
let btn3 = document.getElementById("btn3");
2+
btn3.addEventListener("click", function(){
3+
this.innerText = "Clcik Again";
4+
btn3.addEventListener("click", function(){
5+
this.innerText = "Thank you";
6+
btn3.addEventListener("click", function(){
7+
this.innerText = "Bye Bye!";
8+
btn3.addEventListener("click", function(){
9+
this.style.display = "none";
10+
})
11+
})
12+
})
13+
})
14+
15+
16+
btn3.addEventListener("mouseover", function(){
17+
this.style.backgroundColor ="red";
18+
});
19+
btn3.addEventListener("mouseout", function(){
20+
this.style.backgroundColor ="orange";
21+
});
22+
23+
document.getElementById("btn4").addEventListener("click", message);
24+
25+
function message(e){
26+
let val = e.target;
27+
28+
//Milisecond after reloading page
29+
console.log(e.timeStamp);
30+
31+
//Event type
32+
console.log(e.type);
33+
34+
//clinetY() function repereset click distance pixel at y-axis of page
35+
console.log(e.clientY);
36+
37+
//clinetX() function repereset click distance pixel at x-axis of page
38+
console.log(e.clientX);
39+
40+
//offsetY() function repereset click distance pixel at y-axis of element
41+
console.log(e.offsetY);
42+
43+
//offsetX() function repereset click distance pixel at x-axis of element
44+
console.log(e.offsetX);
45+
46+
// Note: We can doint it container or any element or we also we any event listner
47+
}
48+
49+
// chage backgroundColor with use offsetY or offsetX value
50+
51+
// document.querySelector(".container").addEventListener("click", changeBackWithClick);
52+
53+
// function changeBackWithClick(e){
54+
// let val = e.target;
55+
// val.style.backgroundColor = `#${e.offsetX}`
56+
// }
57+
58+
// document.querySelector(".container").addEventListener("mouseover", changeBackWithHover);
59+
60+
// function changeBackWithHover(e){
61+
// let val = e.target;
62+
// val.style.backgroundColor = `#${e.offsetX}`
63+
64+
// }
65+
66+
// document.querySelector(".container").addEventListener("mousemove", changeBackWithMove);
67+
68+
// function changeBackWithMove(e){
69+
// let val = e.target;
70+
// val.style.backgroundColor = `#${e.offsetX}`
71+
72+
// }
73+
74+
75+
document.getElementById("fname").addEventListener("focus", styleFocused);
76+
document.getElementById("email").addEventListener("focus", styleFocused);
77+
document.getElementById("password").addEventListener("focus", styleFocused);
78+
document.getElementById("repassword").addEventListener("focus", styleFocused);
79+
80+
function styleFocused(e){
81+
this.style.border ="3px solid green";
82+
}
83+
84+
85+
86+
87+
document.getElementById("password").addEventListener("keyup", collectPasswords);
88+
let usPass ="";
89+
function collectPasswords(e){
90+
usPass = this.value;
91+
console.log(this.value);
92+
}
93+
94+
document.getElementById("repassword").addEventListener("keyup", collectRePasswords);
95+
let reUsPass ="";
96+
function collectRePasswords(e){
97+
reUsPass = this.value;
98+
chekPassRealtime(reUsPass);
99+
}
100+
101+
let checkpass = document.getElementById("chekpass");
102+
103+
104+
function chekPassRealtime(pass){
105+
if(pass != usPass){
106+
document.getElementById("repassword").style.backgroundColor = "red";
107+
checkpass.classList = "fst-italic";
108+
checkpass.style.color = "red";
109+
checkpass.style.display = "inline-block";
110+
checkpass.innerText="Password Not Match"
111+
112+
}else{
113+
document.getElementById("repassword").style.backgroundColor = "white";
114+
checkpass.innerText="";
115+
}
116+
}
117+
118+
119+
document.getElementById("fname").addEventListener("focusout", styleFocusedOut);
120+
document.getElementById("email").addEventListener("focusout", styleFocusedOut);
121+
document.getElementById("password").addEventListener("focusout", styleFocusedOut);
122+
document.getElementById("repassword").addEventListener("focusout", styleFocusedOut);
123+
function styleFocusedOut(e){
124+
this.style.border ="1px solid lightgray";
125+
this.style.background = "white";
126+
}

‎11. Document Object Model(DOM)/js/practice.js

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
let selectListHead = document.querySelectorAll("h5");
2+
3+
selectListHead.forEach(function(value){
4+
value.classList = "text-bg-danger py-2 fs-4 mb-0 mt-5 text-center"
5+
})
6+
7+
let selectOlList = document.querySelectorAll("ol");
8+
selectOlList.forEach(function(value){
9+
value.style.borderRadius = "0px";
10+
})
11+
12+
let selectULList = document.querySelectorAll("ul");
13+
selectULList.forEach(function(value){
14+
value.style.borderRadius = "0";
15+
})
16+
17+
18+
// Create Element
19+
let formHead = document.createElement("h5");
20+
formHead.appendChild(document.createTextNode("Input your details..."));
21+
console.log(formHead);
22+
formHead.classList = "fs-4 py-2 text-bg-danger text-center mb-0";
23+
24+
let seletctForm = document.querySelector("form");
25+
seletctForm.style.padding = "20px";
26+
seletctForm.style.border = "1px solid lightgray";
27+
28+
let formSec = document.querySelector(".from-sec");
29+
30+
//If you want to add any element as first element we can use insertBefore
31+
// for Example
32+
33+
// section.insertBefore(elementAddAsFirst, currentFirstChile);
34+
// formSec: The parent element where you want to insert formHead.
35+
// formHead: The element you want to insert.
36+
// formSec.firstChild: The reference node, i.e., the current first child of formSec. By passing formSec.firstChild,
37+
38+
formSec.insertBefore(formHead, formSec.firstChild);
39+
40+
let styleAncor = document.querySelectorAll("a");
41+
42+
styleAncor.forEach((value)=>{
43+
value.style.color = "black";
44+
value.style.textDecoration = "none";
45+
46+
value.addEventListener("mouseover", () => {
47+
value.style.color = "blue";
48+
});
49+
50+
value.addEventListener("mouseout", () => {
51+
value.style.color = "black";
52+
53+
});
54+
55+
})
56+
57+
58+
// Add new Element Again
59+
let createLi= [];
60+
selectULList = document.querySelector('ul');
61+
for(let i = 1; i <= 5; i++) {
62+
createLi[i] = document.createElement("li");
63+
createLi[i].appendChild(document.createTextNode(`New added Item-0${i}`));
64+
createLi[i].classList = "list-group-item";
65+
selectULList.appendChild(createLi[i]);
66+
}
67+
68+
69+
// Remove Element
70+
let selectULListLi = document.querySelectorAll("ul li");
71+
selectULListLi[9].remove();
72+
73+
74+
//Remove child elements
75+
76+
//Select Child Elements
77+
selectULListLi = document.querySelectorAll("ul li");
78+
//Select Parent Elements
79+
selectULList = document.querySelector('ul');
80+
selectULList.removeChild(selectULListLi[5]);
81+
82+

0 commit comments

Comments
 (0)