info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-21 16:41:24 +02:00
Code Issues Releases Wiki Activity

fix: format user count (#6994)

Browse Source
This commit is contained in:
Arik Chakma
2024-09-05 03:18:07 +06:00
committed by GitHub
parent 1c3d86f085
commit 29fa5397f3
2 changed files with 24 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Projects/ProjectCard.tsx
View File

@@ -4,6 +4,7 @@ import type {
ProjectFileType, ProjectFileType,
} from '../../lib/project.ts'; } from '../../lib/project.ts';
import { Users } from 'lucide-react'; import { Users } from 'lucide-react';
import { formatCommaNumber } from '../../lib/number.ts';
type ProjectCardProps = { type ProjectCardProps = {
project: ProjectFileType; project: ProjectFileType;
@@ -39,7 +40,11 @@ export function ProjectCard(props: ProjectCardProps) {
</span> </span>
<span className="flex items-center gap-2 text-xs text-gray-400"> <span className="flex items-center gap-2 text-xs text-gray-400">
<Users className="inline-block size-3.5" /> <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> </span>
</a> </a>
); );

36
src/data/projects/task-tracker-js.md
View File

@@ -1,23 +1,23 @@
--- ---
title: 'Task Tracker' title: 'Task Tracker'
description: 'Create a task tracker with a to-do list using HTML, CSS, and JavaScript.' description: 'Create a task tracker with a to-do list using JavaScript.'
isNew: false isNew: false
sort: 22 sort: 22
difficulty: 'intermediate' difficulty: 'intermediate'
nature: 'JavaScript' nature: 'JavaScript'
skills: skills:
- 'HTML' - 'HTML'
- 'CSS' - 'CSS'
- 'JavaScript' - 'JavaScript'
- 'DOM Manipulation' - 'DOM Manipulation'
seo: seo:
title: 'Build a Task Tracker with JavaScript' 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.' description: 'Learn how to create a dynamic task tracker that allows users to add, complete, and delete tasks with real-time updates.'
keywords: keywords:
- 'task tracker' - 'task tracker'
- 'to-do list' - 'to-do list'
- 'javascript project' - 'javascript project'
roadmapIds: roadmapIds:
- 'frontend' - '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. 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. This project will help you practice array manipulation, event handling, and dynamic DOM updates using JavaScript.