-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblogs.html
173 lines (145 loc) · 5.13 KB
/
blogs.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dev Board Blog</title>
<!--Google font links-->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<!--FontAwesome link-->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
/>
<!--Daisy UI + Tailwind CSS-->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css"
rel="stylesheet"
type="text/css"
/>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: "#da373d",
"primary-color": "#3752FD",
"base-color": "#F4F7FF",
},
fontFamily: {
poppins: ["Poppins", "serif"],
},
},
},
};
</script>
</head>
<body class="font-poppins bg-base-color">
<!--Header-->
<header
class="max-w-[1400px] mx-auto px-4 navbar container shadow-md p-4 md:rounded-xl md:relative md:top-4 mb-8 bg-white"
>
<!--left-->
<div class="navbar-start space-x-4">
<img class="w-[28px] md:w-[36px]" src="./assets/logo.png" alt="" />
<!--site logo-->
<a class="text-lg md:text-2xl flex">
Dev <span class="font-bold">Board</span>
</a>
</div>
<!--right-->
<div class="navbar-end">
<button id="back" class="btn bg-primary-color text-white">
Back to Desk
</button>
</div>
<script>
document.getElementById("back").addEventListener("click", function () {
window.location.href = "index.html";
});
</script>
</header>
<!-- Main -->
<main class="container mx-auto p-0">
<!-- (title section) -->
<section class="md:mt-12">
<h1 class="text-2xl font-bold text-center">Blogs</h1>
</section>
<!-- (blog-container) -->
<section class="max-w-[1430px] mx-auto px-4 py-1 md:py-4">
<!--item (1)-->
<div class="card bg-white shadow-md my-6">
<h2 class="p-6 font-bold">
Question-1: What are the different ways to select an element in the
DOM?
</h2>
<hr class="my-0" />
<p class="p-6">
Elements in the DOM can be selected in different ways. Using an ID
selects a single element, while class names and tag names can be
used to select multiple elements.CSS selector is the flexible
options.
</p>
</div>
<!--item (2)-->
<div class="card bg-white shadow-md my-6">
<h2 class="p-6 font-bold">
Question-2: What is the difference between innerHTML, innerText, and
textContent ?
</h2>
<hr class="my-0" />
<p class="p-6">
innerHTML, innerText, and textContent are used to get or change the
content inside an element. `innerHTML` includes both text and HTML
tags, allowing changes to the structure. `innerText` only shows the
visible text and ignores hidden content. `textContent` gets all
text, including hidden content, but consider it as plain text.
</p>
</div>
<!--item (3)-->
<div class="card bg-white shadow-md my-6">
<h2 class="p-6 font-bold">
Question-3: What is event delegation in the DOM?
</h2>
<hr class="my-0" />
<p class="p-6">
Event delegation uses a parent element to manage events for its
children. Instead of adding listeners to each child, one listener on
the parent detects and handles events as they bubble up.
</p>
</div>
<!--item (4)-->
<div class="card bg-white shadow-md my-6">
<h2 class="p-6 font-bold">
Question-4: What is event bubbling in the DOM?
</h2>
<hr class="my-0" />
<p class="p-6">
Event bubbling is when an event starts on a child element and moves
up through its parent elements, allowing efficient event handling.
</p>
</div>
<!--item (5)-->
<div class="card bg-white shadow-md my-6">
<h2 class="p-6 font-bold">
Question-5: How do you create, add, and remove elements using
JavaScript?
</h2>
<hr class="my-0" />
<p class="p-6">
Elements can be created using document.createElement(), added with
appendChild(), and removed using remove().
</p>
</div>
</section>
</main>
<!--footer-->
<footer></footer>
</body>
</html>