todolist1st

2 years ago · 080e089de0
parent f0eabccb9d
commit 080e089de0
13 changed files with 1732 additions and 72 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/.prettierrc
+++ b/.prettierrc
@ -1,4 +0,0 @@
-{
-  "singleQuote": true,
-  "trailingComma": "all"
-}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,20 +1,20 @@
 {
  "scripts": {
    "start": "snowpack dev",
-    "build": "snowpack build",
-    "test": "echo \"This template does not include a test runner by default.\" && exit 1",
-    "format": "prettier --write \"src/**/*.{ts,js}\"",
-    "lint": "prettier --check \"src/**/*.{ts,js}\""
+    "build": "snowpack build"
  },
  "dependencies": {
-    "canvas-confetti": "^1.2.0"
+    "canvas-confetti": "^1.2.0",
+    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@snowpack/plugin-typescript": "^1.2.1",
    "@types/canvas-confetti": "^1.0.0",
    "@types/snowpack-env": "^2.3.3",
+    "@types/uuid": "^8.3.4",
    "prettier": "^2.2.1",
    "snowpack": "^3.3.7",
-    "typescript": "^4.2.4"
+    "typescript": "^4.2.4",
+    "typings-for-css-modules-loader": "^1.7.0"
  }
 }
--- a/public/.DS_Store
+++ b/public/.DS_Store
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.css
+++ b/public/index.css
@ -1,14 +0,0 @@
-#img {
-  display: block;
-  margin: auto;
-  height: 128px;
-  width: 128px;
-  padding: 2rem;
-}
-
-#canvas {
-  display: block;
-  margin: 2rem auto;
-  width: 540px;
-  height: 540px;
-}
--- a/public/index.html
+++ b/public/index.html
@ -1,27 +1,35 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content="Web site created using create-snowpack-app" />
-    <link rel="stylesheet" type="text/css" href="/index.css" />
-    <title>Snowpack App</title>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="dist/index.js" type="module"></script>
+    <!-- <link rel="stylesheet" href="../css/default.css" media="only screen" /> -->
+    <title>Document</title>
+    <style>
+      #list {
+        list-style: none;
+        padding: 0;
+      }
+    </style>
  </head>
  <body>
-    <img id="img" src="/logo.svg" />
-    <canvas id="canvas"></canvas>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <script type="module" src="/dist/index.js"></script>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
+    <div class="container">
+      <div class="title">
+        <h1>Would this be a <i>To-do-list</i>?</h1>
+      </div>

-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
+      <div class="thelist">
+        <div class="typingform">
+          <form id="new-task-form">
+            <input type="text" id="new-task-title" />
+            <button type="submit">Add</button>
+          </form>
+        </div>

-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+        <ul id="list"></ul>
+      </div>
+    </div>
  </body>
 </html>
--- a/public/logo.svg
+++ b/public/logo.svg
@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-  <path fill="#E44D26" d="M107.6 470.9l-33-370.3h362.8l-33.1 370.2L255.8 512z"/>
-  <path fill="#F16529" d="M256 480.5l120-33.3 28.3-316.3H256z"/>
-  <path fill="#EBEBEB" d="M256 268.2h-60.1l-4.1-46.5H256v-45.4H142.1l1.1 12.2 11.2 125.1H256zM256 386.2h-.2l-50.6-13.6-3.2-36.3h-45.6l6.4 71.3 93 25.9.2-.1z"/>
-  <path d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21.1v23h-23.1V0zM206 22.9h-20.3V0h63.7v22.9h-20.3V69H206V23zM259.5 0h24l14.9 24.3L313.2 0h24v69h-23V34.8l-15.8 24.6h-.4l-16-24.6V69h-22.5V0zM348.7 0h23.1v46.2h32.5V69h-55.6V0z"/>
-  <path fill="#FFF" d="M255.8 268.2v45.4h56l-5.3 58.9-50.7 13.7v47.2l93.1-25.8.7-7.6 10.7-119.6 1.1-12.2h-12.2zM255.8 176.3v45.4H365.5l.9-10.2 2.1-23 1.1-12.2z"/>
-</svg>
--- a/src/.DS_Store
+++ b/src/.DS_Store
--- a/src/css/default.css
+++ b/src/css/default.css
@ -0,0 +1,61 @@
+body,
+html {
+  font-size: 16px;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  width: 100%;
+  height: 100%;
+}
+
+.container {
+  width: 70%;
+  height: 100%;
+  margin: 0 auto;
+}
+
+.title {
+  background-color: pink;
+  padding-top: 2%;
+  display: flex;
+  justify-content: center;
+}
+
+.thelist {
+  background-color: azure;
+  width: 100%;
+  height: 100vh; /*notsure*/
+}
+
+.typingform {
+  background-color: aliceblue;
+  display: flex;
+  justify-content: end;
+}
+
+#list {
+  margin: 0 auto;
+  background-color: beige;
+  border: 1px solid black;
+  padding: 1.5% 4%;
+  width: 50%;
+}
+
+li {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 1.5%;
+}
+
+.deletebtn {
+  width: 4px;
+  height: 4px;
+  background-color: orangered;
+  border-radius: 50%;
+  margin-top: 1.5%;
+  cursor: pointer;
+}
--- a/src/index.ts
+++ b/src/index.ts
@ -1,11 +1,63 @@
-/**
- * This file is just a silly example to show everything working in the browser.
- * When you're ready to start on your site, clear the file. Happy hacking!
- **/
+import { v4 as uuidV4 } from "uuid";
+import "./css/default.css";

-import confetti from 'canvas-confetti';
+type Task = {
+  id: string;
+  title: string;
+  completed: boolean;
+  createdAt: Date;
+};

-confetti.create(document.getElementById('canvas') as HTMLCanvasElement, {
-  resize: true,
-  useWorker: true,
-})({ particleCount: 200, spread: 200 });
+const list = document.querySelector<HTMLUListElement>("#list");
+const form = document.getElementById("new-task-form") as HTMLFormElement | null;
+const input = document.querySelector<HTMLInputElement>("#new-task-title");
+const tasks: Task[] = loadTasks();
+tasks.forEach(addListItem); //for each task we'll render
+
+form?.addEventListener("submit", (e) => {
+  e.preventDefault();
+
+  if (input?.value == "" || input?.value == null) return;
+
+  const newTask: Task = {
+    id: uuidV4(),
+    title: input.value,
+    completed: false, //with this, checkbox is not (initially) ticked
+    createdAt: new Date(),
+  };
+  tasks.push(newTask); //하나아이템 type then push, then it's uploaded(stored). <-wrote it after line 13
+
+  addListItem(newTask);
+  input.value = ""; //clear the input type part, as you already made one to do item
+});
+
+function addListItem(task: Task) {
+  const item = document.createElement("li");
+  const label = document.createElement("label");
+  const deletebtn = document.createElement("button");
+  deletebtn.classList.add("deletebtn");
+  const checkbox = document.createElement("input");
+  checkbox.addEventListener("change", () => {
+    task.completed = checkbox.checked; //with this, checkbox will be ticked
+    saveTasks(); //create a function to save the item made -> after this, code 47 was written.
+  });
+  checkbox.type = "checkbox";
+  checkbox.checked = task.completed;
+  label.append(checkbox, task.title);
+  item.append(label);
+  item.append(deletebtn);
+  list?.append(item);
+  deletebtn.addEventListener("click", function () {
+    item.parentNode?.removeChild(item);
+  });
+}
+
+function saveTasks() {
+  localStorage.setItem("TASKS", JSON.stringify(tasks));
+}
+
+function loadTasks(): Task[] {
+  const taskJSON = localStorage.getItem("TASKS");
+  if (taskJSON == null) return []; //if taskJSON is null, return to an empty array
+  return JSON.parse(taskJSON); // if it's not null, return to the taskJSON. As : Task[] is written after func loadTasks(), it will specifically parse the array. Without it, it will parse anything
+}
--- a/types/default.css.d.ts
+++ b/types/default.css.d.ts
@ -0,0 +1 @@
+export const list: string;