todo_list_project

beom-jun-kim · Jul 6, 2022 · 0424baa · 0424baa
commit 0424baa
Show file tree

Hide file tree

Showing 14 changed files with 382 additions and 0 deletions.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,145 @@
+@charset "utf-8";
+
+@font-face {
+    font-family: 'NanumBarunGothic';
+    font-style: normal;
+    font-weight: 700;
+    src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.eot');
+    src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.ttf') format('truetype')
+}
+
+@font-face {
+    font-family: 'NanumBarunGothic';
+    font-style: normal;
+    font-weight: 300;
+    src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.eot');
+    src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.ttf') format('truetype');
+}
+
+.nanumbarungothic * {
+    font-family: 'NanumBarunGothic', sans-serif;
+}
+
+:root {
+    --primary-color: rgb(235, 235, 235);
+    --small-font: 1rem;
+    --line-height: 30px;
+}
+
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+.hidden {
+    display: none;
+}
+
+body {
+    position: relative;
+    font-size: 0;
+}
+
+.box {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+    color: var(--primary-color);
+}
+
+img {
+    width: 100%;
+    height: 100vh;
+}
+
+.overlay {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.295);
+}
+
+.box {
+    text-align: center;
+    font-family: 'NanumBarunGothic';
+}
+
+span {
+    font-size: var(--small-font);
+}
+
+.box #clock {
+    font-size: 5rem;
+}
+
+.box #greeting,
+.box #todo-list,
+.box #quote,
+.box #login-form {
+    margin: 20px 0;
+}
+
+.box #greeting {
+    font-size: 1.5rem;
+    font-family: 'NanumBarunGothic';
+    font-weight: 300;
+}
+
+.box #todo-form input,
+.box #login-form input {
+    border: none;
+    outline: none;
+    border-bottom: 2px solid var(--primary-color);
+    background: transparent;
+    font-size: var(--small-font);
+    padding: 5px;
+    color: var(--primary-color);
+}
+
+.box #todo-form input::placeholder,
+.box #login-form input::placeholder {
+    color: var(--primary-color);
+    font-family: 'NanumBarunGothic';
+    font-weight: 300;
+    font-size: var(--small-font);
+}
+
+.box #todo-list {
+    line-height: var(--line-height);
+    list-style-position: inside;
+    list-style-type: circle;
+    font-size: var(--small-font);
+}
+
+.box #login-form button {
+    width: 70px;
+    height: 30px;
+    line-height: 27px;
+    text-transform: uppercase;
+}
+
+.box #todo-list button,
+.box #login-form button {
+    background: var(--primary-color);
+    border: none;
+    color: #000;
+    transform: translateX(20px);
+    cursor: pointer;
+    padding: 2px 5px;
+}
+
+.box #quote span {
+    word-break: keep-all;
+    display: block;
+    line-height: var(--line-height);
+}
+
+@media screen and (max-width:480px){
+    .box #clock {
+        font-size: 4rem;
+    }
+}
diff --git a/img/0.jpeg b/img/0.jpeg
diff --git a/img/1.jpeg b/img/1.jpeg
diff --git a/img/2.jpeg b/img/2.jpeg
diff --git a/img/3.jpeg b/img/3.jpeg
diff --git a/img/4.jpeg b/img/4.jpeg
diff --git a/img/5.jpeg b/img/5.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/css/style.css">
+    <title>random</title>
+</head>
+
+<body>
+
+    <div class="overlay"></div>
+
+    <div class="box">
+
+        <!-- clock -->
+        <h2 id="clock">00:00:00</h2>
+
+        <!-- greeting -->
+        <h1 id="greeting" class="hidden"></h1>
+        <form id="login-form" class="hidden">
+            <input required maxlength="15" type="text" placeholder="what is your name?">
+            <button>log in</button>
+        </form>
+
+        <!-- todo list -->
+        <form id="todo-form">
+            <input type="text" placeholder="write a To Do and Press" required>
+        </form>
+        <ul id="todo-list"></ul>
+
+        <!-- quote -->
+        <div id="quote">
+            <span></span>
+            <span></span>
+        </div>
+
+        <!-- weather -->
+        <id id="weather">
+            <span></span>
+            <span></span>
+        </id>
+
+    </div>
+
+
+    <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>
diff --git a/js/background.js b/js/background.js
@@ -0,0 +1,10 @@
+
+const images = ["0.jpeg","1.jpeg","2.jpeg","3.jpeg","4.jpeg","5.jpeg"];
+
+const selectImages = images[Math.floor(Math.random() * images.length)];
+
+const bgImages = document.createElement("img");
+
+bgImages.src = `img/${selectImages}`;
+
+document.body.appendChild(bgImages);
diff --git a/js/clock.js b/js/clock.js
@@ -0,0 +1,14 @@
+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}`;
+
+    // clock.innerText = new Date().toLocaleTimeString();
+}
+
+getClock();
+setInterval(getClock, 1000);
diff --git a/js/greetings.js b/js/greetings.js
@@ -0,0 +1,27 @@
+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 onLoinSubmit(event){
+    event.preventDefault();
+    loginForm.classList.add(HIDDEN_CLASSNAME);
+    const username = loginInput.value;
+    localStorage.setItem(USERNAME_KEY, username);
+    paintGreetings(username);
+}
+
+function paintGreetings(username){
+    greeting.innerText = `안녕하세요 ${username}님!`;
+    greeting.classList.remove(HIDDEN_CLASSNAME);
+}
+
+const savedUsername = localStorage.getItem(USERNAME_KEY);
+
+if(savedUsername === null) {
+    loginForm.classList.remove(HIDDEN_CLASSNAME);
+    loginForm.addEventListener('submit',onLoinSubmit);
+} else {
+    paintGreetings(savedUsername);
+}
diff --git a/js/quotes.js b/js/quotes.js
@@ -0,0 +1,50 @@
+const quotes = [
+    {
+        quote: "강한 이의 슬픔은 아름답다",
+        author: "-김남조-",
+    },
+    {
+        quote: "공부와 실천은 수레의 두 바퀴와 같다. 자기 자신도 이롭게 하고 남도 이롭게 해야 한다",
+        author: "-원효-",
+    },
+    {
+        quote: "길가의 민들레는 밟혀도 꽃을 피운다",
+        author: "-우장춘-",
+    },
+    {
+        quote: "논리의 검증을 거치지 않은 경험은 잡담이며 경험의 검증을 거치지 않은 논리는 공론이다",
+        author: "-김대중-",
+    },
+    {
+        quote: "고통을 거치지 않고 얻은 승리는 영광이 아니다.",
+        author: "-나폴레옹-",
+    },
+    {
+        quote: "승리하면 조금 배울 수 있고, 패배하면 모든 것을 배울 수 있다.",
+        author: "-크리스티 메튜슨-",
+    },
+    {
+        quote: "산을 움직이려 하는 이는 작은 돌을 들어내는 일로 시작한다.",
+        author: "-공자-",
+    },
+    {
+        quote: "항상 갈구하라. 바보짓을 두려워마라.",
+        author: "-스티브 잡스-",
+    },
+    {
+        quote: "나는 그저 나보다 머리가 좋은 사람들을 채용했을 뿐이다.",
+        author: "-록펠러-",
+    },
+    {
+        quote: "리스크를 줄이는 것이 이익을 추구하는 일보다 더 중요하다.",
+        author: "-제임스 핑크스-",
+    },
+];
+
+const quote = document.querySelector('#quote span:first-child');
+const author = document.querySelector('#quote span:last-child');
+
+const todayQuotes = quotes[Math.floor(Math.random() * quotes.length)];
+
+quote.innerText = todayQuotes.quote;
+author.innerText = todayQuotes.author;
diff --git a/js/todo.js b/js/todo.js
@@ -0,0 +1,60 @@
+const toDoForm = document.getElementById('todo-form');
+const toDoList = document.getElementById('todo-list');
+const toDoInput = document.querySelector('#todo-form input');
+
+const TODOS_KEY = 'toDos';
+let toDos = [];
+
+// 배열 문자열로 저장
+function saveToDos() {
+    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
+}
+
+// X클릭시 삭제 함수, 지운 함수 기억
+function deleteBtn(event) {
+    const li = event.target.parentElement;
+    li.remove();
+    toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
+    saveToDos();
+}
+
+// submit시 그림을 그려주는(글자들이 나타나게 해주는) 함수
+function paintToDo(newTodo) {
+    const li = document.createElement('li');
+    li.id = newTodo.id;
+    const span = document.createElement('span');
+    span.innerText = newTodo.text;
+    const button = document.createElement('button');
+    button.innerText = 'X';
+    button.addEventListener('click', deleteBtn);
+    li.appendChild(span);
+    li.appendChild(button);
+    toDoList.appendChild(li);
+}
+
+// submit시, 사용자가 입력한 text값을 오브젝트로 변환 후 저장
+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);
+
+// 배열에 값이 있을경우,
+// 문자열인 배열을 다시 오브젝트로 변환 후 배열로 도출
+// 배열에 빈값을 주지않기 위해 (why? 그래야 이전것을 기억함) 원래 있던 배열의 값을 넣어줌
+// 배열에 선언된 각 item을 실행시킴
+const savedToDos = localStorage.getItem(TODOS_KEY);
+
+if (savedToDos !== null) {
+    const parsedToDos = JSON.parse(savedToDos);
+    toDos = parsedToDos;
+    parsedToDos.forEach(paintToDo);
+}
diff --git a/js/weather.js b/js/weather.js
@@ -0,0 +1,19 @@
+const API_KEY = '3cdb98a57730faca4e368816041c8e44';
+
+function onGeoOk(position){
+    const lat = position.coords.latitude;
+    const log = position.coords.longitude;
+    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${log}&appid=${API_KEY}&units=metric`;
+    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);