feat: 🎸 added DOM manipulation example

Pratham82 · Pratham82 · commit 33b8d212f68e · 2024-05-14T15:03:58.000+05:30
diff --git a/2024 Prep/machine_coding/vanilla-js/dom-mainuplation-methods/index.html b/2024 Prep/machine_coding/vanilla-js/dom-mainuplation-methods/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Form Validation</title>
+    <link rel="stylesheet" href="./style.css" type="text/css" />
+  </head>
+  <body>
+    <header>
+      <h1>DOM Manipulation</h1>
+    </header>
+    <main></main>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/2024 Prep/machine_coding/vanilla-js/dom-mainuplation-methods/script.js b/2024 Prep/machine_coding/vanilla-js/dom-mainuplation-methods/script.js
@@ -0,0 +1,40 @@
+const divElement = document.createElement('div')
+
+const textContent = document.createTextNode('This is Text')
+divElement.appendChild(textContent)
+
+// Inline styles
+divElement.style.border = '1px solid black'
+divElement.style.padding = '10px'
+divElement.style.display = 'flex'
+divElement.style.justifyContent = 'space-between'
+divElement.style.alignItems = 'center'
+divElement.style.borderRadius = '10px'
+
+// Add styles via classes
+divElement.classList.add('container')
+
+// Add div to body
+document.body.appendChild(divElement)
+
+const crossButton = document.createElement('span')
+crossButton.style.backgroundColor = 'red'
+crossButton.style.padding = '5px 7px'
+crossButton.style.borderRadius = '50%'
+crossButton.innerHTML = 'X'
+crossButton.style.cursor = 'pointer'
+
+// Add cursor pointer on hover of cross button
+crossButton.addEventListener('mouseover', () => {
+  crossButton.style.cursor = 'pointer'
+})
+
+divElement.appendChild(crossButton)
+
+crossButton.addEventListener('click', () => {
+  // remove div
+  document.body.removeChild(divElement)
+})
+
+// Remove the component
+setTimeout(() => {}, 1000)
diff --git a/2024 Prep/machine_coding/vanilla-js/dom-mainuplation-methods/style.css b/2024 Prep/machine_coding/vanilla-js/dom-mainuplation-methods/style.css
@@ -0,0 +1,26 @@
+.form-container {
+  padding: 0;
+  margin-top: 100px;
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.form-input-field {
+  padding: 10px;
+  border-radius: 10px;
+  border-width: 0.5px;
+}
+
+.submit-btn {
+  padding: 10px;
+  display: block;
+  border-radius: 10px;
+  border-width: 0.5px;
+  cursor: pointer;
+}
+
+.container {
+  background-color: rgb(215, 209, 209);
+}
