From 55672d0ccb6e9c03f87c74314ebdb07ed1213fe6 Mon Sep 17 00:00:00 2001 From: Ricardo Cifuentes Date: Tue, 2 Jul 2024 10:01:16 -0500 Subject: [PATCH 1/2] Routing and task utilities Filters and routes were developed based on the type of task. The task functions implemented included: create, edit, delete, count, clean, and persistence. --- src/index.html | 129 ++++++++++++------------------- src/index.js | 45 ++++++++++- src/js/utils.js | 196 +++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 285 insertions(+), 85 deletions(-) diff --git a/src/index.html b/src/index.html index c38e045..fa59544 100644 --- a/src/index.html +++ b/src/index.html @@ -1,83 +1,52 @@ - - - - - - - - MyDayApp - JS - - -
-
-
-

My Day

-

All my tasks in one place

- -
-
-
- -
-
    - - -
  • -
    - - - -
    - -
    • -
  • -
    - - - -
    - -
    • -
  • -
    - - - -
    - -
    • -
-
- - + + + + + + + + + MyDayApp - JS + + + +
+
+
+

My Day

+

All my tasks in one place

+
-
- - + +
+ +
+
    +
+
+ + +
+
+ + + \ No newline at end of file diff --git a/src/index.js b/src/index.js index eba52c1..e8c5d23 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,46 @@ import "./css/base.css"; -import { sayHello } from "./js/utils"; +import { read } from "./js/utils"; +import { add } from "./js/utils"; +import { write } from "./js/utils"; +import { clear } from "./js/utils.js" -console.log(sayHello("Hello")); +const main = document.getElementById('main') +const footer = document.getElementById('footer') +const newTask = document.getElementById('new-todo') +const toDoList = document.getElementById('todo-list') +const toDoCount = document.getElementById('todo-count') +const filters = document.querySelectorAll('a[href]') +const clearButton = document.getElementById('clear-completed') + +const selected = (filters, rute) => { + filters.forEach(filter => { + if (filter.hash == rute) { + filter.classList.add('selected') + } + else { + filter.classList.remove('selected') + } + }) +} + +read(main, footer) +add(newTask, toDoList, toDoCount, clearButton) +window.addEventListener('load', () => { + const rute = location.hash + write(toDoList, toDoCount, rute, clearButton) + + selected(filters, rute) + + if (location.hash == '') { + filters[0].className = 'selected' + } +}) +clear(toDoList, toDoCount, clearButton) +window.addEventListener('hashchange', () => { + toDoList.innerHTML = '' + const rute = location.hash + write(toDoList, toDoCount, rute, clearButton) + + selected(filters, rute) +}) \ No newline at end of file diff --git a/src/js/utils.js b/src/js/utils.js index a985c08..08fe0ac 100644 --- a/src/js/utils.js +++ b/src/js/utils.js @@ -1,3 +1,193 @@ -export const sayHello = (text) => { - return text; -}; +//READ----READ----READ----READ----READ----READ----READ----READ----READ----READ----READ----READ----READ +export const read = (main, footer) => { + + if (localStorage.length == 0 || localStorage['mydayapp-js'] == '[]') { + main.classList.add('hidden') + footer.classList.add('hidden') + + const tasks = [] + + localStorage.setItem('mydayapp-js', JSON.stringify(tasks)) + } +} + +//CHECKCOMPLETED +const checkCompleted = (tasks, clearButton) => { + const completedTasks = tasks.filter(task => task.completed == true) + completedTasks.length != 0 ? clearButton.classList.remove('hidden') : clearButton.classList.add('hidden') +} + +//VIEW----VIEW----VIEW----VIEW----VIEW----VIEW----VIEW----VIEW----VIEW----VIEW----VIEW----VIEW----VIEW +const view = (toDoList, tasks, task, index, clearButton) => { + + const taskElement = document.createElement('li') + const taskDivElement = document.createElement('div') + const toogleTask = document.createElement('input') + const taskText = document.createElement('label') + const destroyTask = document.createElement('button') + const editTask = document.createElement('input') + + if (task.completed) { + taskElement.setAttribute('class', 'completed') + toogleTask.checked = true + } + + taskDivElement.setAttribute('class', 'view') + + toogleTask.setAttribute('class', 'toggle') + toogleTask.setAttribute('type', 'checkbox') + + taskText.textContent = task.title + taskText.addEventListener('dblclick', () => { + taskElement.setAttribute('class', 'editing') + editTask.focus() + if (taskElement.className == 'editing') { + editTask.addEventListener('keydown', (event) => { + if (event.key == 'Escape') { + taskElement.setAttribute('class', '') + } + }) + } + }) + + toogleTask.addEventListener('change', () => { + const newTasks = JSON.parse(localStorage.getItem('mydayapp-js')) + if (toogleTask.checked) { + taskElement.setAttribute('class', 'completed') + newTasks[index].completed = true + newTasks[index].pending = false + localStorage.setItem('mydayapp-js', JSON.stringify(newTasks)) + checkCompleted(newTasks, clearButton) + } else { + taskElement.setAttribute('class', '') + newTasks[index].completed = false + newTasks[index].pending = true + console.log(newTasks[index]) + localStorage.setItem('mydayapp-js', JSON.stringify(newTasks)) + checkCompleted(newTasks, clearButton) + } + }) + + destroyTask.setAttribute('class', 'destroy') + + taskDivElement.append(toogleTask, taskText, destroyTask) + + editTask.focus() + editTask.setAttribute('class', 'edit') + editTask.setAttribute('value', task.title) + editTask.setSelectionRange(task.title.length, task.title.length); + editTask.addEventListener('keydown', (event) => { + if (event.key == 'Enter' && editTask.value.trim() != '') { + taskText.textContent = editTask.value.trim() + taskElement.setAttribute('class', '') + tasks[index].title = taskText.textContent + localStorage.setItem('mydayapp-js', JSON.stringify(tasks)) + } + }) + + taskElement.append(taskDivElement, editTask) + toDoList.appendChild(taskElement) +} + +//COUNTER----COUNTER----COUNTER----COUNTER----COUNTER----COUNTER----COUNTER----COUNTER----COUNTER----COUNTER----COUNTER +const counter = (toDoList, toDoCount) => { + if (toDoList.childElementCount == 1) { + toDoCount.innerHTML = `${toDoList.childElementCount} item left` + } else { + toDoCount.innerHTML = `${toDoList.childElementCount} items left` + } +} + +//ADD----ADD----ADD----ADD----ADD----ADD----ADD----ADD----ADD----ADD----ADD----ADD----ADD----ADD----ADD----ADD----ADD +export const add = (newTask, toDoList, toDoCount, clearButton) => { + newTask.addEventListener('keydown', (event) => { + if (event.key == 'Enter') { + + const newTaskValue = newTask.value.trim() + if (newTaskValue != '') { + + const task = { pending: true, completed: false, title: newTaskValue } + + const tasks = JSON.parse(localStorage.getItem('mydayapp-js')) + tasks.push(task) + + const index = tasks.indexOf(task) + + localStorage.setItem('mydayapp-js', JSON.stringify(tasks)) + + view(toDoList, tasks, task, index, clearButton) + + newTask.value = '' + + if (localStorage.length == 1) { + main.classList.remove('hidden') + footer.classList.remove('hidden') + } + + counter(toDoList, toDoCount) + } + } + }) +} + +//WRITE----WRITE----WRITE----WRITE----WRITE----WRITE----WRITE----WRITE----WRITE----WRITE----WRITE----WRITE----WRITE +export const write = (toDoList, toDoCount, rute, clearButton) => { + + const tasks = JSON.parse(localStorage.getItem('mydayapp-js')) + + switch (rute) { + case '#/': + tasks.forEach(task => { + const index = tasks.indexOf(task) + view(toDoList, tasks, task, index, clearButton) + }) + checkCompleted(tasks, clearButton) + break; + case '#/pending': + const pendingTasks = tasks.filter((task) => task.pending === true) + pendingTasks.forEach(task => { + const index = pendingTasks.indexOf(task) + view(toDoList, pendingTasks, task, index, clearButton) + }) + clearButton.classList.add('hidden') + break; + case '#/completed': + const completedTasks = tasks.filter((task) => task.completed === true) + completedTasks.forEach(task => { + const index = completedTasks.indexOf(task) + view(toDoList, completedTasks, task, index, clearButton) + }) + checkCompleted(tasks, clearButton) + break; + default: + tasks.forEach(task => { + const index = tasks.indexOf(task) + view(toDoList, tasks, task, index, clearButton) + }) + checkCompleted(tasks, clearButton) + break; + } + + counter(toDoList, toDoCount) +} + +//CLEAR----CLEAR----CLEAR----CLEAR----CLEAR----CLEAR----CLEAR----CLEAR----CLEAR----CLEAR----CLEAR----CLEAR----CLEAR +export const clear = (toDoList, toDoCount, clearButton) => { + clearButton.addEventListener('click', () => { + + const tasks = JSON.parse(localStorage.getItem('mydayapp-js')) + + const pendingTasks = tasks.filter((task) => task.pending == true) + localStorage.setItem('mydayapp-js', JSON.stringify(pendingTasks)) + + const completedTasks = document.getElementsByClassName('completed') + + Array.from(completedTasks).forEach(task => { + task.remove() + }); + + counter(toDoList, toDoCount) + + checkCompleted(pendingTasks, clearButton) + }) +} \ No newline at end of file From 9a1f9326937b8c8cb288c9bf1550be4ffa88c55a Mon Sep 17 00:00:00 2001 From: Ricardo Cifuentes Date: Tue, 2 Jul 2024 10:26:42 -0500 Subject: [PATCH 2/2] Model correction The data model of a task was corrected. --- src/js/utils.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/js/utils.js b/src/js/utils.js index 08fe0ac..d09be59 100644 --- a/src/js/utils.js +++ b/src/js/utils.js @@ -55,13 +55,11 @@ const view = (toDoList, tasks, task, index, clearButton) => { if (toogleTask.checked) { taskElement.setAttribute('class', 'completed') newTasks[index].completed = true - newTasks[index].pending = false localStorage.setItem('mydayapp-js', JSON.stringify(newTasks)) checkCompleted(newTasks, clearButton) } else { taskElement.setAttribute('class', '') newTasks[index].completed = false - newTasks[index].pending = true console.log(newTasks[index]) localStorage.setItem('mydayapp-js', JSON.stringify(newTasks)) checkCompleted(newTasks, clearButton) @@ -106,7 +104,7 @@ export const add = (newTask, toDoList, toDoCount, clearButton) => { const newTaskValue = newTask.value.trim() if (newTaskValue != '') { - const task = { pending: true, completed: false, title: newTaskValue } + const task = { completed: false, title: newTaskValue } const tasks = JSON.parse(localStorage.getItem('mydayapp-js')) tasks.push(task) @@ -144,7 +142,7 @@ export const write = (toDoList, toDoCount, rute, clearButton) => { checkCompleted(tasks, clearButton) break; case '#/pending': - const pendingTasks = tasks.filter((task) => task.pending === true) + const pendingTasks = tasks.filter((task) => task.completed === false) pendingTasks.forEach(task => { const index = pendingTasks.indexOf(task) view(toDoList, pendingTasks, task, index, clearButton) @@ -177,7 +175,7 @@ export const clear = (toDoList, toDoCount, clearButton) => { const tasks = JSON.parse(localStorage.getItem('mydayapp-js')) - const pendingTasks = tasks.filter((task) => task.pending == true) + const pendingTasks = tasks.filter((task) => task.completed == false) localStorage.setItem('mydayapp-js', JSON.stringify(pendingTasks)) const completedTasks = document.getElementsByClassName('completed')