Skip to content

Commit

Permalink
Merge pull request #3 from Uzair-Manzoor/List-structure
Browse files Browse the repository at this point in the history 
List structure
  • Loading branch information
@Uzair-Manzoor
Uzair-Manzoor authored Jul 22, 2023
2 parents adf3047 + f2589cb commit 0155c75
Show file tree
Hide file tree
Showing 6 changed files with 38 additions and 212 deletions.
1 change: 1 addition & 0 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/1bc3a7e061.js" crossorigin="anonymous"></script>
<title>Todo-List App</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<main class="container">
Expand Down
161 changes: 37 additions & 124 deletions src/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,129 +1,42 @@
import './index.css';
import {
tasks, deleteTask, editTask, addTask,
} from './module/taskFunctions.js';

import updateStatus from './module/statusFunctions.js';
import clearAllCompletedTasks from './module/clearTask.js';
import { dragStart, dragOver, drop } from './module/dragAndDrop.js';

const todoListContainer = document.getElementById('todoList');
const addBtn = document.getElementById('addBtn');
const clearBtn = document.querySelector('.clear-completed');

const displayTasks = () => {
todoListContainer.textContent = '';
tasks.forEach((task, index) => {
todoListContainer.innerHTML += `
<li class="task" draggable="true" data-index="${index}">
<div class="checkbox-container">
<input type="checkbox" name="${task.description}" ${task.completed ? 'checked' : ''}>
<input type="text" value="${task.description}" readonly>
</div>
<i class="fas fa-ellipsis-vertical" data-index="${index}"></i>
</li>
`;
});

const addedTasks = document.querySelectorAll('.task');

const checkboxContainers = document.querySelectorAll('.task > .checkbox-container > input[type="checkbox"]');

checkboxContainers.forEach((checkbox) => {
const inputText = checkbox.nextElementSibling;
let previousState = checkbox.checked;

inputText.readOnly = true;

checkbox.addEventListener('change', (event) => {
const currentState = event.target.checked;

if (currentState !== previousState) {
const foundTask = tasks.find((task) => task.description === inputText.value);
if (foundTask) {
foundTask.completed = currentState;
updateStatus(tasks.indexOf(foundTask), currentState);
}
}

previousState = currentState;
});
});

addedTasks.forEach((task, index) => {
const textInput = task.querySelector('input[type="text"]');
task.addEventListener('dblclick', () => {
textInput.readOnly = false;
if (task.querySelector('.fa-ellipsis-vertical')) {
const ellipsisIcon = task.querySelector('.fa-ellipsis-vertical');
ellipsisIcon.classList.remove('fa-ellipsis-vertical');
ellipsisIcon.classList.add('fa-trash');
ellipsisIcon.addEventListener('click', () => {
deleteTask(index);
displayTasks();
});
} else {
const trashIcon = task.querySelector('.fa-trash');
trashIcon.classList.remove('fa-trash');
trashIcon.classList.add('fa-ellipsis-vertical');
textInput.readOnly = true;
}
const taskListContainer = document.getElementById('todoList');
const tasks = [
{
description: 'complete',
completed: true,
index: 1,
},
{
description: 'To do something',
completed: false,
index: 2,
},
{
description: 'list tasks',
completed: true,
index: 3,
},
];

export default class DisplayTasks {
static renderTasks() {
tasks.sort((a, b) => a.index - b.index);
taskListContainer.innerHTML = '';
tasks.forEach((task, index) => {
taskListContainer.innerHTML += `
<li class="task" draggable="true" data-index="${index}">
<div class="checkbox-container">
<input type="checkbox" name="${task.description}" ${task.completed ? 'checked' : ''}>
<input type="text" value="${task.description}" readonly>
</div>
<i class="fas fa-ellipsis-vertical" data-index="${index}"></i>
</li>
`;
});

// Edit
textInput.addEventListener('input', () => {
const data = textInput.value.trim();
editTask(data, index);
});

// Drag and drop
task.addEventListener('dragstart', dragStart);
task.addEventListener('dragover', dragOver);
task.addEventListener('drop', drop);
});
};

const initializeTasks = () => {
document.addEventListener('DOMContentLoaded', displayTasks);
};

const refreshPage = () => {
localStorage.removeItem('Tasks');
window.location.reload();
};

clearBtn.addEventListener('click', () => {
clearAllCompletedTasks();
displayTasks();
});

initializeTasks();
addBtn.addEventListener('click', () => {
const inputField = document.getElementById('input-task');
const taskDescription = inputField.value.trim();

// Check if the task description is not empty
if (taskDescription !== '') {
addTask(taskDescription);
inputField.value = '';
displayTasks();
}
});
document.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
const inputField = document.getElementById('input-task');
const taskDescription = inputField.value.trim();

// Check if the task description is not empty
if (taskDescription !== '') {
addTask(taskDescription);
inputField.value = '';
displayTasks();
}
}
});
document.querySelector('.fa-arrows-rotate').addEventListener('click', refreshPage);
// Add event listener to update the display
document.addEventListener('updateDisplay', displayTasks);
}

export {};
document.addEventListener('DOMContentLoaded', () => {
DisplayTasks.renderTasks();
});
10 changes: 0 additions & 10 deletions src/module/clearTask.js
View file

This file was deleted.

28 changes: 0 additions & 28 deletions src/module/dragAndDrop.js
View file

This file was deleted.

9 changes: 0 additions & 9 deletions src/module/statusFunctions.js
View file

This file was deleted.

41 changes: 0 additions & 41 deletions src/module/taskFunctions.js
View file

This file was deleted.

0 comments on commit 0155c75

Please sign in to comment.