ساعت
۹۰۱۲۳۴۵۶۷۸۹۰۹۰۱۲۳۴۵۶۷۸۹۰
ساعت
دقیقه
۹۰۱۲۳۴۵۶۷۸۹۰۹۰۱۲۳۴۵۶۷۸۹۰
دقیقه
ثانیه
۹۰۱۲۳۴۵۶۷۸۹۰۹۰۱۲۳۴۵۶۷۸۹۰
ثانیه

در این سؤال قرار است که یک زمان‌سنج ساده با React طراحی کنید. به این صورت که از لحظه load شدن زمان شروع به افزایش کند و با فشردن دکمه‌ی Reset Timer این زمان مجدداً صفر شود.

زمان‌سنج ساده

پروژه اولیه

پروژه اولیه را از اینجا دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است.

simple-timer
├── public
│   ├── favicon.png
│   └── index.html
├── src
│   ├── Timer.css
│   ├── Timer.js
│   └── index.js
├── package.json
└── pnpm-lock.yaml
Plain text

راه‌اندازی پروژه

برای اجرای پروژه، باید NodeJS و npm (یا pnpm) را از قبل نصب کرده باشید.

  • در پوشه‌ی simple-timer ، دستور npm install را برای نصب نیازمندی‌ها اجرا کنید.
    • نکته: برای نصب سریع‌تر از pnpm install استفاده کنید.
  • در همین پوشه، دستور npm start را برای راه‌اندازی پروژه اجرا کنید.
  • با مراجعه به http://localhost:3000/ می‌توانید نتیجه را ببینید.

جزئیات

شما باید مؤلفه‌ی Timer را به صورت زیر تکمیل کنید:

  • مؤلفه پس از load شدن، ابتدا عدد صفر را نمایش دهد و شروع به شمردن کند (هر یک ثانیه).
  • پس از هربار فشردن دکمه‌ی Reset Timer زمان مجدداً از صفر آغاز شود.
    • توجه کنید که پس از آغاز مجدد زمان‌سنج، شمارش از ثانیه‌ی صفر تا یک باید دقیقاً ۱ ثانیه طول بکشد.
  • هنگام حذف مؤلفه (Unmount) باید زمان‌بندی ایجاد شده را پاک کنید (clearInterval).

نکات

  • زمان باید در عنصر با کلاس timer نمایش داده شود (نام کلاس در داوری تاثیر دارد).
  • در این سؤال کد شما نباید به ساعت سیستم وابسته باشد (مثلاً نباید از Date استفاده کنید). عدد زمان‌سنج نباید با تغییر ساعت به هم بریزد.
  • پس از پیاده‌سازی، فایل Timer.js را ارسال کنید.

ارسال پاسخ برای این سؤال
فایلی انتخاب نشده است.