From 0b11e720578f47a2d565f8bd5632cf41deba99ad Mon Sep 17 00:00:00 2001
From: Pushpak Raut <pushpakraut123@gmail.com>
Date: Sat, 2 Sep 2023 15:48:52 +0530
Subject: [PATCH] solution: updated the 1st challenge of dom manipulation (1)

---
 solutions/dom_manipulation/1/1.css  | 23 +++++++++++++++++++++++
 solutions/dom_manipulation/1/1.html | 14 ++++++++++++++
 solutions/dom_manipulation/1/1.js   | 18 ++++++++++++++++++
 3 files changed, 55 insertions(+)
 create mode 100644 solutions/dom_manipulation/1/1.css
 create mode 100644 solutions/dom_manipulation/1/1.html
 create mode 100644 solutions/dom_manipulation/1/1.js

diff --git a/solutions/dom_manipulation/1/1.css b/solutions/dom_manipulation/1/1.css
new file mode 100644
index 0000000..e15e793
--- /dev/null
+++ b/solutions/dom_manipulation/1/1.css
@@ -0,0 +1,23 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body{
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+button{
+    width: 7rem;
+    height: 3rem;
+    color: #fff;
+    background-color: red;
+    border-radius: 30px;
+    outline: none;
+    border: none;
+    cursor: pointer;
+    font-size: 1.3rem;
+}
\ No newline at end of file
diff --git a/solutions/dom_manipulation/1/1.html b/solutions/dom_manipulation/1/1.html
new file mode 100644
index 0000000..32dfc89
--- /dev/null
+++ b/solutions/dom_manipulation/1/1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dom manipulation 1st challenge</title>
+    <link rel="stylesheet" href="1.css">
+</head>
+<body>
+    <button>Save</button>
+
+    <script src="1.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/solutions/dom_manipulation/1/1.js b/solutions/dom_manipulation/1/1.js
new file mode 100644
index 0000000..3f3cda1
--- /dev/null
+++ b/solutions/dom_manipulation/1/1.js
@@ -0,0 +1,18 @@
+const button = document.querySelector("button");
+
+button.addEventListener("click", () => {
+  if (button.innerHTML === "Save") {
+    button.innerText = "Saved";
+    button.style.backgroundColor = "#000";
+    removeSaved();
+  } else {
+    removeSaved();
+  }
+});
+
+function removeSaved() {
+  setTimeout(() => {
+    button.innerText = "Save";
+    button.style.backgroundColor = "red";
+  }, 2000);
+}