JavaScript Concepts Demonstrated in This Task Tracker
This interactive application showcases several core JavaScript and modern Web API concepts. Below is an explanation of the key features implemented.
1. DOM Manipulation
The Document Object Model (DOM) is dynamically manipulated to create, update, and delete task elements without refreshing the page. The createTaskElement() function uses JavaScript to generate the HTML structure for each task card.
// Example: Creating an element
const taskDiv = document.createElement('div');
taskDiv.className = 'task-item';
taskDiv.innerHTML = `...template...`;
taskList.appendChild(taskDiv);2. Event Handling
Event listeners are used to handle user interactions. The form submission is captured, and clicks on the "Delete" and "Mark Complete" buttons are handled to trigger the appropriate functions.
// Example: Form submission event
taskForm.addEventListener('submit', function(e) {
e.preventDefault(); // Prevents page reload
// ...logic to handle the form data
});3. Data Persistence (localStorage)
The Web Storage API (localStorage) is used to persist the task data in the user's browser. This allows the tasks to remain available even after the browser is closed and reopened.
// Saving data to localStorage
localStorage.setItem('tasks', JSON.stringify(tasks));
// Retrieving data from localStorage
const tasks = JSON.parse(localStorage.getItem('tasks')) || [];4. Modern ES6+ Syntax
This project utilizes modern JavaScript features including arrow functions, template literals, const/let, and array methods like forEach() and findIndex().
// Example: Arrow function & template literal
const showNotification = (message, type) => {
notification.innerHTML = `${message}`;
};5. Form Validation
Client-side form validation provides immediate user feedback. The Constraint Validation API is used to check if the required "Task Title" field is filled out before submission.
// Example: Input validation check
if (!taskTitle.validity.valid) {
showTitleError(); // Show custom error message
taskTitle.focus(); // Focus on the input field
return; // Stop form submission
}6. Accessibility (ARIA)
Accessibility features have been implemented, including ARIA attributes (aria-labelledby, aria-describedby) and a "Skip to main content" link to improve the experience for users of assistive technologies.
<!-- Example: ARIA attribute -->
<div id="titleError" class="error-message" role="alert"></div>
<input aria-describedby="titleError">