30Day_JavaScript_Challenge/Day-9_DOM_MANIPULATION.html at main · sahil-soni18/30Day_JavaScript_Challenge · 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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .innerContainer {
            height: 100px;
            width: 100px;
        }

        .theme {
            background-color: black;
            color: aliceblue;
        }

        img {
            border: 2px solid transparent; /* Set a default border to see the color change */
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Activity 1: Selecting and manipulating elements -->

        <!-- Task 1: -->
        <h1 id="heading">This is heading...</h1>

        <!-- Task 2 -->
        <div class="innerContainer"></div>

        <!-- Activity 2: Creating and appending elements -->

        <!-- Task 3 -->

        <!-- Task 4 -->
        <ul>
            <li>List Item 1</li>
            <li>List Item 2</li>
            <li>List Item 3</li>
        </ul>

        <!-- Activity 3: Remove Element -->

        <!-- Task 5 -->

        <!-- Activity 4: Modifying Attributes and Classes -->

        <!-- Task 7 -->

        <img src="#" alt="Image">

        <!-- Task 8 -->

        <button onclick="toggleClass()">Toggle Class</button>

        <!-- Activity 5 Event Handling -->
        <!-- Task 9 -->

        <p class="paragraph">This is Text Content...</p>
        <button onclick="changeContent()">Change Content</button>
    </div>

    <script>
        // Task 1
        const heading = document.getElementById('heading');
        heading.innerHTML = "This is updated Heading...";

        // Task 2
        const innerContainer = document.getElementsByClassName('innerContainer')[0];
        innerContainer.style.backgroundColor = "black";

        // Task 3
        const customDiv = document.createElement("div");
        customDiv.innerText = "Some Text in Custom Div Element...";
        document.body.appendChild(customDiv);

        // Task 4
        const liElement = document.createElement("li");
        liElement.innerText = "List Item 4";
        document.getElementsByTagName("ul")[0].appendChild(liElement);

        // Activity 3: Remove Element
        // Task 5
        innerContainer.remove();

        // Task 6
        const ulElement = document.getElementsByTagName("ul")[0];
        if (ulElement.lastElementChild) {
            ulElement.lastElementChild.remove();
        }

        // Activity 4: Modifying Attributes And Classes
        // Task 7
        const image = document.querySelector("img");
        image.src = "./Day9Challenge.png";

        // Task 8
        function toggleClass() {
            document.querySelector("div").classList.toggle("theme");
        }

        // Task 9
        function changeContent() {
            document.querySelector(".paragraph").innerHTML = "And This is Updated Text Of P Tag...";
        }

        // Task 10
        image.addEventListener("mouseover", function () {
            this.style.borderColor = "red";
        });
    </script>
</body>
</html>