Skip to content

Instantly share code, notes, and snippets.

/index.html

Created January 10, 2017 08:26
Show Gist options
  • Save anonymous/a1f3c229c7e5f2262f9072de03b0b378 to your computer and use it in GitHub Desktop.
Save anonymous/a1f3c229c7e5f2262f9072de03b0b378 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin todo list homework // source https://jsbin.com/zobogoj
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="todo list homework">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
button {
color: white;
background: blue;
}
button:hover {
background: lightblue;
}
html{
font-family: Helvetica;
border: solid black;
}
h1{
text-align:center;
}
div{
display: flex;
flex-wrap: wrap;
border: solid black 1px;
padding: 10px;
margin: 5px;
}
progress{
width: 100%;
}
.delete{
float: right;
}
#Input{
display: flex;
justify-content: center;
}
#taskNamer{
width: 95%;
}
</style>
</head>
<body>
<h1>Michael's ToDo List</h1>
<em>for Shelly</em>
<progress id="progress" value="0" max="1"></progress><br>
<button onclick="toDo.clearList()">Clear ALL</button>
<div id="Input">
<input id="taskNamer" type="text" value="Press Enter to add toDo Item" onfocus="clearInput()"></input>
</div>
<div id="ToDoList">
</div>
<script id="jsbin-javascript">
var toDo = {
toDoList: [],
getList: function() {
if (localStorage.getItem("toDoStorage") === null) {
return "NULL";
}
var locosto = localStorage.getItem('toDoStorage');
this.toDoList = JSON.parse(locosto);
this.renderList();
},
setList: function() {
localStorage.setItem('toDoStorage', JSON.stringify(toDo.toDoList));
},
clearList: function() {
localStorage.removeItem('toDoStorage');
this.toDoList = [];
this.renderList();
},
addItem: function(taskName, status) {
toDoListItem = function(id, taskName, status) {
this.id = id;
this.taskName = taskName;
this.status = status;
}
var id = Date.now();
var newItem = new toDoListItem(id, taskName, status);
//console.log(newItem);
this.toDoList.push(newItem);
this.setList();
},
toggleDone: function(id) {
if (this.getStatus(id)) {
this.markItemUnDone(id);
} else {
this.markItemDone(id);
}
this.calcProgress();
toDo.setList();
},
markItemDone: function(id) {
this.toDoList[id].status = true;
//console.log("toggled done");
},
markItemUnDone: function(id) {
this.toDoList[id].status = false;
},
calcProgress: function() {
document.querySelector('#progress').setAttribute('value', (document.querySelectorAll('input[type="checkbox"]:checked').length) / (document.querySelectorAll('input[type="checkbox"]').length));
},
editItem: function() {
},
getDate: function(date) {
return this.toDoList.indexOf(this.toDoList.find(x => x.id == date));
},
getStatus: function(id) {
return this.toDoList[id].status;
},
getTaskName: function(id) {
return this.toDoList[id].taskName;
},
deleteItem: function(id) {
this.toDoList.splice(id, 1);
this.renderList();
toDo.setList();
},
createToDoElem: function(task) {
var taskName = task.taskName;
var taskStatus = task.status;
var taskDate = task.id;
//console.log(task,taskName,taskStatus);
//create Element
var newElem = document.createElement('div');
newElem.setAttribute('id', taskDate);
//create status checkbox
var newStatus = document.createElement('input');
newStatus.setAttribute('type', "checkbox");
if (taskStatus === true) {
newStatus.setAttribute('checked', "true");
}
newStatus.setAttribute('onchange', 'toDo.toggleDone(toDo.getDate(parentNode.id))')
newElem.appendChild(newStatus);
//create task name text
var newElemName = document.createElement('span');
newElemName.innerHTML = taskName;
newElem.appendChild(newElemName);
//create delete button
var newDelete = document.createElement('button');
newDelete.className = 'delete';
newDelete.innerText = "x";
newDelete.setAttribute('onclick', 'toDo.deleteItem(toDo.getDate(parentNode.id))');
newElem.appendChild(newDelete);
document.querySelector('#ToDoList').appendChild(newElem);
},
renderList: function() {
document.querySelector("#ToDoList").innerHTML = '';
this.toDoList.map(this.createToDoElem);
this.calcProgress();
}
}
function init() {
toDo.getList();
toDo.renderList();
toDo.calcProgress();
};
init();
document.querySelector('#taskNamer').addEventListener("keydown", function(event) {
//console.log(event);
if (event.keyCode == 13) {
var taskNamer = document.querySelector('#taskNamer');
toDo.addItem(taskNamer.value, false);
toDo.renderList();
taskNamer.value = "";
}
});
function clearInput(){
document.querySelector('#taskNamer').value = "";
}
</script>
<script id="jsbin-source-css" type="text/css">button {
color: white;
background: blue;
}
button:hover {
background: lightblue;
}
html{
font-family: Helvetica;
border: solid black;
}
h1{
text-align:center;
}
div{
display: flex;
flex-wrap: wrap;
border: solid black 1px;
padding: 10px;
margin: 5px;
}
progress{
width: 100%;
}
.delete{
float: right;
}
#Input{
display: flex;
justify-content: center;
}
#taskNamer{
width: 95%;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var toDo = {
toDoList: [],
getList: function() {
if (localStorage.getItem("toDoStorage") === null) {
return "NULL";
}
var locosto = localStorage.getItem('toDoStorage');
this.toDoList = JSON.parse(locosto);
this.renderList();
},
setList: function() {
localStorage.setItem('toDoStorage', JSON.stringify(toDo.toDoList));
},
clearList: function() {
localStorage.removeItem('toDoStorage');
this.toDoList = [];
this.renderList();
},
addItem: function(taskName, status) {
toDoListItem = function(id, taskName, status) {
this.id = id;
this.taskName = taskName;
this.status = status;
}
var id = Date.now();
var newItem = new toDoListItem(id, taskName, status);
//console.log(newItem);
this.toDoList.push(newItem);
this.setList();
},
toggleDone: function(id) {
if (this.getStatus(id)) {
this.markItemUnDone(id);
} else {
this.markItemDone(id);
}
this.calcProgress();
toDo.setList();
},
markItemDone: function(id) {
this.toDoList[id].status = true;
//console.log("toggled done");
},
markItemUnDone: function(id) {
this.toDoList[id].status = false;
},
calcProgress: function() {
document.querySelector('#progress').setAttribute('value', (document.querySelectorAll('input[type="checkbox"]:checked').length) / (document.querySelectorAll('input[type="checkbox"]').length));
},
editItem: function() {
},
getDate: function(date) {
return this.toDoList.indexOf(this.toDoList.find(x => x.id == date));
},
getStatus: function(id) {
return this.toDoList[id].status;
},
getTaskName: function(id) {
return this.toDoList[id].taskName;
},
deleteItem: function(id) {
this.toDoList.splice(id, 1);
this.renderList();
toDo.setList();
},
createToDoElem: function(task) {
var taskName = task.taskName;
var taskStatus = task.status;
var taskDate = task.id;
//console.log(task,taskName,taskStatus);
//create Element
var newElem = document.createElement('div');
newElem.setAttribute('id', taskDate);
//create status checkbox
var newStatus = document.createElement('input');
newStatus.setAttribute('type', "checkbox");
if (taskStatus === true) {
newStatus.setAttribute('checked', "true");
}
newStatus.setAttribute('onchange', 'toDo.toggleDone(toDo.getDate(parentNode.id))')
newElem.appendChild(newStatus);
//create task name text
var newElemName = document.createElement('span');
newElemName.innerHTML = taskName;
newElem.appendChild(newElemName);
//create delete button
var newDelete = document.createElement('button');
newDelete.className = 'delete';
newDelete.innerText = "x";
newDelete.setAttribute('onclick', 'toDo.deleteItem(toDo.getDate(parentNode.id))');
newElem.appendChild(newDelete);
document.querySelector('#ToDoList').appendChild(newElem);
},
renderList: function() {
document.querySelector("#ToDoList").innerHTML = '';
this.toDoList.map(this.createToDoElem);
this.calcProgress();
}
}
function init() {
toDo.getList();
toDo.renderList();
toDo.calcProgress();
};
init();
document.querySelector('#taskNamer').addEventListener("keydown", function(event) {
//console.log(event);
if (event.keyCode == 13) {
var taskNamer = document.querySelector('#taskNamer');
toDo.addItem(taskNamer.value, false);
toDo.renderList();
taskNamer.value = "";
}
});
function clearInput(){
document.querySelector('#taskNamer').value = "";
}</script></body>
</html>
Raw
jsbin.zobogoj.css
button {
color: white;
background: blue;
}
button:hover {
background: lightblue;
}
html{
font-family: Helvetica;
border: solid black;
}
h1{
text-align:center;
}
div{
display: flex;
flex-wrap: wrap;
border: solid black 1px;
padding: 10px;
margin: 5px;
}
progress{
width: 100%;
}
.delete{
float: right;
}
#Input{
display: flex;
justify-content: center;
}
#taskNamer{
width: 95%;
}
Raw
jsbin.zobogoj.js
var toDo = {
toDoList: [],
getList: function() {
if (localStorage.getItem("toDoStorage") === null) {
return "NULL";
}
var locosto = localStorage.getItem('toDoStorage');
this.toDoList = JSON.parse(locosto);
this.renderList();
},
setList: function() {
localStorage.setItem('toDoStorage', JSON.stringify(toDo.toDoList));
},
clearList: function() {
localStorage.removeItem('toDoStorage');
this.toDoList = [];
this.renderList();
},
addItem: function(taskName, status) {
toDoListItem = function(id, taskName, status) {
this.id = id;
this.taskName = taskName;
this.status = status;
}
var id = Date.now();
var newItem = new toDoListItem(id, taskName, status);
//console.log(newItem);
this.toDoList.push(newItem);
this.setList();
},
toggleDone: function(id) {
if (this.getStatus(id)) {
this.markItemUnDone(id);
} else {
this.markItemDone(id);
}
this.calcProgress();
toDo.setList();
},
markItemDone: function(id) {
this.toDoList[id].status = true;
//console.log("toggled done");
},
markItemUnDone: function(id) {
this.toDoList[id].status = false;
},
calcProgress: function() {
document.querySelector('#progress').setAttribute('value', (document.querySelectorAll('input[type="checkbox"]:checked').length) / (document.querySelectorAll('input[type="checkbox"]').length));
},
editItem: function() {
},
getDate: function(date) {
return this.toDoList.indexOf(this.toDoList.find(x => x.id == date));
},
getStatus: function(id) {
return this.toDoList[id].status;
},
getTaskName: function(id) {
return this.toDoList[id].taskName;
},
deleteItem: function(id) {
this.toDoList.splice(id, 1);
this.renderList();
toDo.setList();
},
createToDoElem: function(task) {
var taskName = task.taskName;
var taskStatus = task.status;
var taskDate = task.id;
//console.log(task,taskName,taskStatus);
//create Element
var newElem = document.createElement('div');
newElem.setAttribute('id', taskDate);
//create status checkbox
var newStatus = document.createElement('input');
newStatus.setAttribute('type', "checkbox");
if (taskStatus === true) {
newStatus.setAttribute('checked', "true");
}
newStatus.setAttribute('onchange', 'toDo.toggleDone(toDo.getDate(parentNode.id))')
newElem.appendChild(newStatus);
//create task name text
var newElemName = document.createElement('span');
newElemName.innerHTML = taskName;
newElem.appendChild(newElemName);
//create delete button
var newDelete = document.createElement('button');
newDelete.className = 'delete';
newDelete.innerText = "x";
newDelete.setAttribute('onclick', 'toDo.deleteItem(toDo.getDate(parentNode.id))');
newElem.appendChild(newDelete);
document.querySelector('#ToDoList').appendChild(newElem);
},
renderList: function() {
document.querySelector("#ToDoList").innerHTML = '';
this.toDoList.map(this.createToDoElem);
this.calcProgress();
}
}
function init() {
toDo.getList();
toDo.renderList();
toDo.calcProgress();
};
init();
document.querySelector('#taskNamer').addEventListener("keydown", function(event) {
//console.log(event);
if (event.keyCode == 13) {
var taskNamer = document.querySelector('#taskNamer');
toDo.addItem(taskNamer.value, false);
toDo.renderList();
taskNamer.value = "";
}
});
function clearInput(){
document.querySelector('#taskNamer').value = "";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment