-
Notifications
You must be signed in to change notification settings - Fork 1
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 awaisanwar544/feature
Feature
- Loading branch information
Showing
16 changed files
with
254 additions
and
35 deletions.
There are no files selected for viewing
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
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
File renamed without changes
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,34 +1,49 @@ | ||
// eslint-disable-next-line no-unused-vars | ||
import style from './main.css'; | ||
import dragIcon from './drag-icon.svg'; | ||
import populateList from './modules/populateList.js'; | ||
import TaskList from './modules/taskList.js'; | ||
import Task from './modules/task.js'; | ||
import clearList from './modules/clearList.js'; | ||
import updateTaskEvent from './modules/updateTask.js'; | ||
import removeTask from './modules/removeTask.js'; | ||
import { addToLocalStorage, getLocalStorage } from './modules/useLocalStorage.js'; | ||
|
||
const taskList = [ | ||
{ | ||
index: 1, | ||
description: 'Wash the dishes', | ||
completed: false, | ||
}, | ||
{ | ||
index: 2, | ||
description: 'Complete todo list project', | ||
completed: false, | ||
}, | ||
]; | ||
const inputTask = document.querySelector('#newtask'); | ||
const element = document.querySelector('#task-list'); | ||
const newList = new TaskList(); | ||
|
||
const populateList = (list, target) => { | ||
list.forEach((item) => { | ||
const li = document.createElement('li'); | ||
const checkbox = document.createElement('input'); | ||
const p = document.createElement('p'); | ||
p.innerHTML = item.description; | ||
const drag = document.createElement('img'); | ||
drag.src = dragIcon; | ||
checkbox.setAttribute('type', 'checkbox'); | ||
li.append(checkbox); | ||
li.append(p); | ||
li.append(drag); | ||
target.append(li); | ||
const delEvent = () => { | ||
const del = document.querySelectorAll('.del'); | ||
del.forEach((item) => { | ||
item.addEventListener('click', (event) => { | ||
removeTask(newList, event.target.parentElement.id); | ||
clearList(element); | ||
populateList(newList, element); | ||
addToLocalStorage(newList.storage); | ||
delEvent(); | ||
}); | ||
}); | ||
}; | ||
const element = document.querySelector('#task-list'); | ||
populateList(taskList, element); | ||
|
||
inputTask.addEventListener('keypress', (event) => { | ||
if (event.key === 'Enter' && event.target.value) { | ||
event.preventDefault(); | ||
const index = newList.storage.length + 1; | ||
const newTask = new Task(event.target.value, index); | ||
newList.addNew(newTask); | ||
event.target.value = ''; | ||
clearList(element); | ||
updateTaskEvent(element, newList.storage); | ||
populateList(newList, element); | ||
delEvent(); | ||
addToLocalStorage(newList.storage); | ||
} | ||
}); | ||
|
||
window.onload = () => { | ||
if (localStorage.length !== 0) { | ||
newList.storage = getLocalStorage(); | ||
populateList(newList, element); | ||
delEvent(); | ||
} | ||
}; |
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,5 @@ | ||
const clearList = (element) => { | ||
element.innerHTML = ''; | ||
}; | ||
|
||
export default clearList; |
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,27 @@ | ||
import dragIcon from '../assets/drag-icon.svg'; | ||
import deleteIcon from '../assets/delete-icon.svg'; | ||
|
||
const populateList = (list, target) => { | ||
list.storage.forEach((item) => { | ||
const li = document.createElement('li'); | ||
li.setAttribute('id', item.index); | ||
li.setAttribute('class', 'task'); | ||
const checkbox = document.createElement('input'); | ||
const p = document.createElement('p'); | ||
p.setAttribute('contentEditable', 'true'); | ||
p.innerHTML = item.desc; | ||
const del = document.createElement('img'); | ||
del.src = deleteIcon; | ||
del.setAttribute('class', 'del'); | ||
const drag = document.createElement('img'); | ||
drag.src = dragIcon; | ||
checkbox.setAttribute('type', 'checkbox'); | ||
li.append(checkbox); | ||
li.append(p); | ||
li.append(del); | ||
li.append(drag); | ||
target.append(li); | ||
}); | ||
}; | ||
|
||
export default populateList; |
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,6 @@ | ||
const removeTask = (list, ref) => { | ||
list.removeItem(ref); | ||
list.setIndexes(); | ||
}; | ||
|
||
export default removeTask; |
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,9 @@ | ||
class Task { | ||
constructor(desc, index) { | ||
this.index = index; | ||
this.desc = desc; | ||
this.completed = false; | ||
} | ||
} | ||
|
||
export default 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,23 @@ | ||
class TaskList { | ||
constructor() { | ||
this.storage = []; | ||
} | ||
|
||
addNew(item) { | ||
this.storage.push(item); | ||
} | ||
|
||
removeItem(ref) { | ||
this.storage = this.storage.filter((item) => item.index !== Number(ref)); | ||
} | ||
|
||
setIndexes() { | ||
if (this.storage.length > 0) { | ||
this.storage.forEach((item, i) => { | ||
item.index = i + 1; | ||
}); | ||
} | ||
} | ||
} | ||
|
||
export default TaskList; |
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,15 @@ | ||
const updateTaskList = (storage, ref, newValue) => { | ||
storage[ref - 1].desc = newValue; | ||
}; | ||
|
||
const updateTaskEvent = (element, storage) => { | ||
element.addEventListener('keyup', (e) => { | ||
if (e.key === 'Enter') { | ||
e.preventDefault(); | ||
e.target.blur(); | ||
} | ||
updateTaskList(storage, e.target.parentElement.id, e.target.outerText); | ||
}); | ||
}; | ||
|
||
export default updateTaskEvent; |
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,7 @@ | ||
const addToLocalStorage = (data) => { | ||
localStorage.setItem('data', JSON.stringify(data)); | ||
}; | ||
|
||
const getLocalStorage = () => JSON.parse(localStorage.getItem('data')); | ||
|
||
export { addToLocalStorage, getLocalStorage }; |
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