Name: Free Credit No Apk Loyalty
Rating: 4.4 (30839 reviews)
@@ -20,6 +20,7 @@ Made by **Valentina Rotondaro** and **Alexa Cattaneo Piazza**.
 | Save todos in localStorage | 14 |`storage.ts`|
 | Input validation (empty, max 100 characters, no duplicates) | 16 |`features/validation.ts`|
 | Filter by status (All / Active / Completed) | 4 |`features/statusFilter.ts`|
+| Progress bar (follows the category filter) | 10 |`features/progress.ts`|
 
 ## Tech stack
 
 
@@ -12,6 +12,12 @@
 <body>
 <divclass="container">
 <h1>MinTask</h1>
+<divclass="progress">
+<divclass="progress-track" id="progress-bar" role="progressbar" aria-label="Todos done" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
+<divclass="progress-fill" id="progress-fill"></div>
+</div>
+<pclass="progress-label" id="progress-label"></p>
+</div>
 <formclass="todo-form">
 <inputtype="text" id="todo-input" placeholder="Add a new todo" />
 <inputtype="date" id="due-date-input" />
 
@@ -0,0 +1,20 @@
+importtype{Todo}from'../types';
+
+/** How many todos are done, out of how many, and the percentage. */
+exportinterfaceProgress{
+done: number;
+total: number;
+percent: number;
+}
+
+/**
+ * Calculates the progress of a list of todos.
+ * @param todos - The list of todos.
+ * @returns The number of done todos, the total and the percentage (0–100, rounded).
+ */
+exportconstgetProgress=(todos: Todo[]): Progress=>{
+consttotal=todos.length;
+constdone=todos.filter(todo=>todo.completed).length;
+constpercent=total===0 ? 0 : Math.round((done/total)*100);
+return{ done, total, percent };
+};
@@ -5,12 +5,16 @@ import { toggleTodo } from './features/toggle';
 import{CATEGORIES,filterByCategory,countByCategory,getActiveCategory,setActiveCategory}from'./features/categories';
 importtype{CategoryFilter}from'./features/categories';
 import{STATUSES,filterByStatus,countByStatus,getActiveStatus,setActiveStatus}from'./features/statusFilter';
+import{getProgress}from'./features/progress';
 importtype{Todo}from'./types';
 
 // Reference to the list in index.html (DOM + typecasting)
 consttodoList=document.getElementById('todo-list')asHTMLUListElement;
 constcategoryFilter=document.getElementById('category-filter')asHTMLDivElement;
 conststatusFilter=document.getElementById('status-filter')asHTMLDivElement;
+constprogressBar=document.getElementById('progress-bar')asHTMLDivElement;
+constprogressFill=document.getElementById('progress-fill')asHTMLDivElement;
+constprogressLabel=document.getElementById('progress-label')asHTMLParagraphElement;
 
 // "work" → "Work"
 constlabel=(text: string): string=>text.charAt(0).toUpperCase()+text.slice(1);
@@ -25,6 +29,7 @@ export const renderTodos = (): void => {
 renderCategoryFilter();
 constinCategory=filterByCategory(todos,getActiveCategory());
 renderStatusFilter(inCategory);
+renderProgress(inCategory)
 sortByPriority(filterByStatus(inCategory,getActiveStatus())).forEach(todo=>{
 constli=document.createElement('li');
 conststatus=getDueStatus(todo);
@@ -111,4 +116,11 @@ const renderStatusFilter = (list: Todo[]): void => {
 });
 statusFilter.appendChild(button);
 });
+};
+// Updates the progress bar for the todos of the chosen category.
+constrenderProgress=(list: Todo[]): void=>{
+const{ done, total, percent }=getProgress(list);
+progressFill.style.width=`${percent}%`;
+progressBar.setAttribute('aria-valuenow',String(percent));
+progressLabel.textContent=total===0 ? 'No todos yet' : `${done} of ${total} done · ${percent}%`;
 };
@@ -278,3 +278,28 @@ h1 {
 font-weight:600;
 box-shadow:01px2pxrgba(0,0,0,0.08);
 }
+/* === Progress bar (Valen) === */
+.progress{
+margin-bottom:20px;
+}
+
+.progress-track{
+height:8px;
+border-radius:999px;
+background:#e6e4de;
+overflow: hidden;
+}
+
+.progress-fill{
+width:0;
+height:100%;
+border-radius:999px;
+background:#141414;
+transition: width 0.3s ease;
+}
+
+.progress-label{
+margin:6px00;
+color:#5c5a55;
+font-size:13px;
+}
@@ -0,0 +1,52 @@
+import{Selector}from'testcafe';
+
+// Locally: BASE_URL=http://127.0.0.1:5173 npx testcafe chrome test/e2e/progress.test.js
+constBASE_URL=process.env.BASE_URL||'https://todo.mintask.dk/test/';
+
+fixture('Todo app – progress bar').page(BASE_URL);
+
+constinput=Selector('#todo-input');
+constcategoryInput=Selector('#category-input');
+constaddButton=Selector('.todo-form button');
+constitems=Selector('#todo-list li');
+constprogressBar=Selector('#progress-bar');
+constprogressLabel=Selector('#progress-label');
+constfilterPill=category=>Selector('.filter-pill').withAttribute('data-category',category);
+
+constaddTodoWithCategory=async(t,text,category)=>{
+awaitt
+.typeText(input,text)
+.click(categoryInput)
+.click(categoryInput.find('option').withAttribute('value',category))
+.click(addButton);
+};
+
+test('Shows 50% when one of two todos is done',asynct=>{
+// Arrange
+awaitaddTodoWithCategory(t,'Buy milk','personal');
+awaitaddTodoWithCategory(t,'Walk the dog','personal');
+
+// Act
+awaitt.click(items.nth(0).find('.toggle'));
+
+// Assert
+awaitt
+.expect(progressBar.getAttribute('aria-valuenow')).eql('50')
+.expect(progressLabel.innerText).contains('1 of 2 done');
+});
+
+test('Follows the chosen category',asynct=>{
+// Arrange
+awaitaddTodoWithCategory(t,'Write report','work');
+awaitaddTodoWithCategory(t,'Call mum','personal');
+
+// Act
+awaitt
+.click(filterPill('work'))
+.click(items.nth(0).find('.toggle'));
+
+// Assert
+awaitt
+.expect(progressBar.getAttribute('aria-valuenow')).eql('100')
+.expect(progressLabel.innerText).contains('1 of 1 done');
+});
@@ -0,0 +1,21 @@
+import{describe,it,expect}from'vitest';
+import{getProgress}from'../../src/features/progress';
+importtype{Todo}from'../../src/types';
+
+constmakeTodo=(id: number,completed: boolean): Todo=>({ id,text: `Todo ${id}`, completed });
+
+describe('getProgress',()=>{
+it('returns 0% when there are no todos',()=>{
+expect(getProgress([])).toEqual({done: 0,total: 0,percent: 0});
+});
+
+it('counts the done todos and rounds the percentage',()=>{
+consttodos=[makeTodo(1,true),makeTodo(2,false),makeTodo(3,false)];
+expect(getProgress(todos)).toEqual({done: 1,total: 3,percent: 33});
+});
+
+it('returns 100% when every todo is done',()=>{
+consttodos=[makeTodo(1,true),makeTodo(2,true)];
+expect(getProgress(todos).percent).toBe(100);
+});
+});