Day 34: DOM

edyoda · Nov 15, 2022 · ac28df6 · ac28df6
1 parent 9e65b47
commit ac28df6
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 0 deletions.
diff --git a/javascript/Day34/index.html b/javascript/Day34/index.html
@@ -0,0 +1,21 @@
+<!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" />
+    <link rel="stylesheet" href="./style.css" />
+    <title>Day 34</title>
+  </head>
+  <body>
+    <h1>Welcome to Dy 34</h1>
+    <div class="container big">Class First</div>
+    <div class="container">Class Second</div>
+    <div class="container">Class Third</div>
+    <div id="ID">Hello ID</div>
+    <div id="list_of_users">
+      <h4>List of users</h4>
+    </div>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/javascript/Day34/script.js b/javascript/Day34/script.js
@@ -0,0 +1,86 @@
+// selectClassElements();
+// selectIdElement();
+// selectTagElement();
+// selectElementBySelector(".container");
+// selectElementBySelector("#ID");
+// selectElementsBySelector(".container");
+// createElement();
+// showListOfUsers();
+// removeHeading();
+// getClassName();
+// getClassList();
+
+function selectClassElements() {
+  const elements = document.getElementsByClassName("container");
+
+  for (let i = 0; i < elements.length; i++) {
+    elements[i].style.color = "red";
+  }
+}
+
+function selectIdElement() {
+  const element = document.getElementById("ID");
+
+  element.style.color = "pink";
+  element.style.border = "1px solid red";
+}
+
+function selectTagElement() {
+  const elements = document.getElementsByTagName("h1");
+  console.log(elements[0]);
+}
+
+function selectElementBySelector(selector) {
+  const element = document.querySelector(selector);
+  console.log(element);
+}
+
+function selectElementsBySelector(selector) {
+  const element = document.querySelectorAll(selector);
+  console.log(element);
+}
+
+function createElement() {
+  const element = document.createElement("h2");
+  const txt = document.createTextNode("Hello I am H2");
+  element.appendChild(txt);
+
+  const body = document.querySelector("body");
+
+  body.appendChild(element);
+}
+
+function showListOfUsers() {
+  const users = ["Aman", "Ajay", "Athira", "Sweta", "Praveeen", "Trimula"];
+
+  const list = document.createElement("ul");
+  for (let i = 0; i < users.length; i++) {
+    const li = document.createElement("li");
+    const txt = document.createTextNode(users[i]);
+    // li.innerHTML = users[i];
+    li.appendChild(txt);
+    list.appendChild(li);
+  }
+  list.style.listStyleType = "none";
+  const container = document.getElementById("list_of_users");
+  container.appendChild(list);
+}
+
+function removeHeading() {
+  const heading = document.querySelector("h1");
+  heading.remove();
+}
+
+function getClassName() {
+  const element = document.querySelector(".container");
+  element.className = "box";
+}
+
+function getClassList() {
+  const element = document.querySelector(".container");
+  element.classList.add("box");
+  element.classList.remove("big");
+  element.classList.replace("big", "small");
+  element.classList.toggle("show");
+  const isBox = element.classList.contains("box");
+}
diff --git a/javascript/Day34/style.css b/javascript/Day34/style.css
@@ -0,0 +1,14 @@
+.container {
+}
+
+#ID {
+}
+
+h1 {
+}
+
+.box {
+}
+
+.container {
+}