VIDEO 2TaskFlow
— Design Demonstration
Pro | 5 to 7 Minutes | Task Manager Module Script
■ INTRO
■ 0:00 – 0:30 (30 seconds)
→ Open [Link] in Chrome. Zoom browser to 120% — Press Ctrl and + together. App fully visible on
screen.
"Hello everyone, my name is [Your Name].
In this video I will demonstrate the Task Manager module — TaskFlow Pro — running live in the browser.
I will show you every feature — adding tasks, editing, completing, searching, filtering, sorting, and deleting.
Let me begin."
■ STEP 1 — App Overview
■ 0:30 – 1:00 (30 seconds)
→ Slowly scroll the page once — top to bottom. Do not click anything yet.
"This is TaskFlow Pro running live in Google Chrome.
At the top you can see the app name and the New Task button on the right.
Below that are the four stat cards — Total Tasks, Pending, Completed, and High Priority. These numbers
update automatically every time something changes.
On the left is the sidebar — with filter buttons for All Tasks, Today, Pending, Completed, and also Priority
filters.
And here are the task cards. Notice the colored left border on each card — red means High priority,
yellow means Medium, green means Low. You see the priority instantly without reading anything."
■ STEP 2 — Add a New Task
■ 1:00 – 2:00 (60 seconds)
→ Click the New Task button.
"When I click New Task, a modal dialog slides in with a smooth spring animation. Notice the background
blurs behind it — this keeps the user focused on the form.
→ Type a title — for example: Build the portfolio website
"I will type a task title here."
→ Type a short description.
"Now a short description."
→ Select High from the priority dropdown.
"I will set the priority to High — notice the design decision here. I chose a dropdown with color indicators
so the user can select priority without confusion."
→ Pick today's date in the due date field.
"And I set a due date for today."
→ Click Save Task.
"I click Save Task. The modal closes, a toast notification slides up at the bottom confirming the task was
added, and the new card appears at the top with a red left border because it is High priority. The Total and
Pending stat numbers both increased automatically."
✏■ STEP 3 — Edit a Task
■ 2:00 – 2:45 (45 seconds)
→ Click the Edit button — the pencil icon — on any task card.
"Now let me demonstrate editing. I click the Edit button on this task.
The same modal opens — but this time it is already pre-filled with the task's existing data. This is an
important design decision — the user does not have to re-type everything, only change what they need."
→ Change the title slightly. Click Save Task.
"I update the title and click Save. The card updates instantly with the new information. No page refresh
needed."
■ STEP 4 — Complete a Task
■ 2:45 – 3:15 (30 seconds)
→ Click the checkbox on any task card.
"Now I will mark a task as complete by clicking its checkbox.
Watch what happens — the card immediately gets a strikethrough on the title and fades slightly to show
it is done. The Completed stat increases and the Pending stat decreases — all in real time."
→ Click the checkbox again to uncheck it.
"And if I uncheck it, it goes straight back to pending. The stats update again immediately."
■ STEP 5 — Search Tasks
■ 3:15 – 3:45 (30 seconds)
→ Click the search bar and type a word slowly.
"Now the live search. As I type, the task list filters in real time — every single keystroke updates the
results immediately.
This works on both the title and the description of every task. The user does not need to press Enter — it
just works instantly."
→ Clear the search bar.
"Clearing the search brings all tasks back."
■ STEP 6 — Filter Tasks
■ 3:45 – 4:15 (30 seconds)
→ Click Pending in the sidebar filter.
"Now the filter. I click Pending in the sidebar — only tasks that are not yet completed are shown."
→ Click Completed in the sidebar.
"Now Completed — only the finished tasks appear."
→ Click All Tasks to go back.
"And back to All Tasks — everything is visible again."
■ STEP 7 — Sort Tasks
■ 4:15 – 4:45 (30 seconds)
→ Click the Priority sort button in the sort bar.
"Now sorting. I click Sort by Priority — watch the cards rearrange. High priority tasks move to the top,
then Medium, then Low.
This is a key design decision — in a real work environment, users need to see urgent tasks first without
having to scroll and search."
→ Click Sort by Date to go back.
"Switching back to Sort by Date — the most recently added task is at the top again."
■■ STEP 8 — Delete a Task
■ 4:45 – 5:15 (30 seconds)
→ Click the trash Delete button on any task card.
"Now delete. I click the trash icon on this task.
A confirmation dialog appears asking me to confirm — this is an intentional design decision to prevent
accidental deletion. In a real task manager, accidentally deleting work is a serious problem."
→ Click OK to confirm deletion.
"I confirm. The task is removed, the stats update, and a toast notification confirms it was deleted."
■ STEP 9 — Data Persistence
■ 5:15 – 5:45 (30 seconds)
→ Press F5 or Ctrl+R to refresh the page.
"Now I will show something very important — data persistence. I will refresh the entire page."
→ Wait for the page to fully reload. Point at the task list.
"The page has reloaded — and every single task is still here. Nothing was lost.
This is because every time I add, edit, or delete a task, the data is automatically saved to the browser's
localStorage. So even if you close the tab or restart the browser, your tasks are always restored."
■ STEP 10 — Responsive Design (Mobile View)
■ 5:45 – 6:30 (45 seconds)
→ Press F12 to open Chrome DevTools. Click the mobile toggle icon at the top. Select iPhone or any phone
size.
"Finally, let me show that this app is fully responsive. I will switch to mobile view using Chrome
DevTools."
→ Point at the mobile layout on screen.
"On a smaller screen the sidebar collapses, the layout stacks into a single column, and a hamburger menu
button appears to open the sidebar.
All the features still work perfectly — search, filter, sort, add, edit, delete. The design adapts to the screen
size without breaking anything."
→ Close DevTools. Return to normal desktop view.
"Back to desktop view."
■ CLOSING SUMMARY
■ 6:30 – 7:00 (30 seconds)
→ Stay on the browser with the app visible. Speak to camera.
"Let me quickly summarize everything I just demonstrated:
• Adding tasks with title, description, priority, and due date
• Editing tasks — the form pre-fills with existing data
• Completing tasks — checkbox with strikethrough and live stat update
• Live search — filters as you type
• Filter by status — All, Pending, Completed
• Sort by Date or Priority
• Delete with a confirmation step
• Data persistence — tasks saved to localStorage, survive page refresh
• Responsive design — works perfectly on mobile
This is TaskFlow Pro — a clean, professional, and fully functional Task Manager module.
"Thank you for watching."
■ Recording Tips
■ Zoom your browser to 120% before recording — Ctrl and + on Windows — so everything is clearly visible
■ Speak about WHY you made each design decision — not just what you are clicking. Interviewers love this.
■ Pause 1 second after each action so the viewer can clearly see what changed on screen
■ Total time at a comfortable pace — 6 to 7 minutes — perfectly within range