امین تازه در دیجی‌کال‍ا جذب شده و از آن‌جایی که خیلی به چالش های فنی علاقه‌مند است، بابک و فرزاد تصمیم گرفته‌اند از او بخواهند راه‌حلی برای یک مشکل پیدا کند. به امین در یافتن راه‌حل کمک کنید.

جزئیات پروژه

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

purge-classnames
├── cypress
│   ├── fixtures
│   │   └── example.json
│   ├── integration
│   │   └── sample.spec.js
│   ├── plugins
│   │   └── index.js
│   └── support
│       ├── commands.js
│       └── index.js
├── cypress.json
├── index.html
├── package.json
├── script.js
└── styles.css

امین باید تابعی با نام purgeClassNames پیاده‌سازی کنه که تعداد آرگومان‌هاش متغیر است. مثال:

purgeClassNames('m-5', 'd-block', 'mr-5')
purgeClassNames('p-3', 'oy-12')

این تابع باید کلاس‌های مشابه را بر اساس اولویت حذف کند، یعنی کلاس‌هایی که زودتر به تابع پاس داده شده‌اند اولویت کمتری دارند. مثلاً خروجی مثال بالا باید به‌صورت زیر باشد:

purgeClassNames('m-5', 'd-block', 'm-12') === 'd-block m-12' // true

در مثال فوق، کلاس m-5 با کلاس m-12 جایگزین می‌شود، زیرا m-12 دیرتر آمده و اولویت بیشتری دارد. کلاس d-block بدون هیچ تغییری به خروجی منتقل می‌شود.

توضیح کلاس‌ها

کلاس margin

• کلاس m-n: مارجین از همه‌ی جهات به اندازه‌ی $n$
• کلاس ‌ml-n: مارجین از چپ -‌ کلاس mr-n: مارجین از راست -‌ کلاس mb-n: مارجین از پایین -‌ کلاس mt-n: مارجین از بالا -‌ کلاس my-n: مارجین از بالا و پایین -‌ کلاس mx-n: مارجین از چپ و راست

در توضیحات بالا، $n$ می‌تواند هر عددی باشد. مثال:

m-10 mr-999 mx-11

چند نمونه تست کیس برای کلاس margin:

ورودی ۱:

purgeClassNames('m-5', 'my-2')

خروجی ۱:

my-2 mx-5

کلاس m-5 می‌تواند به my-5 mx-5 تجزیه شود. بنابراین my-2 جایگزین my-5 شده و خروجی برابر با my-2 mx-5 خواهد بود.

ورودی ۲:

purgeClassNames('mx-3', 'mr-1')

خروجی ۲:

mr-1 ml-3

ورودی ۳:

purgeClassNames('m-3', 'mt-1')

خروجی ۳:

mt-1 mx-3 mb-3

نکته: m-n می‌تواند به mx-n و my-n تجزیه شود. کلاس mx-n نیز می‌تواند به mr-n و ml-n تجزیه شود. به همین ترتیب، کلاس my-n نیز شامل mt-n و mb-n می‌شود. در این مثال‌ها، $n$ هر عددی می‌تواند باشد.

کلاس padding

قواعد کلاس margin برای این کلاس هم وجود دارند. مثال:

pr-6 یا p-5 یا py-3 و...

کلاس display

ساختار کلاس به صورت d-OPTION است که OPTION می‌تواند یکی از مقادیر زیر باشد:

• flex
• inline
• inline-flex
• block
• inline-block

مثال:

d-block d-inline d-flex

یک نمونه تست کیس برای کلاس display:

ورودی:

purgeClassNames('d-block', 'd-flex')

خروجی:

d-flex

کلاس overflow

ساختار کلاس overflow به‌صورت زیر است:

• overflow-OPTION در تمامی جهات
• overflow-y-OPTION درجهت محور y
• overflow-x-OPTION در جهت محور x

در مثال‌های بالا، OPTION می‌تواند یکی از مقادیر زیر باشد:

• hidden
• visible
• scroll
• auto
• none

چند نمونه تست کیس برای کلاس overflow:

ورودی ۱:

purgeClassNames('overflow-auto', 'overflow-x-none')

خروجی ۱:

overflow-x-none overflow-y-auto

ورودی ۲:

purgeClassNames('overflow-x-auto', 'overflow-y-auto')

خروجی ۲:

overflow-auto

ورودی ۳:

purgeClassNames('overflow-x-visible', 'overflow-none')

خروجی ۳:

overflow-none

نکته: کلاس overflow-OPTION می‌تواند به کلاس‌های overflow-x-OPTION و overflow-y-OPTION تجزیه شود.

نقطه شکست‌ها (Breakpoints)

نقطه شکست‌ها اندازه های تعریف شده‌ای هستند که به ما این امکان را می‌دهند تا یک کلاس را فقط در یک اندازه‌ی مشخص اعمال کنیم.

هر کلاس می‌تواند فقط در یک breakpoint خاص فعال باشد، برای مثال: lg:mr-2 فقط در breakpoint lg فعال است. تمامی کلاس هایی که بالا معرفی شدند باید قابلیت استفاده با breakpoints را داشته باشند.

لیست نقطه شکست های موجود:

• xs
• sm
• md
• lg

چند نمونه تست کیس برای breakpoints:

ورودی ۱:

purgeClassNames('m-5', 'lg:m-2')

خروجی ۱:

m-5 lg:m-2

همان‌طور که مشاهده می‌کنید، کلاس‌هایی که دارای breakpoint هستند، بر روی کلاس های معمولی اثری ندارند.

ورودی ۲:

purgeClassNames('sm:m-5', 'lg:m-2')

خروجی ۲:

sm:m-5 lg:m-2

همان‌طور که مشاهده می‌کنید، breakpoint های متفاوت نیز بر روی یکدیگر تاثیر ندارند.

نکات

• ترتیب کلاس های خروجی داده شده توسط تابع purgeClassNames اهمیتی ندارد.
• خروجی تابع purgeClassNames باید یک رشته شامل کلاس‌ها باشد که با استفاده از فاصله (space) از هم جدا شده‌اند.
• تضمین می‌شود که فقط و فقط یک کلاس به ازای هر آرگومان به تابع داده خواهد شد.
• دقت کنید که تعداد آرگومان های تابع متغیر خواهد بود.
• حداقل یک آرگومان به تابع پاس داده خواهد شد.
• اگر کلاسی به purgeClassNames داده شود که در لیست کلاس‌های بالا تعریف نشده بود، شما باید آن کلاس را بدون تغییر و به صورت مستقیم به خروجی ارسال کنید.
• شما تنها مجاز به اعمال تغییرات در فایل script.js هستید.

آن‌چه باید آپلود کنید

پس از پیاده‌سازی موارد خواسته‌شده، فایل script.js را آپلود کنید.