code-boxx/0-JS-TO-DO.MD

## 0-JS-TO-DO.MD

      
    Raw
  

              0-JS-TO-DO.MD
            
          
    JAVASCRIPT TO DO LIST

https://code-boxx.com/simple-javascript-to-do-list/
LICENSE

Copyright by Code Boxx
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

  
## todo.css
/* (A) SHARED */
#todo-wrap, #todo-wrap * {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
#todo-wrap input, .todo-item {
  border: 0;
  padding: 10px;
  font-size: 16px;
  margin-bottom: 10px;
}

/* (B) WRAPPER */
#todo-wrap {
  background: #f2f2f2;
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

/* (C) ROW ITEMS */
#todo-add, .todo-row {
  display: flex;
  align-items: stretch;
}
#todo-item, .todo-item {
  flex-grow: 1;
  background: #fff;
}
.todo-item.todo-ok { background: #cffff4; }
.todo-item.editing { background: #fffdcf; }
#todo-save, .todo-del, .todo-edit, .todo-done {
  color: #fff;
  cursor: pointer;
}
.todo-del { background: #ed3636; }
#todo-save, .todo-edit, .todo-done { background: #2781cf; }

## todo.html
<!DOCTYPE html>
<html>
  <head>
    <title>
      Simple Javascript To Do List
    </title>
    <meta charset="utf-8">
    <link href="todo.css" rel="stylesheet">
    <script defer src="todo.js"></script>
  </head>
  <body>
    <div id="todo-wrap">
      <!-- (A) ADD NEW ITEM -->
      <form id="todo-add">
        <input type="text" id="todo-item" placeholder="New Item" required>
        <input type="submit" id="todo-save" value="&#10010;">
      </form>

      <!-- (B) LIST ITEMS -->
      <div id="todo-list"></div>

      <!-- (C) ITEM TEMPLATE -->
      <template id="todo-template">
      <div class="todo-row">
        <input type="button" class="todo-del" value="&#10006;">
        <input type="button" class="todo-edit" value="&#9998;">
        <input type="text" class="todo-item" disabled>
        <input type="button" class="todo-done" value="&#10004;">
      </div>
      </template>
    </div>
  </body>
</html>

## todo.js
var todo = {
  // (A) INITIALIZE TO DO LIST
  data : [],        // todo list data array
  hAdd : null,      // html add item text field
  hTemplate : null, // html item row template
  hList : null,     // html to do list
  init : () => {
    // (A1) INIT LOCALSTORAGE
    if (localStorage.todo == undefined) { localStorage.todo = "[]"; }

    // (A2) RESTORE PREVIOUS SESSION
    todo.data = JSON.parse(localStorage.todo);

    // (A3) GET HTML ELEMENTS
    todo.hAdd = document.getElementById("todo-item");
    todo.hTemplate = document.getElementById("todo-template").content;
    todo.hList = document.getElementById("todo-list");

    // (A4) "ENABLE" ADD ITEM FORM
    document.getElementById("todo-add").onsubmit = todo.add;

    // (A5) DRAW TO DO LIST
    todo.draw();
  },

  // (B) DRAW TO DO LIST
  draw : () => {
    // (B1) RESET LIST
    todo.hList.innerHTML = "";

    // (B2) LOOP & GENERATE ROWS
    if (todo.data.length>0) { for (let id in todo.data) {
      let row = todo.hTemplate.cloneNode(true),
          edit = row.querySelector(".todo-edit"),
          item = row.querySelector(".todo-item");
      item.value = todo.data[id][0];
      item.id = "item" + id;
      edit.id = "edit" + id;
      edit.onclick = () => todo.edit(id);
      row.querySelector(".todo-done").onclick = () => todo.toggle(id);
      row.querySelector(".todo-del").onclick = () => todo.del(id);
      if (todo.data[id][1]) { row.querySelector(".todo-item").classList.add("todo-ok"); }
      todo.hList.appendChild(row);
    }}
  },

  // (C) HELPER - SAVE DATA INTO LOCAL STORAGE
  save: () => {
    localStorage.todo = JSON.stringify(todo.data);
    todo.draw();
  },

  // (D) ADD A NEW ITEM TO THE LIST
  add : () => {
    todo.data.push([todo.hAdd.value, false]);
    todo.hAdd.value = "";
    todo.save();
    return false;
  },

  // (E) TOGGLE EDIT ITEM
  edit : id => {
    // (E1) GET EDIT BUTTON + ITEM
    let edit = document.getElementById("edit" + id),
        item = document.getElementById("item" + id);

    // (E2) SET EDITABLE
    if (item.disabled) {
      item.classList.add("editing");
      item.disabled = false;
      item.select();
      edit.value = "\u270F";
    }

    // (E3) SAVE
    else {
      item.classList.remove("editing");
      item.disabled = true;
      edit.value = "\u270E";
      todo.data[id][0] = item.value;
      todo.save();
    }
  },

  // (F) UPDATE TODO ITEM DONE/NOT YET
  toggle: id => {
    todo.data[id][1] = !todo.data[id][1];
    todo.save();
  },

  // (G) DELETE ITEM
  del: id => { if (confirm("Delete task?")) {
    todo.data.splice(id, 1);
    todo.save();
  }}
};

// (H) PAGE INIT
window.addEventListener("load", todo.init);
	/* (A) SHARED */
	#todo-wrap, #todo-wrap * {
	font-family: Arial, Helvetica, sans-serif;
	box-sizing: border-box;
	}
	#todo-wrap input, .todo-item {
	border: 0;
	padding: 10px;
	font-size: 16px;
	margin-bottom: 10px;
	}

	/* (B) WRAPPER */
	#todo-wrap {
	background: #f2f2f2;
	max-width: 500px;
	margin: 0 auto;
	padding: 20px;
	}

	/* (C) ROW ITEMS */
	#todo-add, .todo-row {
	display: flex;
	align-items: stretch;
	}
	#todo-item, .todo-item {
	flex-grow: 1;
	background: #fff;
	}
	.todo-item.todo-ok { background: #cffff4; }
	.todo-item.editing { background: #fffdcf; }
	#todo-save, .todo-del, .todo-edit, .todo-done {
	color: #fff;
	cursor: pointer;
	}
	.todo-del { background: #ed3636; }
	#todo-save, .todo-edit, .todo-done { background: #2781cf; }
	<!DOCTYPE html>
	<html>
	<head>
	<title>
	Simple Javascript To Do List
	</title>
	<meta charset="utf-8">
	<link href="todo.css" rel="stylesheet">
	<script defer src="todo.js"></script>
	</head>
	<body>
	<div id="todo-wrap">
	<!-- (A) ADD NEW ITEM -->
	<form id="todo-add">
	<input type="text" id="todo-item" placeholder="New Item" required>
	<input type="submit" id="todo-save" value="✚">
	</form>

	<!-- (B) LIST ITEMS -->
	<div id="todo-list"></div>

	<!-- (C) ITEM TEMPLATE -->
	<template id="todo-template">
	<div class="todo-row">
	<input type="button" class="todo-del" value="✖">
	<input type="button" class="todo-edit" value="✎">
	<input type="text" class="todo-item" disabled>
	<input type="button" class="todo-done" value="✔">
	</div>
	</template>
	</div>
	</body>
	</html>
	var todo = {
	// (A) INITIALIZE TO DO LIST
	data : [], // todo list data array
	hAdd : null, // html add item text field
	hTemplate : null, // html item row template
	hList : null, // html to do list
	init : () => {
	// (A1) INIT LOCALSTORAGE
	if (localStorage.todo == undefined) { localStorage.todo = "[]"; }

	// (A2) RESTORE PREVIOUS SESSION
	todo.data = JSON.parse(localStorage.todo);

	// (A3) GET HTML ELEMENTS
	todo.hAdd = document.getElementById("todo-item");
	todo.hTemplate = document.getElementById("todo-template").content;
	todo.hList = document.getElementById("todo-list");

	// (A4) "ENABLE" ADD ITEM FORM
	document.getElementById("todo-add").onsubmit = todo.add;

	// (A5) DRAW TO DO LIST
	todo.draw();
	},

	// (B) DRAW TO DO LIST
	draw : () => {
	// (B1) RESET LIST
	todo.hList.innerHTML = "";

	// (B2) LOOP & GENERATE ROWS
	if (todo.data.length>0) { for (let id in todo.data) {
	let row = todo.hTemplate.cloneNode(true),
	edit = row.querySelector(".todo-edit"),
	item = row.querySelector(".todo-item");
	item.value = todo.data[id][0];
	item.id = "item" + id;
	edit.id = "edit" + id;
	edit.onclick = () => todo.edit(id);
	row.querySelector(".todo-done").onclick = () => todo.toggle(id);
	row.querySelector(".todo-del").onclick = () => todo.del(id);
	if (todo.data[id][1]) { row.querySelector(".todo-item").classList.add("todo-ok"); }
	todo.hList.appendChild(row);
	}}
	},

	// (C) HELPER - SAVE DATA INTO LOCAL STORAGE
	save: () => {
	localStorage.todo = JSON.stringify(todo.data);
	todo.draw();
	},

	// (D) ADD A NEW ITEM TO THE LIST
	add : () => {
	todo.data.push([todo.hAdd.value, false]);
	todo.hAdd.value = "";
	todo.save();
	return false;
	},

	// (E) TOGGLE EDIT ITEM
	edit : id => {
	// (E1) GET EDIT BUTTON + ITEM
	let edit = document.getElementById("edit" + id),
	item = document.getElementById("item" + id);

	// (E2) SET EDITABLE
	if (item.disabled) {
	item.classList.add("editing");
	item.disabled = false;
	item.select();
	edit.value = "\u270F";
	}

	// (E3) SAVE
	else {
	item.classList.remove("editing");
	item.disabled = true;
	edit.value = "\u270E";
	todo.data[id][0] = item.value;
	todo.save();
	}
	},

	// (F) UPDATE TODO ITEM DONE/NOT YET
	toggle: id => {
	todo.data[id][1] = !todo.data[id][1];
	todo.save();
	},

	// (G) DELETE ITEM
	del: id => { if (confirm("Delete task?")) {
	todo.data.splice(id, 1);
	todo.save();
	}}
	};

	// (H) PAGE INIT
	window.addEventListener("load", todo.init);