تبدیل واحد


مهارت‌های لازم:

  • آشنایی با React و استفاده از استیت

ظاهر کلی برنامه بدین صورت است:

ظاهر برنامه

پروژه اولیه🔗

پروژه اولیه را از این لینک دانلود کنید.

ساختار پروژه
unit-converter
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── __tests__
│   │   └── sample.test.js
│   ├── assets
│   │   ├── css
│   │   │   └── index.css
│   │   └── images
│   │       └── cover.png
│   ├── components
│   │   ├── App.js
│   │   ├── Input.js
│   │   └── Select.js
│   ├── index.js
│   └── units.js
├── package-lock.json
└── package.json
Plain text
راه‌اندازی پروژه

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

  • ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
  • در پوشه‌ی unit-converter ، دستور npm install را برای نصب نیازمندی‌ها اجرا کنید.
  • در همین پوشه، دستور npm start را برای راه‌اندازی پروژه اجرا کنید.
  • پس از انجام موفق این مراحل، با مراجعه به آدرس http://localhost:3000/ می‌توانید نتیجه را ببینید.

جزئیات🔗

در این سوال میخواهیم یک برنامه تبدیل واحد بسازیم.

ابتدا شما باید input و select‌هایی که این برنامه نیاز دارد را با استفاده از کامپوننت‌های Input و Select در جای مناسب که کامنت شده است، با label (به عنوان property) مناسب استفاده کنید. به items کامپوننت Select باید لیست واحد‌ها را بدهید. مقدار factor برای واحدی که تبدیل از آن‌ انجام میشود (From) و واحدی که تبدیل به آن انجام میشود (To) را میتوانید با استفاده از onChange که یک property در کامپوننت Select است بدست آورید و برای محاسبه نتیجه از آن‌ها استفاده کنید. مقدار را هم میتوانید با استفاده از onChange روی کامپوننت Input بدست آورید. هرگاه دکمه Convert کلیک شد، باید تبدیل خواسته انجام و نتیجه نمایش داده شود.

توجه: برای محاسبه result باید مقدار را در factor واحدی که تبدیل از آن انجام میشود ضرب کنید و بر factor واحدی که به تبدیل به آن انجام میشود، تقسیم کنید.

توجه: به اعشاری بودن اعداد دقت کنید.

توجه: فرض کنیم کاربر مقداری به غیر از عدد وارد نمیکند.

نکات🔗

  • شما تنها مجاز به اعمال تغییرات در فایل src/components/App.js هستید.
  • برای ارسال پاسخ میتوانید فقط فایل App.js را بدون zip کردن ارسال کنید یا کل پروژه را zip کرده و ارسال کنید. دقت کنید که پوشه‌ی node_modules در فایل ارسالی نباشد.