طراحی UI تایمر با دکمه‌های کنترل

مقدمه

به فصل دوازدهم و دومین پروژه عملی دوره خوش آمدید! در این فصل، ما یک کامپوننت تایمر (کرونومتر) خواهیم ساخت. این پروژه به ما کمک می‌کند تا با مدیریت stateهای عددی و کار با APIهای زمانی مرورگر (مانند setInterval) در داخل هوک useEffect به صورت عمیق‌تری آشنا شویم.

در این درس اول، ما بر روی ساخت رابط کاربری (UI) تایمر تمرکز خواهیم کرد. این UI شامل نمایشگر زمان و دکمه‌هایی برای شروع، توقف و ریست کردن تایمر خواهد بود.

ساختار کامپوننت Timer

بیایید با ساختار اولیه کامپوننت Timer شروع کنیم. ما به چند متغیر state برای نگهداری وضعیت تایمر نیاز خواهیم داشت: یکی برای اینکه آیا تایمر در حال اجراست (isActive) و دیگری برای زمان سپری شده (time).

JAVASCRIPT (React)

import React, { useState } from 'react';

const Timer = () => {
  const [isActive, setIsActive] = useState(false);
  const [time, setTime] = useState(0);

  return (
    <div className="timer-app">
      <div className="time-display">
        {time}s
      </div>
      <div className="buttons">
        <button>Start</button>
        <button>Stop</button>
        <button>Reset</button>
      </div>
    </div>
  );
};

export default Timer;

این کد ساختار JSX اولیه کامپوننت ما را تعریف می‌کند. ما دو متغیر state داریم: isActive که وضعیت فعال یا غیرفعال بودن تایمر را مشخص می‌کند و time که زمان سپری شده را بر حسب ثانیه نگه می‌دارد.

در حال حاضر، دکمه‌ها هیچ کاری انجام نمی‌دهند. در مراحل بعدی، ما به آنها منطق اضافه خواهیم کرد.

فرمت کردن نمایش زمان

نمایش زمان به صورت یک عدد خام (مانند 125 ثانیه) برای کاربر چندان خوانا نیست. بهتر است آن را به فرمت دقیقه و ثانیه (مانند 02:05) تبدیل کنیم. برای این کار، یک تابع کمکی می‌نویسیم.

JAVASCRIPT (React)

const formatTime = (timeInSeconds) => {
  const minutes = Math.floor(timeInSeconds / 60);
  const seconds = timeInSeconds % 60;
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
};

// Inside the Timer component's return:
<div className="time-display">
  {formatTime(time)}
</div>

این تابع کمکی، تعداد کل ثانیه‌ها را دریافت کرده و آن را به دقیقه و ثانیه تبدیل می‌کند. ما از متد padStart برای افزودن صفر به ابتدای اعداد تک رقمی استفاده می‌کنیم تا فرمت همیشه دو رقمی باشد.

در این درس، ما با تعریف stateهای لازم و ساختار JSX، رابط کاربری اولیه پروژه تایمر خود را طراحی کردیم. همچنین یاد گرفتیم که چگونه داده‌های خام (مانند ثانیه‌ها) را به یک فرمت خواناتر برای نمایش به کاربر تبدیل کنیم.

اکنون که UI ما آماده است، در درس بعدی به «مدیریت زمان با useEffect» خواهیم پرداخت و با استفاده از این ابزارها، منطق اصلی تایمر را پیاده‌سازی خواهیم کرد تا زمان به صورت خودکار شروع به شمارش کند.