Skip to content

Commit 421a596

Browse files
RakibRahmanRakibRahman
committed
JS files Path & Folder updated
1 parent 879b7b4 commit 421a596

File tree

152 files changed

+5119
-5119
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

152 files changed

+5119
-5119
lines changed

‎.gitignore

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
test.js
2-
index.html
3-
package-lock.json
4-
node_modules
1+
test.js
2+
index.html
3+
package-lock.json
4+
node_modules
55
.vscode/

‎DOM/domNavigation.html

+29-29
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>DOM Navigation</title>
8-
<style>
9-
.container {
10-
background-color: gray;
11-
height: 100vh;
12-
display: grid;
13-
place-items: center;
14-
font-size: 20px;
15-
}
16-
</style>
17-
</head>
18-
<body>
19-
<div class="container">
20-
<div class="child-1"><p>div no 1</p></div>
21-
<div class="child-2"><p>div no 2</p></div>
22-
<div class="child-3"><p>div no 3</p></div>
23-
</div>
24-
<script>
25-
const firstChild = document.body.firstChild;
26-
const bodySib = document.body.NextSibling;
27-
</script>
28-
</body>
29-
</html>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>DOM Navigation</title>
8+
<style>
9+
.container {
10+
background-color: gray;
11+
height: 100vh;
12+
display: grid;
13+
place-items: center;
14+
font-size: 20px;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<div class="container">
20+
<div class="child-1"><p>div no 1</p></div>
21+
<div class="child-2"><p>div no 2</p></div>
22+
<div class="child-3"><p>div no 3</p></div>
23+
</div>
24+
<script>
25+
const firstChild = document.body.firstChild;
26+
const bodySib = document.body.NextSibling;
27+
</script>
28+
</body>
29+
</html>

‎DOM/eventObject.html

+28-28
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Event Object</title>
8-
</head>
9-
<body>
10-
<h1 class="title">Event Object</h1>
11-
<p>
12-
All event objects in the DOM are based on the Event Object. Therefore, all
13-
other event objects (like MouseEvent and KeyboardEvent) has access to the
14-
Event Object's properties and methods. (W3Schools)
15-
</p>
16-
<button id="btn">Click Me</button>
17-
<script>
18-
const title = document.querySelector(".title");
19-
const btn = document.getElementById("btn");
20-
btn.onclick = function () {
21-
btn.innerHTML = "Clicked";
22-
console.log(event);
23-
console.log(event.target); // Returns the element that triggered the event
24-
console.log(event.type); //! Returns the name of the event
25-
};
26-
</script>
27-
</body>
28-
</html>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Event Object</title>
8+
</head>
9+
<body>
10+
<h1 class="title">Event Object</h1>
11+
<p>
12+
All event objects in the DOM are based on the Event Object. Therefore, all
13+
other event objects (like MouseEvent and KeyboardEvent) has access to the
14+
Event Object's properties and methods. (W3Schools)
15+
</p>
16+
<button id="btn">Click Me</button>
17+
<script>
18+
const title = document.querySelector(".title");
19+
const btn = document.getElementById("btn");
20+
btn.onclick = function () {
21+
btn.innerHTML = "Clicked";
22+
console.log(event);
23+
console.log(event.target); // Returns the element that triggered the event
24+
console.log(event.type); //! Returns the name of the event
25+
};
26+
</script>
27+
</body>
28+
</html>

‎DOM/eventTypes.html

+79-79
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,79 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Event Types</title>
8-
<style>
9-
body {
10-
display: flex;
11-
flex-direction: column;
12-
gap: 10px;
13-
align-items: center;
14-
}
15-
div {
16-
width: 200px;
17-
height: 100px;
18-
background-color: yellowgreen;
19-
text-align: center;
20-
line-height: 100px;
21-
}
22-
23-
div:nth-child(2) {
24-
background-color: coral;
25-
}
26-
div:nth-child(3) {
27-
background-color: burlywood;
28-
}
29-
div:nth-child(4) {
30-
background-color: cadetblue;
31-
}
32-
a {
33-
color: whitesmoke;
34-
font-size: 20px;
35-
text-decoration: none;
36-
}
37-
</style>
38-
</head>
39-
<body>
40-
<div>
41-
<a href="#" onclick="alert('Kill me heal me')">Inline Alert</a>
42-
</div>
43-
<div>
44-
<a href="#" onclick="callMe()">Calling a function</a>
45-
</div>
46-
<div>
47-
<a id="eventCaller" href="#""
48-
>Inline Event</a
49-
>
50-
</div>
51-
<div>
52-
<a class="alink" href="#"
53-
>addEventListener</a
54-
>
55-
</div>
56-
57-
<script>
58-
//calling via function
59-
const callMe = () => {
60-
alert("One missed call");
61-
};
62-
63-
// inline event
64-
const call3 = document.querySelector("#eventCaller");
65-
call3.onclick = function () {
66-
alert("Fly High and Sky High");
67-
};
68-
69-
//addEventListener
70-
const listener = document.querySelector(".alink");
71-
72-
const callMe2 = () => {
73-
alert("The Joker");
74-
};
75-
76-
listener.addEventListener("click", callMe2);
77-
</script>
78-
</body>
79-
</html>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Event Types</title>
8+
<style>
9+
body {
10+
display: flex;
11+
flex-direction: column;
12+
gap: 10px;
13+
align-items: center;
14+
}
15+
div {
16+
width: 200px;
17+
height: 100px;
18+
background-color: yellowgreen;
19+
text-align: center;
20+
line-height: 100px;
21+
}
22+
23+
div:nth-child(2) {
24+
background-color: coral;
25+
}
26+
div:nth-child(3) {
27+
background-color: burlywood;
28+
}
29+
div:nth-child(4) {
30+
background-color: cadetblue;
31+
}
32+
a {
33+
color: whitesmoke;
34+
font-size: 20px;
35+
text-decoration: none;
36+
}
37+
</style>
38+
</head>
39+
<body>
40+
<div>
41+
<a href="#" onclick="alert('Kill me heal me')">Inline Alert</a>
42+
</div>
43+
<div>
44+
<a href="#" onclick="callMe()">Calling a function</a>
45+
</div>
46+
<div>
47+
<a id="eventCaller" href="#""
48+
>Inline Event</a
49+
>
50+
</div>
51+
<div>
52+
<a class="alink" href="#"
53+
>addEventListener</a
54+
>
55+
</div>
56+
57+
<script>
58+
//calling via function
59+
const callMe = () => {
60+
alert("One missed call");
61+
};
62+
63+
// inline event
64+
const call3 = document.querySelector("#eventCaller");
65+
call3.onclick = function () {
66+
alert("Fly High and Sky High");
67+
};
68+
69+
//addEventListener
70+
const listener = document.querySelector(".alink");
71+
72+
const callMe2 = () => {
73+
alert("The Joker");
74+
};
75+
76+
listener.addEventListener("click", callMe2);
77+
</script>
78+
</body>
79+
</html>

‎DOM/innerHTML.html

+42-42
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,42 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>innerHTML</title>
8-
<style>
9-
body {
10-
display: grid;
11-
place-items: center;
12-
}
13-
button {
14-
padding: 5px 10px;
15-
font-size: 18px;
16-
}
17-
</style>
18-
</head>
19-
<body>
20-
<p class="title">Quote of The Day</p>
21-
<!-- <p class="para"></p> -->
22-
<h1 id="quote">Best Anime Quote</h1>
23-
<p class="author"></p>
24-
<button onclick="btnClick()">Click</button>
25-
26-
<script>
27-
const quote = document.getElementById("quote");
28-
// const para = document.getElementsByClassName("para");
29-
const author = document.querySelector(".author");
30-
31-
const btnClick = () => {
32-
quote.innerHTML = "This World Shall Know Pain";
33-
quote.style.color = "red";
34-
author.innerHTML = "Shinra Tensei";
35-
const info = document.querySelector(".title").innerHTML;
36-
setTimeout(() => {
37-
alert(`${info} By Nagato`);
38-
}, 1000);
39-
};
40-
</script>
41-
</body>
42-
</html>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>innerHTML</title>
8+
<style>
9+
body {
10+
display: grid;
11+
place-items: center;
12+
}
13+
button {
14+
padding: 5px 10px;
15+
font-size: 18px;
16+
}
17+
</style>
18+
</head>
19+
<body>
20+
<p class="title">Quote of The Day</p>
21+
<!-- <p class="para"></p> -->
22+
<h1 id="quote">Best Anime Quote</h1>
23+
<p class="author"></p>
24+
<button onclick="btnClick()">Click</button>
25+
26+
<script>
27+
const quote = document.getElementById("quote");
28+
// const para = document.getElementsByClassName("para");
29+
const author = document.querySelector(".author");
30+
31+
const btnClick = () => {
32+
quote.innerHTML = "This World Shall Know Pain";
33+
quote.style.color = "red";
34+
author.innerHTML = "Shinra Tensei";
35+
const info = document.querySelector(".title").innerHTML;
36+
setTimeout(() => {
37+
alert(`${info} By Nagato`);
38+
}, 1000);
39+
};
40+
</script>
41+
</body>
42+
</html>

0 commit comments

Comments
 (0)