سعید که به تازگی Javascript را یاد گرفته، به هیچ وجه قبول نمی‌کند که با CSS خالی هم می‌توان یک Tab ساخت.

یک مینی‌پروژه آماده کردیم تا با اضافه کردن یک سری استایل‌ها به آن، به سعید ثابت کنیم که با CSS خالی هم می‌توان کارهای خفنی کرد.

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

پروژه اولیه🔗

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

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

QueraCamps-question
├── assets
│   └── quera logo.svg
├── index.html
└── style.css

جزئیات🔗

در فایل استایل، اولین المانی که باید تغییر دهید، تگ ul و a هستند. به صورت پیش‌فرض، تگ‌های HTML دارای استایل‌های خاصی هستند که در اکثر مواقع نیاز داریم آنها را تغییر دهیم.

در ادامه کلاس‌های .navbar، .navbar--links را باید طوری تغییر دهید که مقادیری که در drop downهای زیر به شما نشان داده‌ایم را به خود بگیرند.

استایل‌های مد نظر برای کلاس‌ها و تگ‌ها🔗

نکات🔗

• شما تنها مجاز به اعمال تغییرات در فایل style.css هستید.
• فایل ارسالی شما هم باید style.css باشد.

پروژه اولیه🔗

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

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

removeDuplicate
├── src
│   └── index.js
├── jest.config.js
├── package-lock.json
└── package.json

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

از طرف مدیر بوت‌کمپ، تسکی به شما داده شده تا با پیاده‌سازی تابع removeDuplicateStudents، کدآموزهای تکراری را پیدا کنید و فقط یک نسخه از داده‌های مربوط به هر کاربر را حفظ و بقیه را حذف کنید.

برای پیاده‌سازی تابع removeDuplicateStudents لازم است به این موارد دقت کنید:

1. این تابع به عنوان ورودی، یک آرایه دریافت می‌کند. عناصر این آرایه، آبجکت‌هایی هستند که هر کدام از آن‌ها مربوط به اطلاعات یک کدآموز است.

2. هر آبجکت مربوط به اطلاعات یک کدآموز دارای پراپرتی‌های زیر است:

   1. level
   2. grade*
   3. name*
   4. lastName*
   5. birthDate*
   6. nationality
   7. email

3. از ترکیب مقدار پراپرتی‌های grade، name، lastNam، birthDate می‌توان برای مشخص کردن و تفکیک کدآموز‌ها استفاده کرد. به عبارت دیگر نباید هیچ دو کدآموزی با مقادیر برابر این ویژگی‌ها وجود داشته باشند و ترکیب این مقادیر برای هر کدآموز منحصربفرد هستند.

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

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

6. همه‌ی عناصر آرایه خروجی باید دارای یک پراپرتی اضافه با کلید id باشند، مقدار id از ترکیب مقدار پراپرتی‌های grade، name، lastNam، birthDate به ترتیب از راست به چپ به دست می‌آید.

مثال🔗

در مثال زیر سه نسخه از اطلاعات کاربری به اسم Jone doe وجود دارد. از آنجا که تمامی چهار ویژگی grade، name، lastNam، birthDate در این سه شیء برابر هستند، نتیجه می‌گیریم اطلاعات این کاربر سه بار و به صورت تکراری ذخیره شده است.

برای تشخیص نسخه معتبر، ابتدا ویژگی level را بررسی می‌کنیم و آبجکتی که مقدار level بیشتری دارد را نگه داشته و بقیه را حذف می‌کنیم.

در ادامه دو آبجکت که مقدار پراپرتی level در هردوی آن‌ها برابر ۳ است را بر اساس جایگاهشان در آرایه مقایسه کرده و آبجکتی که index کوچکتری دارد را نگه داشته و بقیه نسخه‌ها را حذف می کنیم.

نباید فراموش کنیم که در آرایه خروجی، تمامی عناصر آرایه دارای پراپرتی id هستند. مقدار id از ترکیب مقادیر پراپرتی‌های grade، name، lastNam، birthDate به ترتیب حاصل می‌شود.

ورودی🔗

const studentsArray = [
  { 
    level: 2, 
    grade: 10, 
    name: "John", 
    lastName: "Doe", 
    birthDate: "2002-05-20", 
    nationality: "American", 
    email: "john.doe@example.com" 
  },
  { 
    level: 3, 
    grade: 10, 
    name: "John", 
    lastName: "Doe", 
    birthDate: "2002-05-20", 
    nationality: "American", 
    email: "john.doe@example.com" 
  },
  { 
    level: 3, 
    grade: 10, 
    name: "John", 
    lastName: "Doe", 
    birthDate: "2002-05-20", 
    nationality: "Iran", 
    email: "john.doe@example.com" 
  },
  { 
    level: 3, 
    grade: 10, 
    name: "Saimon", 
    lastName: "Jonse", 
    birthDate: "2002-06-20", 
    nationality: "Italy", 
    email: "Saimon.Jonse@example.com" 
  },
];

خروجی🔗

const studentsArray = [
  { 
    level: 3, 
    grade: 10, 
    name: "John", 
    lastName: "Doe", 
    birthDate: "2002-05-20", 
    nationality: "American", 
    email: "john.doe@example.com",
    id: "10JohnDoe2002-05-20" 
  },
  { 
    level: 3, 
    grade: 10, 
    name: "Saimon", 
    lastName: "Jonse", 
    birthDate: "2002-06-20", 
    nationality: "Italy", 
    email: "Saimon.Jonse@example.com",
    id: "10SaimonJonse2002-06-20" 
  },
];

جزئیات🔗

1. تابع removeDuplicate آرایه‌ای از اطلاعات کدآموز‌ها را به عنوان ورودی دریافت می‌کند.
2. خروجی تابع removeDuplicate آرایه‌ای از اطلاعات کدآموز‌هاست که نسخه‌های تکراری اطلاعات در آن حذف شده و هر کدام از عناصر آن دارای پراپرتی id باشد.
3. شما تنها مجاز به تغییر فایل index.js هستید.
4. فایل ارسالی شما باید index.js باشد.

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

پروژه اولیه🔗

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

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

LoginAndTry
├── src
│   └── login.js
│   └── main.js
├── package.json

جزئیات🔗

اطلاعاتی که در نهایت خواهیم داشت به شکل زیر است:

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

در این سوال تابع login به شما داده شده است و تنها نیاز است تا تابع loginAndTry را پیاده‌سازی کنید. در ادامه توضیحاتی درباره هر کدام از توابع آورده شده است.

مثال🔗

تابع loginAndTry را به شکل زیر فراخوانی می‌کنیم.

loginAndTry("myUsername", 5)

با استفاده از فراخوانی تابع login داخل تابع loginAndTry تعدادی درخواست ورود (حداکثر ۵ درخواست) ارسال می‌کنیم، دو درخواست اول ناموفق است که به ترتیب ۱۱۲ و ۷۲ میلی‌ثانیه زمان برده است. ولی درخواست سوم موفقیت‌آمیز خواهد بود و زمان پاسخ از سمت سرور ۳۵ میلی‌ثانیه است. پس خروجی نهایی تابع به شکل زیر خواهد بود:

{try: 3, status: true, timeSpent: 219}

نکات🔗

1. تابع loginAndTry دو مقدار به عنوان ورودی می‌گیرد. مقدار اول یک رشته که نام کاربری خواهد بود و مقدار دوم یک عدد که حداکثر تعداد درخواست ورود به سرور است.
2. خروجی تابع loginAndTry باید یک آبکجت باشد با مقادیر try, status و timeSpent که به ترتیب شماره درخواست موفق، وضعیت نهایی و مجموع مدت زمان درخواست‌ها است.
3. برای ارسال درخواست از تابع login استفاده کنید. ورودی این تابع یک رشته خواهد بود که نام‌کاربری است.
4. بلافاصله بعد از دریافت اولین درخواست ورود موفق، باید مقادیر خواسته شده در خروجی نمایش داده شود.
5. در صورتی که هیچ‌یک از درخواست‌ها موفقیت‌آمیز نبود، مقدار status در خروجی نهایی برابر false خواهد بود.
6. شما تنها مجاز به اعمال تغییرات در فایل main.js هستید و فایل ارسالی شما هم باید main.js باشد.

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

پروژه اولیه🔗

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

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

auto-jump
├── index.html
├── main.js
└── styles.css

جزئیات🔗

در این سوال می‌خواهیم وقتی کاربر شماره کارت خود را وارد یا حذف کرد، به طور خودکار به input بعدی یا قبلی برود.

در این برنامه ما شاهد چهار input هستیم که هر کدام از آن‌ها، نماینده چهار رقم از شماره کارت هستند. هر کدام از از آن‌ها با data-order در HTML مشخص شده‌اند.

شما باید با از استفاده از JS*، برنامه‌ای بنویسید که وقتی کاربر چهار رقم را وارد *input کرد، به طور خودکار وارد input بعدی شود یا وقتی رقم‌ها را حذف کرد و input خالی شد، به input قبلی برود.

همچنین اگر کاربر خودش از input اول به input سوم برود، باید چینش و ترتیب حفظ شود و از همان input سوم، تایپ کردن ادامه پیدا کند و به input اول نرود.

نکات🔗

• فرض می‌شود کاربر فقط عدد وارد می‌کند و طول هر input نیز توسط max-length در HTML مشخص شده است. پس نیازی نیست اعتبارسنجی این که کاربر به جای عدد، حروف وارد کند یا این که در هر input، چند رقم وارد کند توسط شما انجام شود.
• برای حل این سوال می‌توانید از keyboard events و متود focus کمک بگیرید.
• شما تنها مجاز به اعمال تغییرات در فایل main.js هستید و فایل ارسالی شما هم باید main.js باشد.

یکی از چالش‌هایی که کتابخانه‌ها و فریم‌ورک‌های جاوااسکریپت سعی در حل آن دارند، مسئله ی Routing است. ما سعی داریم در این سوال، یک برنامه را به همراه Routeهای مرتبط به هر لینک پیاده‌سازی کنیم.

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

پروژه اولیه🔗

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

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

Routing-question
├── images
│   └── quera-logo.svg
├── main.js
├── index.html
└── styles.css

راه‌اندازی پروژه🔗

برای اجرای این پروژه از اکستنشن live server در vs code استفاده کنید.

جزئیات🔗

در فایل index.html چند تگ a را مشاهده می‌کنیم که با کلاس navlink مشخص شده‌اند. یکی از این تگ‌ها logo است و سه تای بعدی بوت‌کمپ ، کالج و جونیورا هستند. این برنامه باید طوری پیاده‌سازی شود که با کلیک شدن بر روی این تگ‌ها:

• خانه (لوگو کوئرا) : /
• بوت‌کمپ: /bootcamp
• کالج: /college
• جونیورا: /juniora

به Routeهایی که مشاهده کردید هدایت شود.

در هر Route، محتوای خواسته شده مربوط به همان Route، باید در یک تگ <h1> نمایش داده شود.

همانطور که گفته شد هر محتوا بر اساس Route آن در یک تگ <h1> نمایش داده شود.

توجه کنید که:🔗

• قابلیت رفتن به صفحه‌ی قبل و بعد در مرورگر باید وجود داشته باشد.
• دکمه‌های a .navlink نباید صفحه را refresh کنند.

نکات🔗

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