ظاهر کلی برنامه بدین صورت است:  # پروژه اولیه پروژه اولیه را از [این لینک](/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_ کرده و ارسال کنید.