Question: Objective: In this assignment, you will make an interactive web application to show your understanding of JavaScript, DOM manipulation, event handling, and browser objects. This
Objective: In this assignment, you will make an interactive web application to show your understanding of JavaScript, DOM manipulation, event handling, and browser objects. This project builds on what you learned in class and in earlier assignments by adding dynamic features and data handling to create a new website application.RequirementsYour task is to develop a "Personal Task Manager" web application. The application should allow users to add, edit, delete, and mark tasks as complete. Additionally, the application should store the user's task list in the browser's local storage, so the data persists even after the page is refreshed.Core Features:Task Management:oA form to add a new task with fields for:Task name required text inputDue date required date inputPriority dropdown with options: High, Medium, LowoDisplay tasks in a styled list use HTML and CSS to organize your layoutoEach task should include:Task nameDue datePriorityA "Mark as Complete" button.An "Edit" button.A "Delete" buttonDynamic DOM Manipulation:oUse JavaScript to dynamically update the task list as tasks are added, edited, or removed without refreshing the page.oTasks marked as complete should have a visual indicator eg strikethrough, color change, or an iconEvent Handling:oUse event listeners to handle user interactions, such as form submissions and button clicks.oValidate form inputs to ensure all required fields are filled out before adding a task.oUse JavaScript confirmation dialogs for delete actionsLocal Storage:oStore tasks in the browser's local storage.oRetrieve tasks from local storage and display them when the page is loadedBrowser Objects:oUse browser objects like alert, confirm, and prompt appropriately in your application.oInclude navigation buttons using history. back and history.forward for practiceAdditional Features Optional for Extra Credit:oA search bar to filter tasks by name or priority.oSort tasks by due date or priority.oDisplay a live clock using the Date object.Technical Requirements:JavaScript Concepts:oUse variables, arrays, objects, and functions.oInclude at least one example of an ifelse statement and one loop eg for, whileoDemonstrate understanding of local and global variable scopeDOM Manipulation:oDynamically create, modify, and remove DOM elements.oUse event handlers to add interactivityCoding Standards:oWrite clean, readable code with comments explaining key parts of your script.oFollow best practices for variable naming and organization.Submission Instructions:Project Files:oInclude the following files in your submission:index.html: Your HTML file.style.css: Your CSS file.script.js: Your JavaScript file.oEnsure all files are properly linked and functional.
Step by Step Solution
There are 3 Steps involved in it
1 Expert Approved Answer
Step: 1 Unlock
Question Has Been Solved by an Expert!
Get step-by-step solutions from verified subject matter experts
Step: 2 Unlock
Step: 3 Unlock
