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

• آشنایی با 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

جزئیات

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

ابتدا شما باید 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 در فایل ارسالی نباشد.