-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog.html
255 lines (243 loc) · 12.5 KB
/
blog.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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blogs</title>
<!-- links -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/index.min.css" />
<!-- tailwind css import -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
}
}
}
</script>
<!-- font awesome kits -->
<script src="https://kit.fontawesome.com/89afacdaea.js" crossorigin="anonymous"></script>
<!-- custom styles -->
<style>
body {
min-height: 100vh;
}
footer {
position: sticky;
top: 100%;
}
</style>
</head>
<body>
<!-- header section -->
<header>
<!-- nav bar section start -->
<nav
class="relative w-full flex flex-wrap items-center justify-between py-4 bg-gray-100 text-gray-500 hover:text-gray-700 focus:text-gray-700 shadow-lg navbar navbar-expand-lg navbar-light">
<div class="container-fluid w-full flex flex-wrap items-center justify-between px-6">
<button class="
navbar-toggler
text-gray-500
border-0
hover:shadow-none hover:no-underline
py-2
px-2.5
bg-transparent
focus:outline-none focus:ring-0 focus:shadow-none focus:no-underline
" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="w-6" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor"
d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z">
</path>
</svg>
</button>
<div class="md:ml-10">
<a href="#" class="flex items-center"><span
class="bg-violet-700 px-2 pb-1 text-3xl font-bold text-white rounded-xl">News</span><span
class="text-3xl font-bold">Tune</span>
</a>
</div>
<div class="collapse navbar-collapse items-center" id="navbarSupportedContent">
<!-- Left links -->
<ul class="navbar-nav flex flex-col pl-0 list-style-none mr-auto md:mr-10">
<li class="nav-item pr-2">
<a class="nav-link text-gray-500 hover:text-gray-700 focus:text-gray-700 text-xl font-medium"
aria-current="page" href="index.html">News</a>
</li>
<li class="nav-item px-2">
<a class="nav-link active text-xl font-medium" href="blog.html">Blogs</a>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
</nav>
<!-- nav bar section end -->
</header>
<!-- main section -->
<main class="container mx-auto">
<section class="mt-10">
<h1 class="text-2xl font-bold text-center">Blog 1: JavaScript Related FAQs</h1>
<div class="accordion mt-5">
<div class="accordion-item bg-white border border-gray-200">
<h2 class="accordion-header mb-0" id="headingOne">
<button class="
accordion-button
relative
flex
items-center
w-full
py-4
px-5
text-base text-gray-800 text-left
bg-white
border-0
rounded-none
transition
focus:outline-none
" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
What is the difference among var, let and const?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
data-bs-parent="#accordionExample">
<div class="accordion-body py-4 px-5">
<ul class="list-disc px-8">
<li>
<strong>var keyword in JavaScript:</strong> The var is the oldest keyword to declare
a variable in
JavaScript. <br>
<strong>Scope:</strong> Global scoped or function scoped. The scope of the var
keyword is the global
or function scope. It means variables defined outside the function can be accessed
globally, and variables defined inside a particular function can be accessed within
the function.
</li>
<li>
<strong>let keyword in JavaScript:</strong> The let keyword is an improved version
of the var keyword. <br>
<strong>Scope:</strong> block scoped, The scope of a let variable is only block
scoped. It can’t be accessible outside the particular block ({block}).
</li>
<li>
<strong>const keyword in JavaScript:</strong> The const keyword has all the
properties that are the same as the let keyword, except the user cannot update it.
<br>
<strong>Scope:</strong> block scoped, When users declare a const variable, they need
to initialize it, otherwise, it returns an error. The user cannot update the const
variable once it is declared.
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item bg-white border border-gray-200">
<h2 class="accordion-header mb-0" id="headingTwo">
<button class="
accordion-button
collapsed
relative
flex
items-center
w-full
py-4
px-5
text-base text-gray-800 text-left
bg-white
border-0
rounded-none
transition
focus:outline-none
" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false"
aria-controls="collapseTwo">
What is the difference between Arrow function and Regular function?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
data-bs-parent="#accordionExample">
<div class="accordion-body py-4 px-5">
<ul class="list-disc px-8">
<li>
<strong>Syntax of regular functions:-</strong> let x = function
function_name(parameters){ <br>
// body of the function <br>
}; <br>
<strong>Syntax of arrow functions:-</strong> let x = (parameters) => { <br>
// body of the function <br>
};
</li>
<li>
Unlike regular functions, arrow functions do not have their own this.
</li>
<li>
Arguments objects are not available in arrow functions, but are available in regular
functions.
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item bg-white border border-gray-200">
<h2 class="accordion-header mb-0" id="headingThree">
<button class="
accordion-button
collapsed
relative
flex
items-center
w-full
py-4
px-5
text-base text-gray-800 text-left
bg-white
border-0
rounded-none
transition
focus:outline-none
" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false"
aria-controls="collapseThree">
Why should we use Template string?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
data-bs-parent="#accordionExample">
<div class="accordion-body py-4 px-5">
<p class="px-8">
Template literals are enclosed by backtick (`) characters instead of double or single
quotes. <br> <br>
Along with having normal strings, template literals can also contain other parts called
placeholders, which are embedded expressions delimited by a dollar sign and curly
braces: ${expression}. The strings and placeholders get passed to a function — either a
default function, or a function you supply. The default function (when you don't supply
your own) just performs string interpolation to do substitution of the placeholders and
then concatenate the parts into a single string. <br> <br>
To supply a function of your own, precede the template literal with a function name; the
result is called a tagged template. In that case, the template literal is passed to your
tag function, where you can then perform whatever operations you want on the different
parts of the template literal.
</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- footer section -->
<footer class="my-10">
<hr>
<p class="my-5 text-center font-semibold">Copyright 2022 NewsTune</p>
</footer>
<!-- tailwind components -->
<script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script>
<!-- javaScripts -->
</body>
</html>