henrycat/index.html

## index.html

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

## script.js
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();
});

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

## style.css
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;
}

## to-do.markdown

      
    Raw
  

              to-do.markdown
            
          
    To Do

A Pen by anna ray on CodePen.
License.

	<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>
	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();
	});
	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;
	}