codewear-study · SeonghoJin · May 4, 2020 · PParkJy · May 12, 2020 · Tetramad
diff --git a/Vanila.js/.vscode/tasks.json b/Vanila.js/.vscode/tasks.json
@@ -0,0 +1,13 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "openHtml",
+            "type": "shell",
+            "command": "index.html",
+            "problemMatcher": []
+        }
+    ]
+}
diff --git a/Vanila.js/CSS/index.css b/Vanila.js/CSS/index.css
@@ -0,0 +1,56 @@
+
+html{
+    text-align: center;
+    font-style:italic;
+}
+
+input{
+    width : 400px;
+    height : 50px;
+    font-size : x-large;
+}
+
+main{
+    display:inline-block;
+    width : 400px;
+}
+
+input::placeholder{
+    font-style:italic;
+    font-size: x-large;
+    font-weight : bold;
+}
+#createToDo{
+	border: none;
+	margin : 0px;
+    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
+}
+
+#contents{
+    padding :0px;
+    text-align: center;
+    margin : 0px;
+}
+
+.content{
+    box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+    text-align:left;
+    display: inline-block;
+    position: relative;
+    width : 400px;
+    height : 50px;
+
+}
+
+.content h1{
+
+    margin : 0px
+}
+
+.destory{
+    position : absolute;
+    top : 13px;
+    right :10px;
+    font-weight: inherit;
+    color: #cc9a9a;
+}
diff --git a/Vanila.js/JS/index.js b/Vanila.js/JS/index.js
@@ -0,0 +1,56 @@
+
+function enterkey(){
+    let input = document.getElementById("createToDo");
+
+    if(window.event.keyCode == 13){
+        console.log(input.value);
+        if(localStorage.getItem(input.value) == null && input.value != "")
+        {    
+            localStorage.setItem(input.value,JSON.stringify(input.value));
+            draw(makecontent(input.value));
+        }
+
+        input.value = "";
+    }
+}
+
+function makecontent(val){
+    let content = document.createElement("div");
+    let h = document.createElement("h1");
+    let txtNode = document.createTextNode(val);
+    let button = document.createElement("button");
+
+    button.setAttribute("class","destory");
+    button.setAttribute("onclick", "remove(" +"\""+val+"\""+")")
-    button.setAttribute("onclick", "remove(" +"\""+val+"\""+")")
+    button.setAttribute("onclick", remove)
-    button.setAttribute("onclick", "remove(" +"\""+val+"\""+")")
+    button.setAttribute("onclick", remove)
+    content.setAttribute("class", "content");
+    content.setAttribute("id", val);
+
+    h.appendChild(txtNode);
+    button.appendChild(document.createTextNode("X"));
+
+    content.appendChild(h);
+    content.appendChild(button);
+
+    return content;
+}
+
+function draw(content){
+    let contents = document.getElementById("contents");
+    contents.appendChild(content);
+}
+
+function remove(item_id){
+    let content = document.getElementById(item_id);
+    let contents = document.getElementById("contents");
+
+    localStorage.removeItem(item_id);
+    contents.removeChild(content);
+}
+
+
+(function load(){
+
+    for(var i = 0; i < localStorage.length; i++){
+        draw(makecontent(localStorage.key(i)));
+    }
+})()
diff --git a/Vanila.js/index.html b/Vanila.js/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+
+<html>
+	<head>
+		<meta charset="utf-8">
+		<link rel = "stylesheet" href = "CSS/index.css">
+		<title>vanilaToDoList</title>
+
+	</head>
+	<body>
+		<header>
+			<div>
+				<h1>
+					Seongho's vanilaToDoList
+				</h1>
+			</div>
+		</header>
+		<main>
+			<div>
+				<input onkeyup = "enterkey()" id = "createToDo" placeholder="Enter to save your task" autofocus>
+			</div>
+			<ul id = "contents">
+			</ul>
+		</main>
+		<footer>
+			<div>
+
+			</div>
+		</footer>
+		<script src = "JS/index.js"></script>
+	</body>
+</html>
diff --git a/Vanila.js/vanillajs/index.html b/Vanila.js/vanillajs/index.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en" data-framework="javascript">
+	<head>
+		<meta charset="utf-8">
+		<title>VanillaJS • TodoMVC</title>
+		<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
+		<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
+	</head>
+	<body>
+		<section class="todoapp">
+			<header class="header">
+				<h1>todos</h1>
+				<input class="new-todo" placeholder="What needs to be done?" autofocus>
+			</header>
+			<section class="main">
+				<input id="toggle-all" class="toggle-all" type="checkbox">
+				<label for="toggle-all">Mark all as complete</label>
+				<ul class="todo-list"></ul>
+			</section>
+			<footer class="footer">
+				<span class="todo-count"></span>
+				<ul class="filters">
+					<li>
+						<a href="#/" class="selected">All</a>
+					</li>
+					<li>
+						<a href="#/active">Active</a>
+					</li>
+					<li>
+						<a href="#/completed">Completed</a>
+					</li>
+				</ul>
+				<button class="clear-completed">Clear completed</button>
+			</footer>
+		</section>
+		<footer class="info">
+			<p>Double-click to edit a todo</p>
+			<p>Created by <a href="http://twitter.com/oscargodson">Oscar Godson</a></p>
+			<p>Refactored by <a href="https://github.com/cburgmer">Christoph Burgmer</a></p>
+			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+		</footer>
+		<script src="node_modules/todomvc-common/base.js"></script>
+		<script src="js/helpers.js"></script>
+		<script src="js/store.js"></script>
+		<script src="js/model.js"></script>
+		<script src="js/template.js"></script>
+		<script src="js/view.js"></script>
+		<script src="js/controller.js"></script>
+		<script src="js/app.js"></script>
+	</body>
+</html>
diff --git a/Vanila.js/vanillajs/js/app.js b/Vanila.js/vanillajs/js/app.js
@@ -0,0 +1,25 @@
+/*global app, $on */
+(function () {
+	'use strict';
+
+	/**
+	 * Sets up a brand new Todo list.
+	 *
+	 * @param {string} name The name of your new to do list.
+	 */
+	function Todo(name) {
+		this.storage = new app.Store(name);
+		this.model = new app.Model(this.storage);
+		this.template = new app.Template();
+		this.view = new app.View(this.template);
+		this.controller = new app.Controller(this.model, this.view);
+	}
+
+	var todo = new Todo('todos-vanillajs');
+
+	function setView() {
+		todo.controller.setView(document.location.hash);
+	}
+	$on(window, 'load', setView);
+	$on(window, 'hashchange', setView);
+})();