From e3143cf68bab97f6574607845f8514db9cac3c7b Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Thu, 5 Sep 2024 00:31:51 +0600
Subject: [PATCH] fix: format user count

---
 src/components/Projects/ProjectCard.tsx |  7 ++++-
 src/data/projects/task-tracker-js.md    | 36 ++++++++++++-------------
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/components/Projects/ProjectCard.tsx b/src/components/Projects/ProjectCard.tsx
index 7d6b9d8ed..efa0ac210 100644
--- a/src/components/Projects/ProjectCard.tsx
+++ b/src/components/Projects/ProjectCard.tsx
@@ -4,6 +4,7 @@ import type {
   ProjectFileType,
 } from '../../lib/project.ts';
 import { Users } from 'lucide-react';
+import { formatCommaNumber } from '../../lib/number.ts';
 
 type ProjectCardProps = {
   project: ProjectFileType;
@@ -39,7 +40,11 @@ export function ProjectCard(props: ProjectCardProps) {
       </span>
       <span className="flex items-center gap-2 text-xs text-gray-400">
         <Users className="inline-block size-3.5" />
-        {userCount > 0 ? <>{userCount} Started</> : <>Be the first to solve!</>}
+        {userCount > 0 ? (
+          <>{formatCommaNumber(userCount)} Started</>
+        ) : (
+          <>Be the first to solve!</>
+        )}
       </span>
     </a>
   );
diff --git a/src/data/projects/task-tracker-js.md b/src/data/projects/task-tracker-js.md
index d4e2d87dd..213ab1869 100644
--- a/src/data/projects/task-tracker-js.md
+++ b/src/data/projects/task-tracker-js.md
@@ -1,23 +1,23 @@
 ---
-title: 'Task Tracker'  
-description: 'Create a task tracker with a to-do list using HTML, CSS, and JavaScript.'  
-isNew: false  
-sort: 22  
-difficulty: 'intermediate'  
-nature: 'JavaScript'  
-skills:  
-  - 'HTML'  
-  - 'CSS'  
-  - 'JavaScript'  
-  - 'DOM Manipulation'  
-seo:  
-  title: 'Build a Task Tracker with JavaScript'  
-  description: 'Learn how to create a dynamic task tracker that allows users to add, complete, and delete tasks with real-time updates.'  
-  keywords:  
+title: 'Task Tracker'
+description: 'Create a task tracker with a to-do list using JavaScript.'
+isNew: false
+sort: 22
+difficulty: 'intermediate'
+nature: 'JavaScript'
+skills:
+  - 'HTML'
+  - 'CSS'
+  - 'JavaScript'
+  - 'DOM Manipulation'
+seo:
+  title: 'Build a Task Tracker with JavaScript'
+  description: 'Learn how to create a dynamic task tracker that allows users to add, complete, and delete tasks with real-time updates.'
+  keywords:
     - 'task tracker'
     - 'to-do list'
-    - 'javascript project'  
-roadmapIds:  
+    - 'javascript project'
+roadmapIds:
   - 'frontend'
 ---
 
@@ -31,4 +31,4 @@ Here is the mockup of the task tracker:
 
 Store your tasks in an array of objects, where each object represents a task with properties like description and status (completed or not). Whenever a new task is added, updated, deleted, or marked as complete/uncomplete, update the tasks array. Write a function `renderTasks` which will remove all tasks from the DOM and re-render them based on the updated tasks array.
 
-This project will help you practice array manipulation, event handling, and dynamic DOM updates using JavaScript.
\ No newline at end of file
+This project will help you practice array manipulation, event handling, and dynamic DOM updates using JavaScript.