Created
January 15, 2018 05:20
-
-
Save anonymous/e1cdd73b6acb3a7705243144408f2d4e to your computer and use it in GitHub Desktop.
To Do
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<title>To-Do-List</title> | |
<link rel="stylesheet" href="styles.css"> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> | |
</head> | |
<body> | |
<nav class="navbar navbar-inverse navbar-fixed-top"> | |
<div class="container"> | |
<div class="navbar-header"> | |
<a class="navbar-brand" href="/">ToDo List</a> | |
</div> | |
</div> | |
</nav> | |
<div class="container"> | |
<div class="content-area row"> | |
<div class="col-md-2 col-xs-2 col-lg-2 col-sm-2"></div> | |
<div class="col-md-8 col-xs-8 col-lg-8 col-sm-8"> | |
<h2>ToDo List</h2> | |
<div class="row input-area"> | |
<div class="col-md-1"></div> | |
<div class="form-group col-md-9"> | |
<input type="text" placeholder="New Task" class="form-control" id="addTask"> | |
</div> | |
<div class="form-group col-md-1"> | |
<button class="btn btn-primary" onclick="toDo.addTaskClick()">Add</button> | |
</div> | |
<div class="col-md-1"></div> | |
</div> | |
<ul class="list-group" id="taskList"> | |
</ul> | |
</div> | |
<div class="col-md-2 col-xs-2 col-lg-2 col-sm-2"></div> | |
</div> | |
</div><!-- /.container --> | |
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> | |
<script src="dist/scripts.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class ToDoClass { | |
constructor() { | |
this.tasks = JSON.parse(localStorage.getItem('TASKS')); | |
if(!this.tasks) { | |
this.tasks = [ | |
{task: 'Get Groceries', isComplete: false}, | |
{task: 'Clean and prep for this week', isComplete: true}, | |
{task: 'Renew Library Account', isComplete: false}, | |
]; | |
} | |
this.loadTasks(); | |
this.addEventListeners(); | |
} | |
addEventListeners() { | |
// Add Task | |
document.getElementById('addTask').addEventListener("keypress", event => { | |
if(event.keyCode === 13) { | |
this.addTask(event.target.value); | |
event.target.value = ""; | |
} | |
}); | |
} | |
addTaskClick() { | |
let target = document.getElementById('addTask'); | |
this.addTask(target.value); | |
target.value = "" | |
} | |
addTask(task) { | |
let newTask = { | |
task, | |
isComplete: false, | |
}; | |
let parentDiv = document.getElementById('addTask').parentElement; | |
if(task === '') { | |
parentDiv.classList.add('has-error'); | |
} else { | |
parentDiv.classList.remove('has-error'); | |
this.tasks.push(newTask); | |
this.loadTasks(); | |
} | |
} | |
toggleTaskStatus(index) { | |
this.tasks[index].isComplete = !this.tasks[index].isComplete; | |
this.loadTasks(); | |
} | |
deleteTask(event, taskIndex) { | |
event.preventDefault(); | |
this.tasks.splice(taskIndex, 1); | |
this.loadTasks(); | |
} | |
generateTaskHtml(task, index) { | |
return ` | |
<li class="list-group-item checkbox"> | |
<div class="row"> | |
<div class="col-md-1 col-xs-1 col-lg-1 col-sm-1 checkbox"> | |
<label><input id="toggleTaskStatus" type="checkbox" onchange="toDo.toggleTaskStatus(${index})" value="" class="" ${task.isComplete?'checked':''}></label> | |
</div> | |
<div class="col-md-10 col-xs-10 col-lg-10 col-sm-10 task-text ${task.isComplete?'complete':''}"> | |
${task.task} | |
</div> | |
<div class="col-md-1 col-xs-1 col-lg-1 col-sm-1 delete-icon-area"> | |
<a class="" href="/" onClick="toDo.deleteTask(event, ${index})"><i id="deleteTask" data-id="${index}" class="delete-icon glyphicon glyphicon-trash"></i></a> | |
</div> | |
</div> | |
</li> | |
`; | |
} | |
loadTasks() { | |
localStorage.setItem('TASKS', JSON.stringify(this.tasks)); | |
let tasksHtml = this.tasks.reduce((html, task, index) => html += this.generateTaskHtml(task, index), ''); | |
document.getElementById('taskList').innerHTML = tasksHtml; | |
} | |
} | |
let toDo; | |
window.addEventListener("load", () => { | |
toDo = new ToDoClass(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
padding-top: 50px; | |
} | |
.starter-template { | |
padding: 40px 15px; | |
text-align: center; | |
} | |
.content-area { | |
margin: 30px; | |
} | |
.input-area { | |
margin: 25px; | |
} | |
.task-text { | |
display: flex; | |
align-items: center; | |
height: 40px; | |
} | |
.hidden { | |
display: none; | |
} | |
.delete-icon-area { | |
display: flex; | |
align-items: center; | |
height: 40px; | |
} | |
.delete-icon { | |
color: red; | |
} | |
.complete { | |
text-decoration: line-through; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment