دست‌گرمی


یکی از همکاران شما در شرکت قصد دارد با HTML و CSS طرح زیر را اجرا کند:

پروفایل کاربر

او کد index.html زیر را نوشته است و برای نوشتن CSS از شما کمک خواسته است.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Milad Rezaei</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
    <div id="card">
        <h1 id="user-name">
            Milad Rezaei
        </h1>
        <p id="user-role">
            Web Developer at Quera
        </p>
    </div>
</body>
</html>
HTML

با توضیحات زیر این کار را برای او انجام دهید:

رنگ پس‌زمینه (body) باید #F0F0F0 باشد.

عنصر #card باید همواره دقیقاً در مرکز صفحه (viewport) باشد (حتی با تغییر اندازه صفحه). رنگ پس‌زمینه آن سفید باشد. حاشیه آن ۱ پیکسل و به رنگ #DDD باشد و عرض آن (با احتساب حاشیه) ۲۹۰ پیکسل باشد.

متن‌های #user-name و #user-role باید وسط‌چین (text-align: center) باشند. اندازه اولی ۳۲ پیکسل و اندازه دومی ۱۶ پیکسل باشد. رنگ #user-role باید #777 باشد.

نکات🔗

  • کد CSS را در فایل style.css بنویسید و آن را در کنار index.html قرار دهید و به صورت Zip فشرده کنید و ارسال کنید. دقت کنید که این ۲ فایل باید در ریشه فایل Zip باشند (در هیچ پوشه‌ای نباشند).
  • اجازه تغییر کد HTML را دارید ولی id های عناصر موجود را تغییر ندهید. زیرا id ها در داوری خودکار استفاده خواهند شد.

مارک‌دان


از شما خواسته شده تا یک ویرایشگر ساده Markdown مبتنی بر وب (با استفاده از HTML/CSS/JS) بنویسید. به عنوان نمونه، ویرایشگرهای آنلاین زیر را ببینید. اگر با Markdown آشنا نیستید، ابتدا در مورد آن جستجو و مطالعه کنید.

ویرایشگر شما باید ۲ بخش اصلی داشته باشد:

  1. بخش input: این بخش یک textarea برای نوشتن متن مارک‌دان است. id این بخش را md-input قرار دهید.
  2. بخش preview: این بخش یک div برای render و نمایش HTML متن مارک‌دان است. id این بخش را md-preview قرار دهید.

می‌خواهیم به محض تغییر متن بخش input، این متن render شود و HTML آن در بخش preview نمایش داده شود.

همچنین این ویرایشگر باید ۳ حالت نمایش داشته باشد که با میانبر ctrl+m بین این حالت‌ها به ترتیب زیر جابجا شود:

۱. حالت split: در این حالت بخش input در سمت چپ و بخش preview در سمت راست نمایش داده می‌شود. عرض هر بخش باید نصف عرض viewport باشد و ارتفاع هر دو بخش باید دقیقاً به اندازه ارتفاع viewport باشد. مانند تصویر زیر.

توضیح تصویر

این حالت، حالت پیش‌فرض است و هربار هنگام لود شدن صفحه باید در این حالت قرار داشته باشیم.

۲. حالت edit: در این حالت تنها بخش input دیده می‌شود و بخش preview مخفی است (display: none). اندازه بخش input باید دقیقاً به اندازه viewport باشد.

توضیح تصویر

۳. حالت preview: در این حالت تنها بخش preview دیده می‌شود و بخش input مخفی است (display: none). اندازه بخش preview باید دقیقاً به اندازه viewport باشد.

توضیح تصویر

نکات🔗

  1. توصیه می‌کنیم برای رندر متن مارک‌دان از کتابخانه‌های JS آماده استفاده کنید.
  2. با توجه به این که تست به صورت خودکار انجام می‌شود، دقت کنید که textarea و div، در حالت‌های مختلف، مختصات و اندازه درستی داشته باشند. مثلاً در حالت split، مختصات گوشه textarea، دقیقاً (0, 0) باشد، عرض آن دقیقاً نصف عرض viewport باشد و ارتفاع آن دقیقاً برابر با ارتفاع viewport باشد. و یا در حالت edit، مختصات گوشه textarea دقیقاً (0, 0) باشد، عرض آن دقیقاً برابر با عرض viewport باشد و ارتفاع آن دقیقاً برابر با ارتفاع viewport باشد. عرض و ارتفاع با در نظر گرفتن border و padding محاسبه می‌شود.
  3. فایل HTML اصلی باید index.html و در ریشه فایل Zip باشد (در هیچ پوشه‌ای نباشد). می‌توانید تعدادی فایل js و css در پوشه‌ای به نام static در کنار آن قرار دهید و استفاده کنید.

کتابخانه پویا


شرکتی که شما در آن کار می‌کنید پروژه‌ای مبتنی بر وب را برای یک کتابخانه آغاز کرده است و مقداری از کدهای سمت client را نوشته است. از شما خواسته شده تا این بخش را تکمیل کنید.

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

برای اجرا، به جای باز کردن مستقیم index.html با مرورگر، حتماً پوشه اصلی پروژه را به وسیله یک وب‌سرور سرو کنید. یک راه ساده برای این کار استفاده از وب‌سرور پایتون است.

با پایتون ۲:

cd bookstore
python -m SimpleHTTPServer 8000
Plain text

با پایتون ۳:

cd bookstore
python -m http.server 8000
Plain text

با این دستورات، پوشه پروژه بر روی پورت ۸۰۰۰ سرو می‌شود. با مراجعه به آدرس localhost:8000 پروژه را مشاهده کنید و صفحات مختلف آن را ببینید.

همان‌طور که می‌بینید ۳ صفحه وجود دارد:

  1. صفحه اصلی که لیست کلیه کتاب‌ها در آن قرار دارد، با آدرس http://localhost:8000/#.
  2. صفحه مشخصات یک کتاب، با آدرس http://localhost:8000/#book/BOOK_ID.
  3. صفحه لیست کتاب‌های یک ژانر، با آدرس http://localhost:8000/#genre/GENRE_NAME.

اما مشکلی که وجود دارد این است که محتوای تمام این صفحات static است. از شما خواسته شده تا پروژه را طوری تغییر دهید که محتوای صفحات با درخواست ajax از localhost:8000/api دریافت شود.

ابتدا کدهای پروژه را بخوانید و با نحوه کار پروژه آشنا شوید. همان‌طور که می‌بینید از کتابخانه‌های Hogan.js و Navigo استفاده شده است. با باز کردن فایل main.js مشاهده می‌کنید که ۴ کار از شما به صورت TODO خواسته شده است. این ۴ کار را انجام دهید. سپس پروژه تکمیل‌شده را به صورت Zip فشرده کنید و به عنوان پاسخ آپلود کنید.

توضیحات API🔗

نمونه‌هایی از پاسخ سرور API در پوشه api قرار داده شده است. نگاهی به فایل‌های این پوشه بیندارید. با توجه به این که پروژه را با وب‌سرور سرو کرده‌اید، با فایل‌های این پوشه، API شبیه‌سازی شده است و می‌توانید با jQuery.get یا توابع مشابه، به آدرس‌های زیر درخواست ajax بفرستید و پاسخ آن را دریافت کنید:

/api/get_all_books
/api/get_book/BOOK_ID
/api/get_genre_books/GENRE_NAME
Plain text

برای آشنایی با ساختار JSON دریافتی از سرور نیز فایل‌های موجود در پوشه api را ببینید.

همچنین توجه کنید که وب‌سرور، نوع پاسخی که ارسال می‌کند را json تعیین نمی‌کند. بنابراین هنگام صدا زدن jQuery.get، نوع پاسخ موردانتظار (dataType) را json تعیین کنید. و یا این که خودتان متن JSON دریافتی را parse کنید.

نکته🔗

دقت کنید که پروژه را به گونه‌ای Zip کنید که فایل index.html و پوشه‌های static و templates در ریشه فایل Zip قرار داشته باشند (داخل پوشه دیگری نباشند).