DevBoard/question.html at main · Bipul-Roni/DevBoard · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DevBoard</title>
    <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <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">
    <!-- font awesome kit -->
    <script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
    <style>
        .font-poppins {
            font-family: "Poppins", sans-serif;
        }
    </style>
</head>

<body class="bg-[#F4F7FF] font-poppins">

    <!-- Header Section -->
    <header class="container mx-auto p-5 bg-white rounded-xl">
        <nav class="flex justify-between items-center  ">
            <div>
                <img src="asssets/logo.png" alt="Logo" class="w-9/12">
            </div>
                <button id="deskBack" class="btn btn-primary">Back to Desk</button>
        </nav>
        </header>

        <section class="container mx-auto  p-5 rounded-xl">
            <h1 class="text-center text-2xl font-medium py-10">Blog</h1>
        </section>

        <div class="flex flex-col gap-5">
            <section class="container mx-auto  p-5 rounded-xl bg-white">
                <div class="flex flex-col gap-3">
                    <h1 class="text-2xl font-bold">Question-1: What are the different ways to select an element in the DOM?</h1>
                    <div class="border-dashed"></div>
                    <p>In the DOM, elements we can selected using various methods like getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector(), and querySelectorAll(). These methods allow easily target and manipulate specific parts of a webpage</p>
                </div>
            </section>
            <section class="container mx-auto  p-5 rounded-xl bg-white">
                <div class="flex flex-col gap-3">
                    <h1 class="text-2xl font-bold">Question-2: What is the difference between innerHTML, innerText, and textContent ?</h1>
                    <div class="border-dashed"></div>
                    <p>Using innerHtml All the HTML content inside an element (including tags),using innerText The visible text inside an element,using textContent All the text content inside an element, including text from hidden elements (ignores styling).</p>
                </div>
            </section>
            <section class="container mx-auto  p-5 rounded-xl bg-white">
                <div class="flex flex-col gap-3">
                    <h1 class="text-2xl font-bold">Question-3: What is event delegation in the DOM?</h1>
                    <div class="border-dashed"></div>
                    <p>Event delegation is a smart approach in the DOM where you assign one event listener to a parent element, rather than binding separate listeners to each child. This method takes advantage of event bubbling, where an event that starts on a child element travels up through its ancestors, giving the parent a chance to detect and handle it.</p>
                </div>
            </section>
            <section class="container mx-auto  p-5 rounded-xl bg-white">
                <div class="flex flex-col gap-3">
                    <h1 class="text-2xl font-bold">Question-4: What is event bubbling in the DOM?</h1>
                    <div class="border-dashed"></div>
                    <p>Event bubbling is a behavior in the DOM where an event triggered on a specific element doesn’t just stay there — it climbs up through all its parent elements, eventually reaching the very top of the document. This allows ancestors to react to events deep inside their child elements, making it possible to handle events higher up in the DOM tree.</p>
                </div>
            </section>
            <section class="container mx-auto  p-5 rounded-xl bg-white">
                <div class="flex flex-col gap-3">
                    <h1 class="text-2xl font-bold">Question-5: How do you create, add, and remove elements using JavaScript?</h1>
                    <div class="border-dashed"></div>
                    <p>In JavaScript, we can create elements using document.createElement(), then add them to the DOM using methods like appendChild(), append(), or insertBefore(). To remove elements, we can call element.remove() directly, or remove it through its parent using removeChild(). These methods allow dynamically managing content on a webpage.</p>
                </div>
            </section>
        </div>


    <script src="backHome.js"></script>
    <script src="task.js"></script>
    </body>
    </html>