modernJS 1st Week

GDSC-DEU · Jul 30, 2024 · 715b482 · 715b482
1 parent 4a045e4
commit 715b482
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 0 deletions.
diff --git a/eunjin/modernJS/app.js b/eunjin/modernJS/app.js
@@ -0,0 +1,33 @@
+const title = document.querySelector("div.hello:first-child h1");
+
+var color = "black";
+
+function handleTitleColor() {
+  if (color == "black") {
+    title.style.color = "blue";
+    color = "blue";
+  } else if (color == "blue") {
+    title.style.color = "black";
+    color = "black";
+  }
+}
+
+function handleMouseEnter() {
+  if (title.style.color == "black") {
+    title.style.color = "yellow";
+  } else if (title.style.color == "blue") {
+    title.style.color = "green";
+  }
+}
+
+function handleMouseLeave() {
+  if (title.style.color == "yellow") {
+    title.style.color = "black";
+  } else if (title.style.color == "green") {
+    title.style.color = "blue";
+  }
+}
+
+title.addEventListener("click", handleTitleColor);
+title.addEventListener("mouseenter", handleMouseEnter);
+title.addEventListener("mouseleave", handleMouseLeave);
diff --git a/eunjin/modernJS/index.html b/eunjin/modernJS/index.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>Document</title>
+  </head>
+  <body>
+    <div class="hello">
+      <h1 style="color: black">하이하이</h1>
+    </div>
+    <script src="app.js"></script>
+  </body>
+</html>