js complted, need to test after API key accepted.

5725517f · juchang Lee · 60f90ea2 · 5725517f · 5725517f · 5725517f
Commit 5725517f authored 1 year ago by juchang Lee
--- a/JS/MOMENTUM/img/0.jpg
+++ b/JS/MOMENTUM/img/0.jpg
--- a/JS/MOMENTUM/img/1.jpeg
+++ b/JS/MOMENTUM/img/1.jpeg
--- a/JS/MOMENTUM/img/2.jpeg
+++ b/JS/MOMENTUM/img/2.jpeg
--- a/JS/MOMENTUM/img/3.jpg
+++ b/JS/MOMENTUM/img/3.jpg
--- a/JS/MOMENTUM/img/4.jpeg
+++ b/JS/MOMENTUM/img/4.jpeg
--- 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
--- a/JS/MOMENTUM/js/background.js
+++ b/JS/MOMENTUM/js/background.js
+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
--- a/JS/MOMENTUM/js/clock.js
+++ b/JS/MOMENTUM/js/clock.js
+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
--- 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
--- a/JS/MOMENTUM/js/quotes.js
+++ b/JS/MOMENTUM/js/quotes.js
+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
--- a/JS/MOMENTUM/js/todo.js
+++ b/JS/MOMENTUM/js/todo.js
+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
--- a/JS/MOMENTUM/js/weather.js
+++ b/JS/MOMENTUM/js/weather.js
+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);
+
--- a/README.md
+++ b/README.md
 # 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