ظاهر کلی برنامه بدین صورت است:  # پروژه اولیه پروژه اولیه را از [این لینک](/contest/assignments/35057/download_problem_initial_project/122714/) دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است. ``` hello-code-cup6 ├── cypress │ ├── fixtures │ │ └── example.json │ ├── integration │ │ └── sample.spec.js │ ├── plugins │ │ └── index.js │ └── support │ ├── commands.js │ └── index.js ├── cypress.json ├── index.html ├── package.json ├── script.js └── styles.css ``` # جزئیات در این سوال قراره به امیررضا کمک کنید که نامه داخل پاکت رو مثل عکس بالا بسازه. مواردی که در این سوال باید رعایت کنید: + متن داخل نامه باید به کمک `flexbox` وسط صفحه قرار بگیرد. + نامه داری رنگ پس زمینه `rgb(252, 228, 94)` ، سایز فونت `25px` و border-radius برابر با `10px` میباشد. + هنگام قرار گرفتن و برداشته شدن موس از روی پاکت نامه، به ترتیب کلاس های pullOut و putIn به نامه داده میشود. شما باید این کلاس ها را به گونه ای بنویسید که نامه به اندازه `200px` در جهت عمودی جابجا شود. # نکات شما تنها مجاز به اعمال تغییرات در فایل `styles.css` هستید.

# پروژه اولیه پروژه اولیه را از [این لینک](/contest/assignments/35057/download_problem_initial_project/122699/) دانلود کنید. <details class="green"> <summary> ساختار فایل‌های این پروژه به این صورت است </summary> ``` markdown_table ├── index.html ├── styles.css └── scripts.js ``` </details> <details class="brown"> <summary> راه اندازی پروژه </summary> + ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید. + سپس فایل `index.html` را در مرورگر خود باز کنید. </details> # جزئیات ظاهر کلی برنامه بدین صورت است:  کوئرا به تازگی تصمیم گرفته است به جای استفاده از سرویس های هاستینگ مخزن خارجی همچون گیت هاب از یک نسخه درون سازمانی استفاده کند که طراحی آن کار بسیاری پر چالشی است، اما در گام اول آن ها تصمیم گرفته اند که یک تجزیه گر مارکداون طراحی کنند، هر چند مارکداون ها قواعد زیادی دارند اما سرپرست تیم برنامه نویسی کوئرا تصمیم گرفته است که بخش تجزیه گر مربوط به جدول را به شما واگذار کند. هر سطر در جدول مارکداون به این صورت نمایش داده می شود که البته از فاصله های اضافی در سمت چپ و راست متن ستون صرف نظر می شود ``` | title 1 | title 2 | title 3| ``` اگر به جای متن از تعداد 3 یا بیشتر کاراکتر `-` استفاده شود موجب این می شود که سطر قبلی به صورت سرتیتر در بیاید همچنین این نکته قابل ذکر است که محدودیتی روی تعداد سطرهایی که میتوانند سرتیتر باشند وجود ندارد ``` | title 1 | title 2 | title 3| |--- | -------| -----------------| ``` حال از شما خواسته شده برنامه را به نحوی تکمیل کنید که با فشردن بر روی دکمه `CONVERT TO HTML` ورودی مارکداون از `textarea#markdown` خوانده شده و جدول نهایی درون `div#table` رندر شود. ### ورودی نمونه 1 ``` | Syntax | Description | | ----------- | ----------- | | Header | Title | | Paragraph | Text | ``` ### خروجی نمونه 1 ```html <table> <tbody> <tr> <th>Syntax</th> <th>Description</th> </tr> <tr> <td>Header</td> <td>Title</td> </tr> <tr> <td>Paragraph</td> <td>Text</td> </tr> </tbody> </table> ``` # نکات + شما تنها مجاز به اعمال تغییرات در فایل ‍‍```script.js``` هستید.

ظاهر کلی برنامه بدین صورت است:  # پروژه اولیه پروژه اولیه را از [این لینک](/contest/assignments/35057/download_problem_initial_project/122712/) دانلود کنید. <details class="green"> <summary> ساختار فایل‌ها </summary> ``` json-viewer ├── assets │ ├── css │ │ └── style.css │ └── font │ └── Vazir.ttf ├── cypress │ ├── fixtures │ │ └── example.json │ ├── integration │ │ └── sample.spec.js │ ├── plugins │ │ └── index.js │ └── support │ ├── commands.js │ └── index.js ├── json-examples │ ├── example-1.json │ └── example-2.json ├── cypress.json ├── index.html ├── main.js └── package.json ``` </details> <details class="brown"> <summary> راه اندازی پروژه </summary> + ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید. + سپس فایل `index.html` را در مرورگر خود باز کنید. </details> # جزئیات نیما که به تازگی با جیسون ([*JSON*](https://en.wikipedia.org/wiki/JSON)) آشنا شده، از نمایش معمولی آنها خوشش نمیاد و تصمیم گرفته که با جاوااسکریپت برنامه‌ای بنویسید تا جیسون‌های زشت را خوشگل کند. از آنجا که نیما خیلی کار کردن با جیسون‌ها را بلد نیست، به او در نوشتن این برنامه کمک کنید. در این پروژه کاربر جیسون را در *textarea* سمت چپ صفحه وارد میکند و سپس روی دکمه «خوشگل سازی جیسون» کلیک می‌کند و جیسون خوشگل شده در باکس سمت راست صفحه نمایش داده می‌شود. همانطور که احتمالاً می‌دانید هر جیسون از زوج‌های *name/value* تشکیل شده است. در صورتی که جیسون ورودی کاربر معتبر نبود باید کلاس `has-error` را به تگ با آیدی `textarea` بدهید. همچنین در صورت معتبر بودن جیسون ورودی باید این کلاس را حذف کنید. در ادامه باید ساختار *HTML* جیسون را بسازید و در نهایت آن را داخل تگ `div` با آیدی `result` رندر کنید. نیما قواعد ساخت جیسون زیبا را اینگونه بیان می‌کند: 1- مقادیر جیسونی که باید خوشگل شود فقط می‌تواند از نوع `string`، `number` ، `boolean` و `object` باشد. 2- محتویات هر آبجکت باید داخل یک تگ `ul` باشد. 3- هر زوج *name/value* که داخل یک آبجکت است باید داخل تگ `li` باشد. - اگر *value* از نوع آبجکت باشد، باید ۳ تگ زیر داخل `li` قرار بگیرد: - تگ `span` با کلاس `json-viewer-object-start` که شامل *name* و `{` باشد. - تگ `ul` که شامل زوج‌های *name/value* داخل آبجکت است. - تگ `span` با کلاس `json-viewer-object-end` که شامل `}` است. - در صورتی که value از نوع آبجکت نباشد: - ‏ *name* باید داخل تگ `span` با کلاس `key` قرار بگیرد. - ‏ *value* نیز داخل یک تگ `span` دیگر قرار می‌گیرد نیما که می‌خواهد جیسون‌هایش به میزان بیشتری خوشگل شود، تصمیم گرفته که *valueهایی* که از نوع مختلفی هستند را با یک رنگ خاص نشان دهد. برای اعمال رنگ‌های مختلف باید به تگ `span` که *value* در آن قرار دارد، کلاس `value-{type}` را بدهید. برای مثال اگر *value* از جنس *string* باشد، کلاس `value-string` را باید بدهید. از آنجایی که نیما طبق تجربه‌هایی که در گذشته کسب کرده، می‌داند که «فقط زیبایی و خوشگل بودن ملاک نیست» و به همین دلیل می‌خواهد نمایش‌دهنده‌ای که ساخته است را کاربردی‌تر کند. او از شما خواسته است تا امکان باز و بسته شدن آبجکت‌ها را بر اساس موارد زیر پیاده‌سازی کنید: - تنها *valueهایی* که از نوع آبجکت هستند باید قابلیت باز و بسته شدن داشته باشند. - با هر بار کلیک شدن روی تگ با کلاس `json-viewer-object-start`، کلاس `json-viewer-object-close` تاگل (*toggle*) شود (یعنی اگر این کلاس را دارد، حذف شود و اگر ندارد، اضافه شود). #### مواردی که باید در این سوال رعایت کنید: - ترتیب *nameهای* جیسون باید دقیقا بر اساس همان ترتیبی که در ورودی آمده‌اند باشد. - تمامی *nameها* باید بین `""` قرار بگیرند و پس از آنها کاراکتر `:` و یک فاصله باشد. برای مثال اگر *name* برابر `age` باشد باید به صورت `"age": ‌` نمایش داده شود. اگر *value* مورد نظر از نوع آبجکت باشد، علاوه بر موارد بالا یک `{` نمایش داده می‌شود (برای مثال `"age": {`). # نکات - دقت کنید که برنامه شما باید برای هر ورودی جیسون معتبر، کار کند. در واقع جیسون ورودی می‌تواند شامل آبجکت‌های تودرتو و پیچیده باشد. - در پوشه `json-examples` دو نمونه مختلف از *JSON* گذاشته شده است. می‌توانید از آنها برای تست برنامه خود استفاده کنید. - شما تنها مجاز به اعمال تغییرات در فایل `main.js` هستید. - برای ارسال پاسخ میتوانید فقط فایل `main.js` را بدون _zip_ کردن ارسال کنید یا کل پروژه را _zip_ کرده و ارسال کنید.

# پروژه اولیه پروژه اولیه را از [این لینک](/contest/assignments/35057/download_problem_initial_project/122715/) دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است. <details class="green"> <summary> ساختار فایل‌های این پروژه به این صورت است </summary> ``` candlestick-chart ├── server │ ├── server.js │ └── utils.js ├── index.html ├── package.json ├── script.js └── styles.css ``` </details> <details class="brown"> <summary> راه‌اندازی سرور </summary> برای اجرای پروژه، باید` NodeJS` و `npm` را از قبل نصب کرده باشید. - ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید. - در پوشه‌ی `candlestick-chart` ، دستور `npm install` را برای نصب نیازمندی‌ها اجرا کنید. - در همین پوشه، دستور `npm run server` را برای راه‌اندازی سرور پروژه اجرا کنید. </details> # جزئیات ظاهر کلی برنامه بدین صورت است:  با سر زبان افتادن رمزارز‌ها و سود خوب این بازار، شمس‌الله تصمیم گرفته صرافی خود را ایجاد کند. او برای صرافی خود می‌خواهد یک ارز اختصاصی ایجاد کند و با فروختن آن به مردم پول خوبی به جیب بزند. او در ابتدا می‌خواهد یک چارت قیمتی دروغین برای خود بسازد. برای این منظور اون یک سرور ساخته است که در بازه‌های زمانی ۳۰ ثانیه یک قیمت رندوم می‌سازد. از اونجایی که او به قسمت فرانت‌اند مسلط نیست از شما می‌خواهد که قسمت فرانت‌اند این پروژه را بسازید و در سود این ارز کلاه‌برداری سهیم شوید. #### وظیفه توسعه‌دهنده فرانت‌اند: در این پروژه شما باید دیتای قیمت این ارز رو از سرور بگیرید و در قالب نمودار شمعی (*candlestick-chart*) نمایش دهید. ساختار داده‌ ارسالی سرور به‌شکل زیر است: ```json "data": { "date": Date, "price": number }[] ``` سرور یک ابجکت به اسم `data` ارسال می‌کند که در داخل این ابجکت به‌ازای تاریخ، یک قیمت قرار داد. برای مثال: ```json "data": [ { "date": "2021-11-29T15:53:00.000Z", "price": 10, }, { "date": "2021-11-29T15:53:30.000Z", "price": 40, }, { "date": "2021-11-29T15:54:00.000Z", "price": 20, } ] ``` فاصله تاریخ‌ها ۳۰ ثانیه است. شما پس از دریافت داده‌ها باید چارت مناسبت با داده‌ها را بسازید. دقت کنید که این داده‌ها به صورت مرتب ارسال نمی‌شوند و ممکن است تاریخ‌ها پشت سر هم نباشند. فرض کنید دیتای تاریخ اولین دیتا برابر شروع نمودار است. #### اجزای کندل‌ها: در بازار‌های مالی یکی از نمودارهای پرکاربرد برای پیگیری نوسانات قیمت، نمودار شعمی یا *candlestick-chart* است. در این نمودار شما با استفاده از کندل‌ها بالاترین، پایین‌ترین قیمت و همچنین قیمت باز و بسته شدن در یک بازه زمانی را مشاهده می‌کنید. این نمودارها در تایم‌فریم‌های مختلفی قابل بررسی است. برای مثال در تایم‌فریم ۵ دقیقه هر کندل اطلاعات مربوط به بازه زمانی ۵ دقیقه‌ای را نشان می‌دهد. و نمودار به بازهه‌های ۵ دقیقه تقسیم می‌شود. در هر کندل چهار داده اصلی وجود دارد: - بالاترین مقدار: بالاترین مقدار در بازه زمانی یک کندل است. - پایین‌ترین مقدار: پایین‌ترین مقدار در بازه زمانی یک کندل است. - مقدار شروع: مقداری است که کندل با آن باز شده است. - مقدار پایان: مقداری است که کندل با آن تمام شده است. هر کندل سه قسمت اصلی دارد: - سایه بالا: حد فاصل بیشتر‌ین مقدار با مقدار شروع یا پایان - سایه پایین: حد فاصل کمترین مقدار با مقدار شروع یا پایان - بدنه اصلی: حد فاصل مقدار شروع و پایان در صورتی که مقدار پایان از شروع بیشتر باشد، کندل صعودی یا سبز است و در صورتی که مقدار پایان از شروع کمتر باشد، کندل نزولی یا قرمز است. در تصویر زیر دو شکل نشان داده شده است:  #### ساخت کندل‌ها: برای ساخت کندل‌ها شما به شکل زیر عمل کنید: - هر کندل داخل یک `div` با کلاس `candle` قرار می‌گیرد. - این المان باید سه استایل `bottom`, `left`, `height` را داشته باشد. مقادیر این استایل‌ها باید براساس داده‌های هر آن کندل باشد. - در المان `candle` خود سه بخش دارد. هر کدام از این بخش‌ها با یک `div` ساخته می‌شوند. - المان اول سایه بالا، المان دوم بدنه کندل و المان سوم سایه پایین است. - در صورتی که المان از نوع بدنه کندل بود باید دارای کلاس `candle__body` باشد و درصورتی که از نوع سایه (چه بالا و چه پایین) باید دارای کلاس `candle__shadow` باشد. - هر کدام از این سه المان باید دارای دو استایل `height` و `background-color` باشد. مقدار این استایل‌ها باید براساس داده‌های آن کندل و توضیحات گفته شده در بالا باشد. - مقدار رنگ‌ها در فایل‌ها اولیه آماده است. #### مواردی که باید در این سوال رعایت کنید: - شما باید برساس دیتای دریافتی از سرور، ساختار مورد نیاز را بسازید و در نمودار نمایش دهید. - دیتای ارسالی توسط براساس تاریخ مرتب نیست و شما باید این داده‌ها را براساس ترتیب بر روی تاریخ روی نمودار نمایش دهید. - کندل‌ها باید در المان با ایدی `chart` قرار داده شوند. - در هر کندل باید دیتای مربوط به بازه آن کندل را داشته باشید. برای مثال اگه تایم‌فریم ۳ دقیقه بود، کندل اول باید براساس داده‌های سه دقیقه اول باشد. - تعداد کندل‌ها نباید از چارت بیرون بزند. بنابراین باید هنگام ارسال درخواست به سرور برای دریافت داده‌ها باید تعداد مناسب را بدست آورید. فرض کنید عرض هر کندل `10px` است. - هنگام اجرای اولیه باید درخواست به سرور با تایم‌فریم ۳ دقیقه ارسال شود و نمایش نمودار براساس این دیتا‌ها باشد. - کاربر می‌تواند با انتخاب تایم‌فریم‌ها ۳، ۵ و ۱۰ دقیقه داده‌های مختلف را ببیند. - با انتخاب هر کدام از این تایم‌فریم‌ها شما باید یک درخواست جدید ارسال کنید و نمودار را براساس داده‌های جدید بروز کنید. - ساختار آدرس درخواستی به سرور به شکل `${SERVER_BASE_URL}/:TIME_FRAME/?count=DATA_COUNT` است. که در آن `TIME_FRAME` نشان‌دهنده تایم‌فریم انتخابی (۳، ۵، ۱۰) و `DATA_COUNT` برابر تعداد داده‌هایی است که سرور باید بفرستد. - در هر تغییر تایم‌فریم نمودار باید به‌‌کلی بروز شود. - برای ارسال درخواست‌ها از `fetch` استفاده کنید. - فرض کنید داده‌ها ارسالی سرور بین بازه صفر تا ۲۰۰ است. - برخی از داده‌های کمکی در فایل اولیه آورده شده است. - فرض کنید هر واحد برابر `3px` است. برای مثال اگه کمترین مقدار یک کندل ۱۰ بود، برای نمایش نقطه مربوط به کمترین مقدار، باید `30px` قرار بدید. # نکات - شما تنها مجاز به اعمال تغییرات در فایل `script.js` هستید.