Skip to content

Instantly share code, notes, and snippets.

@vampaynani

vampaynani/index.html

Created January 28, 2021 05:11
Show Gist options
  • Save vampaynani/17be7390ce59395f30f04a0edb027e43 to your computer and use it in GitHub Desktop.
Save vampaynani/17be7390ce59395f30f04a0edb027e43 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/ronitoc
Raw
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>
Raw
jsbin.ronitoc.css
.completed{
text-decoration: line-through;
}
#sort-menu li{
cursor: pointer;
}
Raw
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();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment