Merge branch 'main' of https://github.com/GDSC-DEU/Web-Basic-Study-23-24

GDSC-DEU · Oct 23, 2024 · b507b95 · b507b95
2 parents f59fdd4 + 2c28176
commit b507b95
Show file tree

Hide file tree

Showing 19 changed files with 211 additions and 22 deletions.
diff --git a/minkyong/JavaScript Study/index.html b/minkyong/JavaScript Study/index.html
@@ -27,7 +27,10 @@ <h1 id="greeting" class="hidden"></h1>
 
     <h2 id="clock">00:00:00</h2>
 
-    <script src="app.js"></script>
-    <script src="clock.js"></script>
+    <script src="js/app.js"></script>
+    <script src="js/greetings.js"></script>
+    <script src="js/clock.js"></script>
+    <script src="js/background.js"></script>
+    <script src="js/todo.js"></script>
 </body>
 </html>
diff --git a/minkyong/JavaScript Study/app.js → minkyong/JavaScript Study/js/app.js b/minkyong/JavaScript Study/app.js → minkyong/JavaScript Study/js/app.js
@@ -2,7 +2,7 @@ const loginForm = document.querySelector("#login-form");
 const loginInput = document.querySelector("#login-form input");
 const greeting = document.querySelector("#greeting");
 
-const HIDDEN_CLASSNAME = "hidden";
+
 
 function onLoginSubmit(event){
     event.preventDefalut();

diff --git a/minkyong/JavaScript Study/js/background.js b/minkyong/JavaScript Study/js/background.js
@@ -0,0 +1,7 @@
+const images = ["0.jpeg", "1.jpeg", "2.jpeg"];
+const chosenImage = images[Math.floor(Math.random() * images.length)];
+
+
+const bgImage = document.createElement("img");
+bgImage.src = `img/${chosenImage}`;
+document.body.appendChild(bgImage);
diff --git a/minkyong/JavaScript Study/clock.js → minkyong/JavaScript Study/js/clock.js b/minkyong/JavaScript Study/clock.js → minkyong/JavaScript Study/js/clock.js
diff --git a/minkyong/JavaScript Study/js/greetings.js b/minkyong/JavaScript Study/js/greetings.js
@@ -0,0 +1,31 @@
+const loginForm = document.querySelector("#login-form");
+const loginInput = document.querySelector("#login-form input");
+const greeting = document.querySelector("#greeting");
+
+const HIDDEN_CLASSNAME = "hidden";
+const USERNAME_KEY = "username";
+
+function onLoginSubmit(event) {
+  event.preventDefault();
+  loginForm.classList.add(HIDDEN_CLASSNAME);
+  const username = loginInput.value;
+  localStorage.setItem(USERNAME_KEY, username);
+  paintingGreetings(username);
+}
+
+
+function paintingGreetings(username) {
+  greeting.innerText = "Hello " + username;
+  greeting.classList.remove(HIDDEN_CLASSNAME);
+}
+
+
+const savedUsername = localStorage.getItem(USERNAME_KEY);
+
+
+if (savedUsername === null) {
+  loginForm.classList.remove(HIDDEN_CLASSNAME);
+  loginForm.addEventListener("submit", onLoginSubmit);
+} else {
+  paintingGreetings(savedUsername);
+}
diff --git a/minkyong/JavaScript Study/js/todo.js b/minkyong/JavaScript Study/js/todo.js
@@ -0,0 +1,11 @@
+const toDoFrom = document.getElementById("todo-form");
+const toDoInput = toDoFrom.querySelector("input");
+const toDoList = document.getElementById("todo-list");
+
+function handleToDoSubmit(event) {
+  event.preventDefault();
+  const newTodo = toDoInput.value;
+  toDoInput.value = "";
+}
+
+toDoFrom.addEventListener("submit", handleToDoSubmit);
diff --git a/yoojin/노마드/app.js b/yoojin/노마드/app.js
diff --git a/yoojin/노마드/css/style.css b/yoojin/노마드/css/style.css
@@ -0,0 +1,3 @@
+.hidden {
+  display: none;
+}
diff --git a/yoojin/노마드/img/0.jpeg b/yoojin/노마드/img/0.jpeg
diff --git a/yoojin/노마드/img/1.jpeg b/yoojin/노마드/img/1.jpeg
diff --git a/yoojin/노마드/img/2.jpeg b/yoojin/노마드/img/2.jpeg
diff --git a/yoojin/노마드/index.html b/yoojin/노마드/index.html
@@ -1,16 +1,34 @@
 <!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" />
+    <link rel="stylesheet" href="css/style.css" />
     <title>Momentum App</title>
   </head>
   <body>
-    <div id="login-form">
-      <input type="text" placeholder="What is your name?" />
-      <button>Log In</button>
+    <form id="login-form">
+      <input
+        required
+        maxlength="15"
+        type="text"
+        placeholder="What is your name?"
+      />
+      <input type="submit" value="Log In" />
+    </form>
+    <h2 id="clock">00:00:00</h2>
+    <h1 class="hidden" id="greeting"></h1>
+    <form id="todo-form">
+      <input type="text" placeholder="Write a To Do and Press Enter" required />
+    </form>
+    <ul id="todo-list"></ul>
+    <div id="quote">
+      <span></span>
+      <span></span>
     </div>
-    <script src="app.js"></script>
+    <script src="js/app.js"></script>
+    <script src="js/greetings.js"></script>
+    <script src="js/clock.js"></script>
+    <script src="js/quotes.js"></script>
+    <script src="js/background.js"></script>
+    <script src="js/todo.js"></script>
   </body>
 </html>
diff --git a/yoojin/노마드/js/app.js b/yoojin/노마드/js/app.js
@@ -0,0 +1,14 @@
+const loginForm = document.querySelector("#login-form");
+const loginInput = document.querySelector("#login-form input");
+const greeting = document.querySelector("#greeting");
+
+function onLoginSubmit(event) {
+  event.preventDefault();
+  loginForm.classList.add("hidden");
+  const username = loginInput.value;
+  console.log(username);
+  greeting.innerText = "Hello " + username;
+  greeting.classList.remove("hidden");
+}
+
+loginForm.addEventListener("submit", onLoginSubmit);
diff --git a/yoojin/노마드/js/background.js b/yoojin/노마드/js/background.js
@@ -0,0 +1,6 @@
+const images = ["0.jpeg", "1.jpeg", "2.jpeg"];
+const chosenImage = images[Math.floor(Math.random() * images.length)];
+
+const bgImage = document.createElement("img");
+bgImage.src = `img/${chosenImage}`;
+document.body.appendChild(bgImage);
diff --git a/yoojin/노마드/js/clock.js b/yoojin/노마드/js/clock.js
@@ -0,0 +1,11 @@
+const clock = document.querySelector("h2#clock");
+
+function getClock() {
+  const date = new Date();
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  const seconds = String(date.getSeconds()).padStart(2, "0");
+  clock.innerText = `${hours}:${minutes}:${seconds}`;
+}
+getClock();
+setInterval(getClock, 1000);
diff --git a/yoojin/노마드/js/greetings.js b/yoojin/노마드/js/greetings.js
@@ -0,0 +1,28 @@
+const loginForm = document.querySelector("#login-form");
+const loginInput = document.querySelector("#login-form input");
+const greeting = document.querySelector("#greeting");
+
+const HIDDEN_CLASSNAME = "hidden";
+const USERNAME_KEY = "username";
+
+function onLoginSubmit(event) {
+  event.preventDefault();
+  loginForm.classList.add(HIDDEN_CLASSNAME);
+  const username = loginInput.value;
+  localStorage.setItem(USERNAME_KEY, username);
+  paintingGreetings(username);
+}
+
+function paintingGreetings(username) {
+  greeting.innerText = "Hello " + username;
+  greeting.classList.remove(HIDDEN_CLASSNAME);
+}
+
+const savedUsername = localStorage.getItem(USERNAME_KEY);
+
+if (savedUsername === null) {
+  loginForm.classList.remove(HIDDEN_CLASSNAME);
+  loginForm.addEventListener("submit", onLoginSubmit);
+} else {
+  paintingGreetings(savedUsername);
+}
diff --git a/yoojin/노마드/js/quotes.js b/yoojin/노마드/js/quotes.js
@@ -0,0 +1,58 @@
+const quotes = [
+  {
+    quote:
+      "Without continuous personal development, you are now all that you will ever become and hell starts when the person you are meets the person you could have been.",
+    author: "Eli Cohen",
+  },
+  {
+    quote:
+      "Working hard for something we don't care about is called stressed, working hard for something we love is called passion.",
+    author: "Simon Sinek",
+  },
+  {
+    quote:
+      "Move out of your comfort zone. You can only grow if you are willing to feel awkward and uncomfortable when you try something new.",
+    author: "Brian Tracy",
+  },
+  {
+    quote:
+      "Don't let the fear of losing be greater than the excitement of winning.",
+    author: "Robert Kiyosaki",
+  },
+  {
+    quote:
+      "Develop success from failures. Discouragement and failure are two of the surest stepping stones to success.",
+    author: "Dale Carnegie",
+  },
+  {
+    quote: "Action is the foundational key to all success.",
+    author: "Pablo Picasso",
+  },
+  {
+    quote:
+      "The difference between a successful person and others is not a lack of strength, not a lack of knowledge, but rather a lack of will.",
+    author: "Vince Lombardi",
+  },
+  {
+    quote:
+      "It is your determination and persistence that will make you a successful person.",
+    author: "Kenneth J Hutchins",
+  },
+  {
+    quote:
+      "You can waste your life drawing lines. Or you can live your life crossing them.",
+    author: "Shonda Rhimes",
+  },
+  {
+    quote: "Be poor, humble and driven. Don't be afraid to shift or pivot.",
+    author: "Alex Rodriguez",
+  },
+];
+
+const quoteText = document.querySelector("#quote span:first-child");
+const authorText = document.querySelector("#quote span:last-child");
+
+const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];
+
+quoteText.innerText = todaysQuote.quote;
+authorText.innerText = todaysQuote.author;
diff --git a/yoojin/노마드/js/todo.js b/yoojin/노마드/js/todo.js
@@ -0,0 +1,11 @@
+const toDoFrom = document.getElementById("todo-form");
+const toDoInput = toDoFrom.querySelector("input");
+const toDoList = document.getElementById("todo-list");
+
+function handleToDoSubmit(event) {
+  event.preventDefault();
+  const newTodo = toDoInput.value;
+  toDoInput.value = "";
+}
+
+toDoFrom.addEventListener("submit", handleToDoSubmit);
diff --git a/yoojin/노마드/style.css b/yoojin/노마드/style.css