سلام دوست عزیز😃👋

به مسابقه «مسابقه Front-end گلرنگ» خوش آمدی!

لینک‌های مفید برای شرکت در مسابقه

هرگونه ارتباط با سایر شرکت‌کنندگان و یا استفاده از ابزارهای تولید کد، مثل chatGPT و... در مسابقات کوئرا ممنوع است و بعد از شناسایی از لیست شرکت‌کنندگان مسابقه حذف می‌شوید.

در طول مسابقه، می‌توانید سؤالات خود را از قسمت «سوال بپرسید» مطرح کنید.

موفق باشید 😉✌

بستن مودال


پروژه اولیه🔗

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

modal_starter.zip
├── eslint.config.js
├── index.html
├── package.json
├── package-lock.json
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── components
│   │   └── Modal.jsx
│   ├── index.css
│   └── main.jsx
└── vite.config.js
Plain text
راه‌اندازی

فایل دانلود شده را از حالت فشرده خارج و دستور npm install را در root پروژه اجرا کنید.

همچنین برای اجرای پروژه به صورت لوکال، می‌توانید از دستور npm run dev استفاده کنید.

ظاهر کلی برنامه به شکل زیر است:

خروجی

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

  • دکمه OPEN: با کلیک روی این دکمه باید مودال نمایش داده شود.
  • مودال: بعد از نمایش مودال باید با کلیک (mousedown) خارج از این <div>، مودال بسته شود.

توجه: با اضافه کردن یک <div> پس زمینه و حل مسئله از این راه، نمره به شما تعلق نمی‌گیرد! شما نیاز دارید واقعا بسنجید که کلیک خارج از این کامپوننت بوده یا خیر، و نسبت به آن لاجیک موردنظر رو اعمال کنید.

نکات🔗

  • استایل‌های این کامپوننت نوشته شده و شما فقط باید لاجیک آن را اعمال کنید.
  • از حذف یا ویرایش data-testid های داده شده خودداری کنید.
  • شما مجاز به نصب کتابخانه‌های خارجی از جمله npm نیستید.
  • شما فقط مجاز به اعمال تغییرات در Modal.jsx هستید.
  • می‌توانید فایل Modal.jsx را بعد از اعمال تغییرات به صورت مستقیم برای ما ارسال کنید.

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

فایل Modal.jsx نهایی را ذخیره کنید و به‌صورت تکی آپلود کنید. یا اگر قصد دارید به‌صورت فایل فشرده ارسال کنید، ساختار فایل باید به‌صورت زیر باشد:

[your-zip-file-name].zip
└── src
    └── components
        └── Modal.jsx
Plain text
ارسال پاسخ برای این سؤال
در حال حاضر شما دسترسی ندارید.