todolist1st

master
franklin004 2 years ago
parent f0eabccb9d
commit 080e089de0

BIN
.DS_Store vendored

Binary file not shown.

@ -1,4 +0,0 @@
{
"singleQuote": true,
"trailingComma": "all"
}

1599
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -1,20 +1,20 @@
{ {
"scripts": { "scripts": {
"start": "snowpack dev", "start": "snowpack dev",
"build": "snowpack build", "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}\""
}, },
"dependencies": { "dependencies": {
"canvas-confetti": "^1.2.0" "canvas-confetti": "^1.2.0",
"uuid": "^9.0.0"
}, },
"devDependencies": { "devDependencies": {
"@snowpack/plugin-typescript": "^1.2.1", "@snowpack/plugin-typescript": "^1.2.1",
"@types/canvas-confetti": "^1.0.0", "@types/canvas-confetti": "^1.0.0",
"@types/snowpack-env": "^2.3.3", "@types/snowpack-env": "^2.3.3",
"@types/uuid": "^8.3.4",
"prettier": "^2.2.1", "prettier": "^2.2.1",
"snowpack": "^3.3.7", "snowpack": "^3.3.7",
"typescript": "^4.2.4" "typescript": "^4.2.4",
"typings-for-css-modules-loader": "^1.7.0"
} }
} }

BIN
public/.DS_Store vendored

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

@ -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;
}

@ -1,27 +1,35 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Web site created using create-snowpack-app" /> <script src="dist/index.js" type="module"></script>
<link rel="stylesheet" type="text/css" href="/index.css" /> <!-- <link rel="stylesheet" href="../css/default.css" media="only screen" /> -->
<title>Snowpack App</title> <title>Document</title>
<style>
#list {
list-style: none;
padding: 0;
}
</style>
</head> </head>
<body> <body>
<img id="img" src="/logo.svg" /> <div class="container">
<canvas id="canvas"></canvas> <div class="title">
<noscript>You need to enable JavaScript to run this app.</noscript> <h1>Would this be a <i>To-do-list</i>?</h1>
<script type="module" src="/dist/index.js"></script> </div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file. <div class="thelist">
The build step will place the bundled scripts into the <body> tag. <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`. <ul id="list"></ul>
To create a production bundle, use `npm run build` or `yarn build`. </div>
--> </div>
</body> </body>
</html> </html>

@ -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>

Before

Width:  |  Height:  |  Size: 767 B

BIN
src/.DS_Store vendored

Binary file not shown.

@ -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;
}

@ -1,11 +1,63 @@
/** import { v4 as uuidV4 } from "uuid";
* This file is just a silly example to show everything working in the browser. import "./css/default.css";
* When you're ready to start on your site, clear the file. Happy hacking!
**/
import confetti from 'canvas-confetti'; type Task = {
id: string;
title: string;
completed: boolean;
createdAt: Date;
};
confetti.create(document.getElementById('canvas') as HTMLCanvasElement, { const list = document.querySelector<HTMLUListElement>("#list");
resize: true, const form = document.getElementById("new-task-form") as HTMLFormElement | null;
useWorker: true, const input = document.querySelector<HTMLInputElement>("#new-task-title");
})({ particleCount: 200, spread: 200 }); 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
}

@ -0,0 +1 @@
export const list: string;
Loading…
Cancel
Save