#3.0 ~ #4.0 commit

GDSC-DEU · Aug 6, 2024 · 0699be7 · 0699be7
1 parent 8d931bb
commit 0699be7
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 0 deletions.
diff --git a/jinwon/NOMAD/3강/app.js b/jinwon/NOMAD/3강/app.js
@@ -0,0 +1,44 @@
+const h1 = document.querySelector("div.hello:first-child h1");
+function handleTitleClick() {
+  console.log("title was clicked");
+  h1.style.color = "blue";
+}
+
+function handleMouseEnter() {
+  h1.innerText = "mouse is here";
+  /*console.log("mouse is here");*/
+}
+function handleMouseLeave() {
+  h1.innerText = "mouse is gone";
+  /*console.log("leave is here");*/
+}
+function handleWindowResize() {
+  /*화면 크기가 줄어들면 배경화면 색이 변함*/
+  document.body.style.backgroundColor = "tomato";
+}
+function handleWindowCopy() {
+  /*복사할 경우 copier 알림창이 나타남*/
+  alert("copier");
+}
+function handleWindowOffline() {
+  /*와이파이 꺼지면 알림창*/
+  alert("SOS no wifi");
+}
+function handleWindowOnline() {
+  /*와이파이 연결되면 알림창 */
+  alert("wifi");
+}
+
+h1.addEventListener("click", handleTitleClick);
+
+h1.addEventListener("mouseenter", handleMouseEnter);
+
+h1.addEventListener("mouseleave", handleMouseLeave);
+
+window.addEventListener("resize", handleWindowResize);
+
+window.addEventListener("copy", handleWindowCopy);
+
+window.addEventListener("offline", handleWindowOffline);
+
+window.addEventListener("online", handleWindowOnline);
diff --git a/jinwon/NOMAD/3강/index.html b/jinwon/NOMAD/3강/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" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div class="hello">
+      <h1 class="sexy-font">Click me!</h1>
+    </div>
+
+    <script src="test_3.8.js"></script>
+  </body>
+</html>
diff --git a/jinwon/NOMAD/3강/style.css b/jinwon/NOMAD/3강/style.css
@@ -0,0 +1,14 @@
+body {
+  background-color: beige;
+}
+h1 {
+  color: cornflowerblue;
+  transition: color 0.5s ease-in-out;
+}
+.clicked {
+  color: tomato;
+}
+.sexy-font {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
diff --git a/jinwon/NOMAD/3강/test_3.6.js b/jinwon/NOMAD/3강/test_3.6.js
@@ -0,0 +1,25 @@
+const h1 = document.querySelector("div.hello:first-child h1");
+
+/*
+function handleTitleClick() {
+  const currentColor = h1.style.color;
+  let newColor;
+  if(currentColor==="blue"){
+  newColor = "tomato";
+  }
+  else{
+  newColor = "blue";
+  }
+  h1.style.color = newColor;
+*/
+
+function handleTitleClick() {
+  const clickedClass = "clicked";
+  if (h1.className === clickedClass) {
+    h1.className = "";
+  } else {
+    h1.className = clickedClass;
+  }
+}
+
+h1.addEventListener("click", handleTitleClick);
diff --git a/jinwon/NOMAD/3강/test_3.8.js b/jinwon/NOMAD/3강/test_3.8.js
@@ -0,0 +1,16 @@
+const h1 = document.querySelector("div.hello:first-child h1");
+
+function handleTitleClick() {
+  /*const clickedClass = "clicked"; string을 반복하는 순간 const 사용
+  
+  if (h1.classList.contains(clickedClass)) {
+    h1.classList.remove(clickedClass);
+  } else {
+    h1.classList.add(clickedClass);
+  }*/
+  h1.classList.toggle("clicked");
+  /*toggle: h1의 classList에 clicked class 가 이미 있는지 확인해서
+  만약 있다면 clicked를 제거해줌*/
+}
+
+h1.addEventListener("click", handleTitleClick);
diff --git a/jinwon/NOMAD/4강/app.js b/jinwon/NOMAD/4강/app.js
@@ -0,0 +1,23 @@
+const h1 = document.querySelector("div.hello:first-child h1");
+
+function handleTitleClick() {
+  h1.classList.toggle("clicked");
+}
+
+h1.addEventListener("click", handleTitleClick);
+
+/*
+const loginForm = document.getElementById("login-form");
+
+const loginInput = loginForm.querySelector("input");
+*/
+const loginInput = document.querySelector("#login-form input");
+/*
+const loginButton = loginForm.querySelector("button");
+*/
+const loginButton = document.querySelector("#login-form button");
+
+function BtnClick() {
+  console.dir(loginInput.value);
+}
+loginButton.addEventListener("click", BtnClick);
diff --git a/jinwon/NOMAD/4강/index.html b/jinwon/NOMAD/4강/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Momentum App</title>
+  </head>
+  <body>
+    <div class="hello">
+      <h1>Title</h1>
+    </div>
+    <div id="login-form">
+      <input type="text" placeholder="what is your name" />
+      <button>Log In</button>
+    </div>
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/jinwon/NOMAD/4강/style.css b/jinwon/NOMAD/4강/style.css
@@ -0,0 +1,10 @@
+body {
+  background-color: beige;
+}
+h1 {
+  color: cornflowerblue;
+  transition: color 0.5s ease-in-out;
+}
+.clicked {
+  color: orange;
+}