-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3 from Sanja969/add-Edit-Remove
Milestone 2: Add, Edit and Remove functionalities
- Loading branch information
Showing
16 changed files
with
1,013 additions
and
59 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
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
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import appendTask from './addTaskUI.js'; | ||
|
||
const list = []; | ||
|
||
class Task { | ||
constructor(description, completed, index) { | ||
this.description = description; | ||
this.completed = completed; | ||
this.index = index; | ||
} | ||
} | ||
|
||
const addTask = (description, completed, index) => { | ||
const task = new Task(description, completed, index); | ||
list.push(task); | ||
appendTask(task); | ||
localStorage.setItem('tasks', JSON.stringify(list)); | ||
}; | ||
|
||
export { | ||
addTask, | ||
list, | ||
Task, | ||
}; |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
import moveSrc from './move.png'; | ||
import trashSrc from './trash.png'; | ||
import clearTask from './remove.js'; | ||
|
||
const toDoListUI = document.querySelector('.to-do-list'); | ||
const endCont = document.querySelector('.clear'); | ||
|
||
const appendTask = (item, list) => { | ||
const taskUI = document.createElement('li'); | ||
taskUI.innerHTML = `<div><input type='checkbox' id = task-${item.index} class = 'check' value=${item.index}><p size='12'>${item.description}</p></div>`; | ||
const moveImg = new Image(); | ||
moveImg.src = moveSrc; | ||
taskUI.appendChild(moveImg); | ||
moveImg.addEventListener('click', () => { | ||
if (moveImg.src === moveSrc) { | ||
moveImg.src = trashSrc; | ||
moveImg.parentNode.style.background = 'rgba(214, 214, 148, 0.534)'; | ||
taskUI.children[0].children[1].setAttribute('contenteditable', 'true'); | ||
endCont.textContent = 'Chick here to save changes'; | ||
endCont.style.background = 'rgba(136, 209, 133, 0.534)'; | ||
endCont.style.fontSize = '24px'; | ||
endCont.style.color = 'green'; | ||
endCont.addEventListener('click', (e) => { | ||
if (moveImg.src === trashSrc) { | ||
e.target.textContent = 'Clear all completed'; | ||
e.target.style.background = 'rgba(168, 157, 157, 0.534)'; | ||
e.target.style.fontSize = '16px'; | ||
e.target.style.color = 'black'; | ||
taskUI.children[0].children[1].setAttribute('contenteditable', 'false'); | ||
moveImg.src = moveSrc; | ||
list.forEach((element) => { | ||
if (element.index === item.index) { | ||
element.description = taskUI.children[0].children[1].textContent; | ||
localStorage.setItem('tasks', JSON.stringify(list)); | ||
} | ||
}); | ||
} | ||
}); | ||
} else { | ||
clearTask(item.index, list); | ||
} | ||
}); | ||
toDoListUI.appendChild(taskUI); | ||
const check = taskUI.children[0].children[0]; | ||
|
||
if (item.completed === true) { | ||
check.checked = true; | ||
taskUI.children[0].style.textDecoration = 'line-through'; | ||
} | ||
|
||
check.style.cursor = 'pointer'; | ||
moveImg.style.cursor = 'pointer'; | ||
check.addEventListener('click', () => { | ||
if (check.checked === true) { | ||
taskUI.children[0].style.textDecoration = 'line-through'; | ||
item.completed = true; | ||
localStorage.setItem('tasks', JSON.stringify(list)); | ||
} else { | ||
taskUI.children[0].style.textDecoration = 'none'; | ||
item.completed = false; | ||
localStorage.setItem('tasks', JSON.stringify(list)); | ||
} | ||
}); | ||
}; | ||
|
||
export default appendTask; |
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,35 +1,43 @@ | ||
import './style.css'; | ||
import moveSrc from './move.png'; | ||
import refreshSrc from './refresh.png'; | ||
import returnSrc from './return.png'; | ||
import { | ||
addTask, | ||
list, | ||
} from './add.js'; | ||
import clearTask from './remove.js'; | ||
import appendTask from './addTaskUI.js'; | ||
import Task from './tasks.js'; | ||
|
||
const storage = JSON.parse(localStorage.getItem('tasks')) || []; | ||
const addUI = document.querySelector('.add'); | ||
const deleteUI = document.querySelector('.clear'); | ||
const returnImg = document.querySelector('.imgSubmit'); | ||
returnImg.src = returnSrc; | ||
|
||
const refreshImg = document.querySelector('.imgRefresh'); | ||
refreshImg.src = refreshSrc; | ||
|
||
const toDoListUI = document.querySelector('.to-do-list'); | ||
storage.forEach((item) => { | ||
const task = new Task(item.description, item.completed, item.index); | ||
list.push(task); | ||
appendTask(task, list); | ||
}); | ||
|
||
class Task { | ||
constructor(description, completed, index) { | ||
this.description = description; | ||
this.completed = completed; | ||
this.index = index; | ||
} | ||
} | ||
returnImg.src = returnSrc; | ||
refreshImg.src = refreshSrc; | ||
|
||
const list = [new Task('Finsh the project', false, 0), new Task('Wash the dishes', false, 1), new Task('Go on zoom meeting', false, 2)]; | ||
addUI.addEventListener('change', () => { | ||
addTask(addUI.value, false, list.length + 1); | ||
}); | ||
|
||
const appendTask = (item) => { | ||
const taskUI = document.createElement('li'); | ||
taskUI.innerHTML = `<label><input type='checkbox' id = task-${item.index} class = 'check' value=${item.index}>${item.description}</label>`; | ||
const moveImg = new Image(); | ||
moveImg.src = moveSrc; | ||
taskUI.appendChild(moveImg); | ||
toDoListUI.appendChild(taskUI); | ||
}; | ||
refreshImg.addEventListener('click', () => { | ||
document.location.href = './index.html'; | ||
}); | ||
|
||
for (let i = 0; i < list.length; i += 1) { | ||
appendTask(list[i]); | ||
} | ||
deleteUI.addEventListener('click', () => { | ||
const checks = document.querySelectorAll('.check'); | ||
for (let i = 0; i < checks.length; i += 1) { | ||
if (checks[i].checked) { | ||
clearTask(checks[i].value, list); | ||
} | ||
} | ||
localStorage.setItem('tasks', JSON.stringify(list)); | ||
}); |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
const clearTask = (index, list) => { | ||
if (list.length === 0) return; | ||
|
||
list.splice(index - 1, 1); | ||
|
||
document.querySelector(`#task-${index}`).parentNode.parentNode.remove(); | ||
localStorage.setItem('tasks', JSON.stringify(list)); | ||
|
||
if (list.length === 0) return; | ||
|
||
for (let i = index - 1; i < list.length; i += 1) { | ||
const nextCheck = document.querySelector(`#task-${i + 2}`); | ||
nextCheck.id = `task-${i + 1}`; | ||
nextCheck.value -= 1; | ||
list[i].index -= 1; | ||
localStorage.setItem('tasks', JSON.stringify(list)); | ||
} | ||
}; | ||
|
||
export default clearTask; |
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
class Task { | ||
constructor(description, completed, index) { | ||
this.description = description; | ||
this.completed = completed; | ||
this.index = index; | ||
} | ||
} | ||
export default Task; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.