یکی از همکاران شما در شرکت قصد دارد با HTML و CSS طرح زیر را اجرا کند:
او کد `index.html` زیر را نوشته است و برای نوشتن CSS از شما کمک خواسته است.
```html
<!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>
```
**با توضیحات زیر این کار را برای او انجام دهید:**
رنگ پس‌زمینه (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 آشنا نیستید، ابتدا در مورد آن جستجو و مطالعه کنید.
- http://markdownlivepreview.com/
- https://stackedit.io/editor
ویرایشگر شما باید ۲ بخش اصلی داشته باشد:
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 را نوشته است. از شما خواسته شده تا این بخش را تکمیل کنید.
پروژه را از [اینجا](http://bayanbox.ir/download/9208364532547487174/bookstore.zip) دانلود کنید و از حالت فشرده خارج کنید.
برای اجرا، به جای باز کردن مستقیم `index.html` با مرورگر، حتماً پوشه اصلی پروژه را به وسیله یک وب‌سرور سرو کنید. یک راه ساده برای این کار استفاده از وب‌سرور پایتون است.
با پایتون ۲:
```
cd bookstore
python -m SimpleHTTPServer 8000
```
با پایتون ۳:
```
cd bookstore
python -m http.server 8000
```
با این دستورات، پوشه پروژه بر روی پورت ۸۰۰۰ سرو می‌شود. با مراجعه به آدرس `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](http://twitter.github.io/hogan.js/) و [Navigo](https://github.com/krasimir/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
```
برای آشنایی با ساختار JSON دریافتی از سرور نیز فایل‌های موجود در پوشه `api` را ببینید.
همچنین توجه کنید که وب‌سرور، نوع پاسخی که ارسال می‌کند را json تعیین نمی‌کند. بنابراین هنگام صدا زدن jQuery.get، نوع پاسخ موردانتظار (dataType) را json تعیین کنید. و یا این که خودتان متن JSON دریافتی را parse کنید.
# نکته
دقت کنید که پروژه را به گونه‌ای Zip کنید که فایل `index.html` و پوشه‌های `static` و `templates` در ریشه فایل Zip قرار داشته باشند (داخل پوشه دیگری نباشند).