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:1.Task Management:oA form to add a new task with fields for:Task name (required, text input)Due date (required, date input)Priority (dropdown with options: High, Medium, Low)oDisplay tasks in a styled list (use HTML and CSS to organize your layout).oEach task should include:Task nameDue datePriorityA "Mark as Complete" button.An "Edit" button.A "Delete" button.2.Dynamic 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 (e.g., strikethrough, color change, or an icon).3.Event 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 actions.4.Local Storage:oStore tasks in the browser's local storage.oRetrieve tasks from local storage and display them when the page is loaded.5.Browser Objects:oUse browser objects like alert, confirm, and prompt appropriately in your application.oInclude navigation buttons (using history. back () and history.forward ()) for practice.6.Additional 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:1.JavaScript Concepts:oUse variables, arrays, objects, and functions.oInclude at least one example of an if/else statement and one loop (e.g., for, while).oDemonstrate understanding of local and global variable scope.2.DOM Manipulation:oDynamically create, modify, and remove DOM elements.oUse event handlers to add interactivity.3.Coding Standards:oWrite clean, readable code with comments explaining key parts of your script.oFollow best practices for variable naming and organization.Submission Instructions:1.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 blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Programming Questions!