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

دو سوال آخر مسابقه مربوط به React هستند.

عکس تار


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

از شما می‌خواهیم تا این سرویس را روی عکسی که به شما داده می‌شود اجرا کنید.

پروژه اولیه🔗

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

blur-image
├── Result.svg
├── index.html
└── quera.svg
Plain text

جزئیات🔗

در صورتی که موس داخل عکس باشد باید دو ویژگی زیر به CSS مربوط به عکس که دارای id برابر با image است اضافه شوند.

filter: blur(8px);
-webkit-filter: blur(8px);
CSS

در غیر این صورت هم نباید چیزی اضافه شود.

نکات🔗

  • توجه کنید که داوری خودکار بر مبنای شناسه (id) عناصر انجام می‌شود. پس دقت کنید که عناصر شناسه‌ی صحیح داشته باشند.

  • فرض کنید سیستم به اینترنت متصل نیست، بنابراین از ارجاع به فایل‌های موجود در وب (CDN ها) خودداری کنید.

  • پروژه را با ساختار زیر ارسال کنید. یعنی باید در Zip ارسالی شما تنها فایل ‍‍index.html وجود داشته باشد.

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