Scribd
Upload
3 views4 pages

Java Script Resume Project - Smart Task Manager

Smart Task Manager is a responsive web-based task management application developed using Vanilla JavaScript, HTML5, and CSS3, allowing users to manage tasks with features like CRUD operations and data persistence via LocalStorage. The project showcases strong JavaScript fundamentals, DOM manipulation, and clean UI design, making it suitable for portfolios. Future enhancements include adding due dates, drag-and-drop functionality, and a dark mode toggle.

Uploaded by

msgore909
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views4 pages

Java Script Resume Project - Smart Task Manager

Smart Task Manager is a responsive web-based task management application developed using Vanilla JavaScript, HTML5, and CSS3, allowing users to manage tasks with features like CRUD operations and data persistence via LocalStorage. The project showcases strong JavaScript fundamentals, DOM manipulation, and clean UI design, making it suitable for portfolios. Future enhancements include adding due dates, drag-and-drop functionality, and a dark mode toggle.

Uploaded by

msgore909
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Smart Task Manager (JavaScript Project)

Project Overview
Smart Task Manager is a responsive web-based task management application built using Vanilla
JavaScript, HTML5, and CSS3. The application allows users to create, update, delete, and filter tasks, with
persistent storage using the browser's LocalStorage.

This project demonstrates strong fundamentals in JavaScript, DOM manipulation, event handling, and clean
UI design — making it ideal to showcase on a resume or GitHub portfolio.

Key Features
• Add, edit, and delete tasks
• Mark tasks as completed
• Filter tasks (All / Completed / Pending)
• Persist data using LocalStorage
• Responsive design for mobile and desktop
• Clean and intuitive user interface

Technologies Used
• JavaScript (ES6+)
• HTML5
• CSS3 (Flexbox)
• LocalStorage API

Folder Structure

smart-task-manager/
│── [Link]
│── [Link]
│── [Link]
└── [Link]

1
Sample Code

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Smart Task Manager</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<div class="app">
<h1>Smart Task Manager</h1>
<input type="text" id="taskInput" placeholder="Enter a new task" />
<button id="addTask">Add Task</button>
<ul id="taskList"></ul>
</div>
<script src="[Link]"></script>
</body>
</html>

[Link]

const taskInput = [Link]('taskInput');


const taskList = [Link]('taskList');
const addTaskBtn = [Link]('addTask');

let tasks = [Link]([Link]('tasks')) || [];

function renderTasks() {
[Link] = '';
[Link]((task, index) => {
const li = [Link]('li');
[Link] = [Link];
[Link] = [Link] ? 'completed' : '';

[Link]('click', () => toggleTask(index));

const deleteBtn = [Link]('button');


[Link] = 'X';
[Link] = () => deleteTask(index);

[Link](deleteBtn);

2
[Link](li);
});

[Link]('tasks', [Link](tasks));
}

function addTask() {
if ([Link]() === '') return;
[Link]({ text: [Link], completed: false });
[Link] = '';
renderTasks();
}

function toggleTask(index) {
tasks[index].completed = !tasks[index].completed;
renderTasks();
}

function deleteTask(index) {
[Link](index, 1);
renderTasks();
}

[Link]('click', addTask);
renderTasks();

Resume Description (Copy-Paste Ready)


Smart Task Manager | JavaScript
• Developed a responsive task management web application using Vanilla JavaScript, HTML,
and CSS
• Implemented CRUD operations with persistent data storage using LocalStorage
• Applied DOM manipulation, event handling, and ES6 concepts
• Improved user experience through clean UI and interactive task filtering

Future Enhancements
• Due date and priority levels
• Drag-and-drop task reordering
• Search functionality
• Dark mode toggle

3
GitHub Tip
Add screenshots, a live demo link (GitHub Pages), and this README to make the project stand out on your
resume.

You might also like