vampaynani/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
.completed{
  text-decoration: line-through;
}
#sort-menu li{
  cursor: pointer;
}
</style>
</head>
<body>
  <h1>Todo List</h1>
  <form id="js-todo-form">
    <label>Task</label>
    <input type="text" name="task">
    <label>Due Date</label>
    <input type="date" name="duedate">
    <button type="submit">Guardar</button>
  </form>
  <div id="sort-menu">
    <p>Sort by</p>
  <ul>
    <li data-by="task">alphabetical</li>
    <li data-by="duedate">due date</li>
    <li data-by="creationdate">creation date</li>
    <li data-by="priority">priority</li>
  </ul>
  </div>
  <div class="js-content">
    <ul>
      <li data-task="Asd" data-duedate="2021-01-30">
        <div><span>Asd</span></div>
        <div>2021/1/30</div>
      </li>
      <li data-task="Qwerty" data-duedate="2021-01-13">
        <div>Qwerty</div>
        <div>2021/1/13</div>
      </li>
    </ul>
  </div>
<script id="jsbin-javascript">
'use strict';

var store = {
  todos: [{ task: 'Reinforcement session', duedate: new Date('2020-01-11'), completed: true }, { task: 'Terminar de calificar', duedate: new Date('2020-01-10'), completed: false }]
};

function formatDate(date) {
  return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
}

function generateTodo(todo) {
  if (todo.completed) {
    return '<li data-value="' + todo.task + '" class="completed">\n      <div>' + todo.task + '</div>\n      <div>' + formatDate(todo.duedate) + '</div>\n    </li>';
  }
  return '<li data-value="' + todo.task + '">\n    <div>' + todo.task + '</div>\n    <div>' + formatDate(todo.duedate) + '</div>\n  </li>';
}

function generateTodos() {
  return '<ul>' + store.todos.map(function (todo) {
    return generateTodo(todo);
  }).join('') + '</ul>';
}

function renderContent() {
  var content = document.querySelector('.js-content');
  content.innerHTML = generateTodos();
}

function sortTodos(key) {
  switch (key) {
    case 'task':
      store.todos.sort(function (a, b) {
        if (a[key] > b[key]) {
          return 1;
        } else if (a[key] < b[key]) {
          return -1;
        } else {
          return 0;
        }
      });
      break;
    case 'duedate':
      store.todos.sort(function (a, b) {
        return a[key] - b[key];
      });
      break;
  }
  renderContent();
}

function listenFormSubmit() {
  var todoForm = document.querySelector('#js-todo-form');
  todoForm.addEventListener('submit', function (e) {
    e.preventDefault();
    var form = e.target;
    store.todos.push({ task: form.task.value });
    renderContent();
  });
}

function listenTodoClick() {
  var content = document.querySelector('.js-content');
  content.addEventListener('click', function (e) {
    var liAll = content.querySelectorAll('li');
    liAll.forEach(function (li) {
      if (li.contains(e.target)) {
        var selected = store.todos.find(function (todo) {
          return todo.task == li.dataset.value;
        });
        selected.completed = !selected.completed;
        renderContent();
      }
    });
  });
}

function listenSortClick() {
  var sortButtons = document.querySelectorAll('#sort-menu li');
  sortButtons.forEach(function (button) {
    button.addEventListener('click', function (e) {
      sortTodos(e.target.dataset.by);
    });
  });
}

function addEventListeners() {
  listenFormSubmit();
  listenTodoClick();
  listenSortClick();
}

function init() {
  addEventListeners();
  renderContent();
}

init();
</script>


<script id="jsbin-source-css" type="text/css">.completed{
  text-decoration: line-through;
}
#sort-menu li{
  cursor: pointer;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">const store = {
  todos: [
    {task: 'Reinforcement session', duedate: new Date('2020-01-11'), completed: true},
    {task: 'Terminar de calificar', duedate: new Date('2020-01-10'), completed: false}
  ]
}

function formatDate(date){
  return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
}

function generateTodo(todo){
  if(todo.completed){
     return `<li data-value="${todo.task}" class="completed">
      <div>${todo.task}</div>
      <div>${formatDate(todo.duedate)}</div>
    </li>`
  }
  return `<li data-value="${todo.task}">
    <div>${todo.task}</div>
    <div>${formatDate(todo.duedate)}</div>
  </li>`
}

function generateTodos(){
  return `<ul>${store.todos.map(todo => generateTodo(todo)).join('')}</ul>`
}

function renderContent(){
  const content = document.querySelector('.js-content');
  content.innerHTML = generateTodos();
}

function sortTodos(key){
  switch(key){
    case 'task':
      store.todos.sort((a,b) => {
        if(a[key] > b[key]){
          return 1;
        } else if((a[key] < b[key])){
          return -1;
        }else{
          return 0;
        }
      });
      break;
    case 'duedate':
      store.todos.sort((a,b) => a[key] - b[key]);
      break;
  }
  renderContent();
}

function listenFormSubmit(){
  const todoForm = document.querySelector('#js-todo-form');
  todoForm.addEventListener('submit', e => {
    e.preventDefault();
    const form = e.target;
    store.todos.push({task: form.task.value})
    renderContent();
  });
}

function listenTodoClick(){
  const content = document.querySelector('.js-content');
  content.addEventListener('click', e => {
    const liAll = content.querySelectorAll('li');
    liAll.forEach(li => {
      if(li.contains(e.target)){
          const selected = store.todos.find(todo => todo.task == li.dataset.value);
          selected.completed = !selected.completed;
          renderContent();
      }
    })
  });
}

function listenSortClick(){
  const sortButtons = document.querySelectorAll('#sort-menu li');
  sortButtons.forEach(button => {
    button.addEventListener('click', e => {
      sortTodos(e.target.dataset.by)
    })
  })
}

function addEventListeners(){
  listenFormSubmit();
  listenTodoClick();
  listenSortClick();
}

function init(){
  addEventListeners();
  renderContent();
}

init();</script></body>
</html>

## jsbin.ronitoc.css
.completed{
  text-decoration: line-through;
}
#sort-menu li{
  cursor: pointer;
}

## jsbin.ronitoc.js
'use strict';

var store = {
  todos: [{ task: 'Reinforcement session', duedate: new Date('2020-01-11'), completed: true }, { task: 'Terminar de calificar', duedate: new Date('2020-01-10'), completed: false }]
};

function formatDate(date) {
  return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
}

function generateTodo(todo) {
  if (todo.completed) {
    return '<li data-value="' + todo.task + '" class="completed">\n      <div>' + todo.task + '</div>\n      <div>' + formatDate(todo.duedate) + '</div>\n    </li>';
  }
  return '<li data-value="' + todo.task + '">\n    <div>' + todo.task + '</div>\n    <div>' + formatDate(todo.duedate) + '</div>\n  </li>';
}

function generateTodos() {
  return '<ul>' + store.todos.map(function (todo) {
    return generateTodo(todo);
  }).join('') + '</ul>';
}

function renderContent() {
  var content = document.querySelector('.js-content');
  content.innerHTML = generateTodos();
}

function sortTodos(key) {
  switch (key) {
    case 'task':
      store.todos.sort(function (a, b) {
        if (a[key] > b[key]) {
          return 1;
        } else if (a[key] < b[key]) {
          return -1;
        } else {
          return 0;
        }
      });
      break;
    case 'duedate':
      store.todos.sort(function (a, b) {
        return a[key] - b[key];
      });
      break;
  }
  renderContent();
}

function listenFormSubmit() {
  var todoForm = document.querySelector('#js-todo-form');
  todoForm.addEventListener('submit', function (e) {
    e.preventDefault();
    var form = e.target;
    store.todos.push({ task: form.task.value });
    renderContent();
  });
}

function listenTodoClick() {
  var content = document.querySelector('.js-content');
  content.addEventListener('click', function (e) {
    var liAll = content.querySelectorAll('li');
    liAll.forEach(function (li) {
      if (li.contains(e.target)) {
        var selected = store.todos.find(function (todo) {
          return todo.task == li.dataset.value;
        });
        selected.completed = !selected.completed;
        renderContent();
      }
    });
  });
}

function listenSortClick() {
  var sortButtons = document.querySelectorAll('#sort-menu li');
  sortButtons.forEach(function (button) {
    button.addEventListener('click', function (e) {
      sortTodos(e.target.dataset.by);
    });
  });
}

function addEventListeners() {
  listenFormSubmit();
  listenTodoClick();
  listenSortClick();
}

function init() {
  addEventListeners();
  renderContent();
}

init();
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.completed{
	text-decoration: line-through;
	}
	#sort-menu li{
	cursor: pointer;
	}
	</style>
	</head>
	<body>
	<h1>Todo List</h1>
	<form id="js-todo-form">
	<label>Task</label>
	<input type="text" name="task">
	<label>Due Date</label>
	<input type="date" name="duedate">
	<button type="submit">Guardar</button>
	</form>
	<div id="sort-menu">
	<p>Sort by</p>
	<ul>
	<li data-by="task">alphabetical</li>
	<li data-by="duedate">due date</li>
	<li data-by="creationdate">creation date</li>
	<li data-by="priority">priority</li>
	</ul>
	</div>
	<div class="js-content">
	<ul>
	<li data-task="Asd" data-duedate="2021-01-30">
	<div><span>Asd</span></div>
	<div>2021/1/30</div>
	</li>
	<li data-task="Qwerty" data-duedate="2021-01-13">
	<div>Qwerty</div>
	<div>2021/1/13</div>
	</li>
	</ul>
	</div>
	<script id="jsbin-javascript">
	'use strict';

	var store = {
	todos: [{ task: 'Reinforcement session', duedate: new Date('2020-01-11'), completed: true }, { task: 'Terminar de calificar', duedate: new Date('2020-01-10'), completed: false }]
	};

	function formatDate(date) {
	return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
	}

	function generateTodo(todo) {
	if (todo.completed) {
	return '<li data-value="' + todo.task + '" class="completed">\n <div>' + todo.task + '</div>\n <div>' + formatDate(todo.duedate) + '</div>\n </li>';
	}
	return '<li data-value="' + todo.task + '">\n <div>' + todo.task + '</div>\n <div>' + formatDate(todo.duedate) + '</div>\n </li>';
	}

	function generateTodos() {
	return '<ul>' + store.todos.map(function (todo) {
	return generateTodo(todo);
	}).join('') + '</ul>';
	}

	function renderContent() {
	var content = document.querySelector('.js-content');
	content.innerHTML = generateTodos();
	}

	function sortTodos(key) {
	switch (key) {
	case 'task':
	store.todos.sort(function (a, b) {
	if (a[key] > b[key]) {
	return 1;
	} else if (a[key] < b[key]) {
	return -1;
	} else {
	return 0;
	}
	});
	break;
	case 'duedate':
	store.todos.sort(function (a, b) {
	return a[key] - b[key];
	});
	break;
	}
	renderContent();
	}

	function listenFormSubmit() {
	var todoForm = document.querySelector('#js-todo-form');
	todoForm.addEventListener('submit', function (e) {
	e.preventDefault();
	var form = e.target;
	store.todos.push({ task: form.task.value });
	renderContent();
	});
	}

	function listenTodoClick() {
	var content = document.querySelector('.js-content');
	content.addEventListener('click', function (e) {
	var liAll = content.querySelectorAll('li');
	liAll.forEach(function (li) {
	if (li.contains(e.target)) {
	var selected = store.todos.find(function (todo) {
	return todo.task == li.dataset.value;
	});
	selected.completed = !selected.completed;
	renderContent();
	}
	});
	});
	}

	function listenSortClick() {
	var sortButtons = document.querySelectorAll('#sort-menu li');
	sortButtons.forEach(function (button) {
	button.addEventListener('click', function (e) {
	sortTodos(e.target.dataset.by);
	});
	});
	}

	function addEventListeners() {
	listenFormSubmit();
	listenTodoClick();
	listenSortClick();
	}

	function init() {
	addEventListeners();
	renderContent();
	}

	init();
	</script>


	<script id="jsbin-source-css" type="text/css">.completed{
	text-decoration: line-through;
	}
	#sort-menu li{
	cursor: pointer;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">const store = {
	todos: [
	{task: 'Reinforcement session', duedate: new Date('2020-01-11'), completed: true},
	{task: 'Terminar de calificar', duedate: new Date('2020-01-10'), completed: false}
	]
	}

	function formatDate(date){
	return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
	}

	function generateTodo(todo){
	if(todo.completed){
	return `<li data-value="${todo.task}" class="completed">
	<div>${todo.task}</div>
	<div>${formatDate(todo.duedate)}</div>
	</li>`
	}
	return `<li data-value="${todo.task}">
	<div>${todo.task}</div>
	<div>${formatDate(todo.duedate)}</div>
	</li>`
	}

	function generateTodos(){
	return `<ul>${store.todos.map(todo => generateTodo(todo)).join('')}</ul>`
	}

	function renderContent(){
	const content = document.querySelector('.js-content');
	content.innerHTML = generateTodos();
	}

	function sortTodos(key){
	switch(key){
	case 'task':
	store.todos.sort((a,b) => {
	if(a[key] > b[key]){
	return 1;
	} else if((a[key] < b[key])){
	return -1;
	}else{
	return 0;
	}
	});
	break;
	case 'duedate':
	store.todos.sort((a,b) => a[key] - b[key]);
	break;
	}
	renderContent();
	}

	function listenFormSubmit(){
	const todoForm = document.querySelector('#js-todo-form');
	todoForm.addEventListener('submit', e => {
	e.preventDefault();
	const form = e.target;
	store.todos.push({task: form.task.value})
	renderContent();
	});
	}

	function listenTodoClick(){
	const content = document.querySelector('.js-content');
	content.addEventListener('click', e => {
	const liAll = content.querySelectorAll('li');
	liAll.forEach(li => {
	if(li.contains(e.target)){
	const selected = store.todos.find(todo => todo.task == li.dataset.value);
	selected.completed = !selected.completed;
	renderContent();
	}
	})
	});
	}

	function listenSortClick(){
	const sortButtons = document.querySelectorAll('#sort-menu li');
	sortButtons.forEach(button => {
	button.addEventListener('click', e => {
	sortTodos(e.target.dataset.by)
	})
	})
	}

	function addEventListeners(){
	listenFormSubmit();
	listenTodoClick();
	listenSortClick();
	}

	function init(){
	addEventListeners();
	renderContent();
	}

	init();</script></body>
	</html>