-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblog.html
84 lines (83 loc) · 6.04 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
<!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>B6-News-Portal</title>
<!-- font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"/>
<!-- tailwind link -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- custom css link -->
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<header class="container mx-auto">
<section>
<nav class="flex justify-between h-16 mt-2 mb-2 pl-4 pr-4 lg:p-0">
<img class="w-10/12 md:w-auto" src="images/logo1.gif" alt="">
<div class="hidden md:flex justify-end items-center gap-6">
<div class="hover:border-b-2 border-blue-500"><a class="text-base font-bold text-gray-500 hover:text-blue-600" href="index.html">News</a></div>
<div class="border-b-2 border-blue-500"><a class="text-base font-bold text-blue-600" href="blog.html">Blog</a></div>
<div class="w-1/12"><img class="user-img rounded-full" src="images/user-img.jpg" alt=""></div>
</div>
<div class="flex items-center md:hidden">
<button id="toggle-btn-on" onclick="togglerOn()" class="border p-2 h-10"><i class="fa-solid fa-bars"></i></button>
</div>
<ul id="toggler-btn" class="hidden absolute right-3 top-16 p-3 bg-white border shadow-lg">
<li class="w-24 p-2 m-1 pl-0 bg-slate-200 border hover:border-gray-800 text-center rounded"><a class="block" href="index.html">News</a></li>
<li class="w-24 p-2 m-1 pl-0 bg-slate-200 border hover:border-gray-800 text-center rounded"><a class="block" href="blog.html">Blog</a></li>
<li class="w-8"><img class="ml-10 user-img rounded-full" src="images/user-img.jpg" alt=""></li>
</ul>
</nav>
<hr>
</section>
</header>
<main class="container mx-auto pt-10 pl-3 pr-3 lg:pl-5 lg:pr-5">
<section class="grid grid-cols-1 md:grid-cols-2 gap-5">
<div class="question-div bg-sky-100 p-5 rounded-md">
<h2 class="text-2xl">Question - 1: Defference between ver, let and const ?</h2>
<p class="text-lg">Answer : </p>
<p>var : The scope of a var variable is functional scope. It can be updated and re-declared into the scope. It can be declared without initialization.</p>
<p>let : The scope of a let variable is block scope. It can be updated but cannot be re-declared into the scope. It can be declared without initialization.</p>
<p>const : The scope of a const variable is block scope. It cannot be updated or re-declared into the scope. It cannot be declared without initialization.</p>
</div>
<div class="question-div bg-sky-100 p-5 rounded-md">
<h2 class="text-2xl">Question - 2: Defference between arrow function and regular function ?</h2>
<p class="text-lg">Answer : </p>
<p>Arrow functions – a new feature introduced in ES6 – enable writing concise functions in JavaScript. While both regular and arrow functions work in a similar manner, yet there are certain interesting differences between them, as discussed below.</p>
<p>Syntax of regular functions:-</p><br>
<p>
let x = function function_name(parameters){<br>
// body of the function<br>
};
</p>
<p>The syntax of arrow functions:-</p>
<p>
let x = (parameters) => {<br>
// body of the function <br>
};
</p>
</div>
<div class="question-div bg-sky-100 p-5 rounded-md">
<h2 class="text-2xl">Question - 3: Defference between map, forEach, filter and find ?</h2>
<p class="text-lg">Answer : </p>
<p>.map() executes the same code on every element in an array and returns a new array with the updated elements.</p>
<p>.forEach(), is used to execute the same code on every element in an array but does not change the array and it returns undefined.</p>
<p>.filter() checks every element in an array to see if it meets a certain criteria and returns a new array with the elements that return truthy for the criteria.</p>
<p>find() method is used to find all the descendant elements of the selected element.</p>
</div>
<div class="question-div bg-sky-100 p-5 rounded-md">
<h2 class="text-2xl">Question - 4: What is the uses of Templete string?</h2>
<p class="text-lg">Answer : </p>
<p>Template literals are literals delimited with backtick (`) characters, allowing for multi-line strings, for string interpolation with embedded expressions, and for special constructs called tagged templates. Template strings are a powerful feature of modern JavaScript released in ES6. It lets us insert/interpolate variables and expressions into strings without needing to concatenate like in older versions of JavaScript. It allows us to create strings that are complex and contain dynamic elements. Template literals are sometimes informally called template strings, because they are used most commonly for string interpolation (to create strings by doing substitution of placeholders). However, a tagged template literal may not result in a string; it can be used with a custom tag function to perform whatever operations you want on the different parts of the template literal.</p>
</div>
</section>
</main>
<footer class="container mx-auto pt-5 pb-5 border-t-2 mt-14">
<p class="text-center">Copyright 2021 Update24 News Portal</p>
</footer>
<script src="js/index.js"></script>
</body>
</html>