diff --git a/JS/MOMENTUM/img/0.jpg b/JS/MOMENTUM/img/0.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..687cd3bac1de1d8bbd4bb56bda46430d02e9c588
Binary files /dev/null and b/JS/MOMENTUM/img/0.jpg differ
diff --git a/JS/MOMENTUM/img/1.jpeg b/JS/MOMENTUM/img/1.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..3c2f8860e13c26e6a93ea168f5d5ac1f907066e1
Binary files /dev/null and b/JS/MOMENTUM/img/1.jpeg differ
diff --git a/JS/MOMENTUM/img/2.jpeg b/JS/MOMENTUM/img/2.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..7224d92a02543058c1488d07586780e564ad7095
Binary files /dev/null and b/JS/MOMENTUM/img/2.jpeg differ
diff --git a/JS/MOMENTUM/img/3.jpg b/JS/MOMENTUM/img/3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a0ef4893bc4282e5a7a66bf1356c3149d9854c71
Binary files /dev/null and b/JS/MOMENTUM/img/3.jpg differ
diff --git a/JS/MOMENTUM/img/4.jpeg b/JS/MOMENTUM/img/4.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..5c2a658d0f9032ef01928eea33c4bc9c519931c6
Binary files /dev/null and b/JS/MOMENTUM/img/4.jpeg differ
diff --git a/JS/MOMENTUM/index.html b/JS/MOMENTUM/index.html
index 5dda2c1e09e94a3d7ff7afe61b2e6128593cc3a1..0e8f00194e7668a50f9e3037d453e40b145b10e8 100644
--- a/JS/MOMENTUM/index.html
+++ b/JS/MOMENTUM/index.html
@@ -3,7 +3,7 @@
<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>
@@ -16,7 +16,28 @@
/>
<input type="submit" value="Log In" />
</form>
- <h1 id="greeting" class="hidden"></h1>
- <script src="app.js"></script>
+ <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>
+ <!-- <li>
+ <span>text</span>
+ <button>X</button>
+ </li> -->
+ <div id="quote">
+ <span></span>
+ <span></span>
+ </div>
+ <div id="weather">
+ <span></span>
+ <span></span>
+ <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>
+ <script src="js/weather.js"></script>
</body>
</html>
\ No newline at end of file
diff --git a/JS/MOMENTUM/js/background.js b/JS/MOMENTUM/js/background.js
new file mode 100644
index 0000000000000000000000000000000000000000..98ea1942192ed3dbd4a7e6bbf7a14c5ccbe5d8b7
--- /dev/null
+++ b/JS/MOMENTUM/js/background.js
@@ -0,0 +1,9 @@
+const images = ["0.jpg", "1.jpeg", "2.jpeg", "3.jpg", "4.jpeg"];
+
+const chosenImage = images[Math.floor(Math.random() * images.length)];
+
+const bgImage = document.createElement("img");
+
+bgImage.src = `img/${chosenImage}`;
+
+document.body.appendChild(bgImage);
\ No newline at end of file
diff --git a/JS/MOMENTUM/js/clock.js b/JS/MOMENTUM/js/clock.js
new file mode 100644
index 0000000000000000000000000000000000000000..abd0eba10e9c4846cc2ea1598e67952020d03ea7
--- /dev/null
+++ b/JS/MOMENTUM/js/clock.js
@@ -0,0 +1,12 @@
+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);
\ No newline at end of file
diff --git a/JS/MOMENTUM/js/greetings.js b/JS/MOMENTUM/js/greetings.js
index 576cec01d761a643796e742ec9859f7a5b195060..9fbe193225d1e3278338a018b4696559853251bb 100644
--- a/JS/MOMENTUM/js/greetings.js
+++ b/JS/MOMENTUM/js/greetings.js
@@ -10,11 +10,10 @@ function onLoginSubmit(event) {
loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value;
localStorage.setItem(USERNAME_KEY, username);
- paintGreetings();
+ paintGreetings(username);
}
-function paintGreetings() {
- const username = localStorage.getItem(USERNAME_KEY);
+function paintGreetings(username) {
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
@@ -26,5 +25,5 @@ if(savedUsername === null){
loginForm.addEventListener("submit", onLoginSubmit);
}
else{
- paintGreetings();
+ paintGreetings(savedUsername);
}
\ No newline at end of file
diff --git a/JS/MOMENTUM/js/quotes.js b/JS/MOMENTUM/js/quotes.js
new file mode 100644
index 0000000000000000000000000000000000000000..560f11f5b77f2a43a4b3d1c50adc017c0b597eb2
--- /dev/null
+++ b/JS/MOMENTUM/js/quotes.js
@@ -0,0 +1,54 @@
+const quotes = [
+ {
+ quotes: "The way to get started is to quit talking and begin doing.",
+ author: "Walt Disney",
+ },
+ {
+ quotes: "Life is what happens when you're busy making other plans.",
+ author: "John Lennon",
+ },
+ {
+ quotes: "The world is a book and those who do not travel read only one page.",
+ author: "Saint Augustine",
+ },
+ {
+ quotes: "Life is either a daring adventure or nothing at all.",
+ author: "Helen Keller",
+ },
+ {
+ quotes: "To Travel is to Live",
+ author: "Hans Christian Andersen",
+ },
+ {
+ quotes: "Only a life lived for others is a life worthwhile.",
+ author: "Albert Einstein",
+ },
+ {
+ quotes: "You only live once, but if you do it right, once is enough.",
+ author: "Mae West",
+ },
+ {
+ quotes: "Never go on trips with anyone you do ntot love.",
+ author: "Hemmingway",
+ },
+ {
+ quotes: "We wander for distraction, but we travel for fulfilment.",
+ author: "Hilaire Belloc",
+ },
+ {
+ quotes: "Travel expands the mind and fills the gap.",
+ author: "Sheda Savage",
+ },
+ {
+ quotes: "Life is an egg",
+ author: "Juchang Lee",
+ }
+];
+
+const quote = document.querySelector("#quote span:first-child");
+const author = document.querySelector("#quote span:last-child");
+
+const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];
+
+quote.innerText = todaysQuote.quotes;
+author.innerText = todaysQuote.author;
\ No newline at end of file
diff --git a/JS/MOMENTUM/js/todo.js b/JS/MOMENTUM/js/todo.js
new file mode 100644
index 0000000000000000000000000000000000000000..be644f22b46af78927660fe2f761b3bdfafa6d11
--- /dev/null
+++ b/JS/MOMENTUM/js/todo.js
@@ -0,0 +1,60 @@
+const toDoForm = document.getElementById("todo-form");
+const toDoInput = toDoForm.querySelector("input");
+const toDoList = document.getElementById("todo-list");
+
+const TODOS_KEY = "todos";
+
+let toDos = [];
+
+function saveToDos() {
+ localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
+}
+
+function deleteToDo(event) {
+ const li = event.target.parentElement;
+ //event 직접 조회, path를 조회하면 버튼 위치 보임
+ //button의 부모인 li를 찾아서 삭제
+ li.remove();
+ toDos = toDos.filter(toDo => toDo.id !== parseInt(li.id));
+ saveToDos();
+}
+
+function paintToDo(newTodo) {
+ const li = document.createElement("li");
+ li.id = newTodo.id; // li에 id를 줌
+ const span = document.createElement("span");
+ span.innerText = newTodo.text;
+ const button = document.createElement("button");
+ button.innerText = "❌";
+ button.addEventListener("click", deleteToDo);
+ li.appendChild(span); // li 안에 span을 넣는다.
+ li.appendChild(button);
+ toDoList.appendChild(li);
+}
+
+function handleToDoSubmit(event) {
+ event.preventDefault();
+ const newTodo = toDoInput.value;
+ toDoInput.value = "";
+ const newTodoObj = {
+ text: newTodo,
+ id: Date.now(),
+ };
+ toDos.push(newTodoObj);
+ paintToDo(newTodoObj);
+ saveToDos();
+}
+
+toDoForm.addEventListener("submit", handleToDoSubmit);
+
+const savedToDos = localStorage.getItem(TODOS_KEY);
+console.log(savedToDos);
+if(savedToDos) {
+ const parseToDos = JSON.parse(savedToDos);
+ toDos = parseToDos
+ parseToDos.forEach(paintToDo);
+}
+
+function sexyFilter() {
+ return toDos.filter((toDo) => toDo.id !== parseInt(li.id));
+}
\ No newline at end of file
diff --git a/JS/MOMENTUM/js/weather.js b/JS/MOMENTUM/js/weather.js
new file mode 100644
index 0000000000000000000000000000000000000000..288669eea7aa220e10dd3b5573b39055833d3f21
--- /dev/null
+++ b/JS/MOMENTUM/js/weather.js
@@ -0,0 +1,25 @@
+const API_KEY = "252e2176496ae4337bc32ae0587d6d78";
+const API_KEY2 = "241051bf13976dd3ddf8b8d9f247255e";
+//키 아직 활성화 안됨
+
+function onGeoOk(position){
+ const lat = position.coords.latitude;
+ const lon = position.coords.longitude;
+ console.log("you live in", lat, lon);
+ const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY2}&units=metric`;
+ console.log(url);
+ fetch(url)
+ .then(response => response.json())
+ .then(data => {
+ const weather = document.querySelector("#weather span:first-child");
+ const city = document.querySelector("#weather span:last-child");
+ city.innerText = data.name;
+ weather.innerText = `${data.weather[0].main} / ${data.main.temp}`;
+ });
+}
+function onGeoError(){
+ alert("Can't find you. No weather for you.");
+}
+
+navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);
+
diff --git a/README.md b/README.md
index 71f81dd8e7808886e4a204182da493c797964e1c..a7e5b989f2b5abbaf101ac4e2606e27d89b52f62 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,14 @@
# React 앱 개발 연습
React 앱 실무 개발을 위한 기초 다지기
-1. HTML + CSS 이해하기
+## 1. HTML + CSS 이해하기
1시간 특강
https://youtu.be/cb7VlXqFla4?si=QxoXjOG5ksR4SHHK
-2. JavaScript 이해하기
- 1. 1시간 특강
+## 2. JavaScript 이해하기
+ a. JS 1시간 특강
https://youtu.be/hLhHFiwhRfA?si=_PuXq70jzJmJZxly
- 2. 노마드코더 JS vanilla : https://nomadcoders.co/javascript-for-beginners
+ b. 노마드코더 JS vanilla js로 크롬 앱 만들기: https://nomadcoders.co/javascript-for-beginners
-3. react 개발
\ No newline at end of file
+## 3. react 개발
\ No newline at end of file