Add files via upload

cg10036 · Jun 26, 2022 · bf0bfb0 · bf0bfb0
commit bf0bfb0
Show file tree

Hide file tree

Showing 4 changed files with 215 additions and 0 deletions.
diff --git a/add.html b/add.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Todo</title>
+    <link href="./style.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+    <div class="container">
+        <div class="nav-box">
+            <a href="./index.html">Todo</a>
+            <a class="active" href="./add.html">Add Todo</a>
+        </div>
+    </div>
+</body>
+<script src="./index.js"></script>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Todo</title>
+    <link href="./style.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+    <div class="container">
+        <div class="nav-box">
+            <a class="active" href="./index.html">Todo</a>
+            <a href="./add.html">Add Todo</a>
+        </div>
+        <div class="main-box">
+            <div id="prev" class="arrow-box">&lt;</div>
+            <div class="todo-box">
+                <div class="todo-content">로딩중...</div>
+                <div class="todo-button"></div>
+            </div>
+            <div id="next" class="arrow-box">&gt;</div>
+        </div>
+    </div>
+</body>
+<script src="./index.js"></script>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,95 @@
+class Todo {
+  constructor() {
+    this.data = localStorage.getItem("data");
+    if (this.data) {
+      try {
+        this.data = JSON.parse(this.data);
+      } catch {}
+    }
+    this.idx = 0;
+    if (!this.data) this.data = [];
+    console.log(this.data);
+  }
+  save() {
+    localStorage.setItem("data", JSON.stringify(this.data));
+  }
+  getNowData() {
+    return this.data[this.idx];
+  }
+  getNextData() {
+    if (++this.idx >= this.data.length) {
+      this.idx = 0;
+    }
+    return this.getNowData();
+  }
+  getPrevData() {
+    if (--this.idx < 0) {
+      this.idx = this.data.length - 1;
+    }
+    return this.getNowData();
+  }
+  removeNowData() {
+    this.data.splice(this.idx, 1);
+    if (this.idx >= this.data.length) {
+      this.idx = 0;
+    }
+    this.save();
+  }
+  addNewData(str) {
+    this.data.push(str);
+    this.save();
+  }
+}
+let todo = new Todo();
+window.todo = todo; // for debug
+
+switch (location.pathname.split("/").at(-1)) {
+  case "add.html":
+    window.onload = () => {
+      setTimeout(() => {
+        let result = "";
+        while (result === "") {
+          result = prompt("추가할 할 일을 입력해주세요");
+          if (result === null) {
+            location.href = "./index.html";
+          } else if (result === "") {
+            alert("빈칸이 있습니다.");
+          } else {
+            todo.addNewData(result);
+            location.href = "./index.html";
+          }
+        }
+      }, 1);
+    };
+    break;
+  case "":
+  case "index.html":
+    let mutex = false;
+
+    let prev = document.querySelector("#prev");
+    let next = document.querySelector("#next");
+    let content = document.querySelector(".todo-content");
+    let button = document.querySelector(".todo-button");
+    content.textContent = todo.getNowData() ?? "등록된 할 일이 없습니다.";
+    prev.addEventListener("click", () => {
+      content.textContent = todo.getPrevData() ?? "등록된 할 일이 없습니다.";
+    });
+    next.addEventListener("click", () => {
+      content.textContent = todo.getNextData() ?? "등록된 할 일이 없습니다.";
+    });
+    button.addEventListener("click", () => {
+      if (todo.getNowData() === undefined) return;
+      if (mutex) return;
+      mutex = true;
+
+      button.classList.add("active");
+      setTimeout(() => {
+        todo.removeNowData();
+        button.classList.remove("active");
+        content.textContent = todo.getNowData() ?? "등록된 할 일이 없습니다.";
+
+        mutex = false;
+      }, 750);
+    });
+    break;
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,74 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+.nav-box {
+    background-color: #333333;
+    display: flex;
+    flex-direction: row;
+    height: 58px;
+}
+
+.nav-box>a {
+    padding: 15px;
+    padding-left: 25px;
+    padding-right: 25px;
+    color: white;
+    text-decoration: none;
+    font-size: 24px;
+}
+
+.active {
+    background-color: #04AA6D !important;
+}
+
+.nav-box>a:hover {
+    background-color: #000;
+}
+
+.main-box {
+    display: flex;
+    height: calc(100vh - 58px);
+    justify-content: center;
+    align-items: center;
+}
+
+.arrow-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 10vh;
+    font-size: 24px;
+    padding: 30px;
+    cursor: pointer;
+}
+
+.arrow-box:hover {
+    background-color: #e0e0e0;
+}
+
+.todo-box {
+    margin-left: 10px;
+    margin-right: 10px;
+    width: 700px;
+    font-size: 24px;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+}
+
+.todo-button {
+    margin-top: 10px;
+    height: 25px;
+    width: 25px;
+    background-color: rgb(250, 250, 250);
+    border: 1px solid black;
+    cursor: pointer;
+}
+
+.todo-button:hover {
+    background-color: rgb(235, 235, 235);
+}