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

پروژه اولیه

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

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

transfer-list
├── cypress
│   ├── fixtures
│   │   └── example.json
│   ├── integration
│   │   └── sample.spec.js
│   ├── plugins
│   │   └── index.js
│   └── support
│       ├── commands.js
│       └── index.js
├── cypress.json
├── index.html
├── main.js
├── package-lock.json
├── package.json
└── style.css
```

جزئیات

در این سوال 2 لیست وجود دارد با کلاس های left-side و right-side و با کلاس مشترک side که داخل هر لیست آیتم هایی به همراه چک باکس وجود دارد ، علاوه بر لیست ها 4 دکمه وجود دارد برای جا به جایی آیتم های داخل لیست ها ، این سوال 4 هدف را دنبال میکند

• هدف اول : در صورت کلیک کردن بر روی دکمه ای با کلاس all-to-right همه ی آیتم های ستون سمت چپ باید به ستون سمت راست منتقل شوند و دکمه هایی با کلاس های all-to-right و checked-to-right باید کلاس disabled را بگیرند و کلاس disabled تا زمانی باید جزء کلاس های این دکمه ها باشد که لیست سمت چپ خالی است و آیتمی برای انتقال به لیست سمت راست وجود نداشته باشد

• هدف دوم: در صورت کلیک کردن بر روی دکمه ای با کلاس all-to-left همه ی آیتم های ستون سمت راست باید به ستون سمت چپ منتقل شوند و دکمه هایی با کلاس های all-to-left و check-to-left باید کلاس disabled را بگیرند و کلاس disabled تا زمانی باید جزء کلاس های این دکمه ها باشد که لیست سمت راست خالی است و آیتمی برای انتقال به لیست سمت چپ وجود نداشته باشد

• هدف سوم: در صورت کلیک شدن دکمه ای با کلاس checked-to-left همه ی آیتم های ستون سمت راست که چک شده اند باید به ستون سمت چپ منتقل شوند و در صورت خالی شدن لیست سمت راست دکمه های انتقال دهنده از لیست سمت راست به لیست سمت چپ باید کلاس disabled بگیرند تا زمانی که لیست سمت راست خالی باشد

• هدف چهارم: در صورت کلیک شدن دکمه ای با کلاس checked-to-right همه ی آیتم های ستون سمت چپ که چک شده اند باید به ستون سمت راست منتقل شوند و در صورت خالی شدن لیست سمت چپ دکمه های انتقال دهنده از لیست سمت چپ به لیست سمت راست باید کلاس disabled بگیرند تا زمانی که لیست سمت چپ خالی باشد

نکات

در فایل پروژه اولیه شما دو آرایه دارید به نام های leftList و rightList که مقادیر داخل این ارایه توسط تابع renderDom تبدیل به آیتم هایی میشود که در لیست ها به شما نمایش داده شده دقت شود که شما در این سوال باید با تابع renderDom کار کنید و تغییری در ساختار المان هایی که به کمک این تابع ساخته شده اند ایجاد نکنید

شما تنها مجاز به اعمال تغییرات در فایل main.js هستید.