노마드(5.3~7.0)

GDSC-DEU · Aug 25, 2024 · 6ec707d · 6ec707d
1 parent 0b3f569
commit 6ec707d
Show file tree

Hide file tree

Showing 10 changed files with 118 additions and 7 deletions.
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
@@ -5,11 +5,30 @@
     <title>Momentum App</title>
   </head>
   <body>
-    <form class="hidden" id="login-form"></form>
-
+    <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="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/greetings.js b/yoojin/노마드/js/greetings.js
@@ -1,4 +1,4 @@
-const loginForm = document.querySelector("#login-form ");
+const loginForm = document.querySelector("#login-form");
 const loginInput = document.querySelector("#login-form input");
 const greeting = document.querySelector("#greeting");
 
@@ -9,16 +9,16 @@ function onLoginSubmit(event) {
   event.preventDefault();
   loginForm.classList.add(HIDDEN_CLASSNAME);
   const username = loginInput.value;
-  localStorage.setItem("USERNAME_KEY", username);
+  localStorage.setItem(USERNAME_KEY, username);
   paintingGreetings(username);
 }
 
 function paintingGreetings(username) {
-  const username = localStorage.getItem(USERNAME_KEY);
-  greeting.innerText = "Hello" + username;
+  greeting.innerText = "Hello " + username;
   greeting.classList.remove(HIDDEN_CLASSNAME);
 }
-const savedUsername = localStorage.getItem("USERNAME_KEY");
+
+const savedUsername = localStorage.getItem(USERNAME_KEY);
 
 if (savedUsername === null) {
   loginForm.classList.remove(HIDDEN_CLASSNAME);

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);