یکی از چالش‌هایی که کتابخانه‌ها و فریم‌ورک‌های جاوااسکریپت سعی در حل آن دارند، مسئله ی **Routing** است. ما سعی داریم در این سوال، یک برنامه را به همراه **Route**های مرتبط به هر لینک پیاده‌سازی کنیم. ظاهر کلی برنامه به این صورت است:  # پروژه اولیه پروژه اولیه را از [این لینک](/problemset/assignments/4367/download_problem_initial_project/220650/) دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است: ``` Routing-question ├── images │ └── quera-logo.svg ├── <mark title="تغییرات را تنها در این فایل اعمال کنید">main.js</mark> ├── index.html └── styles.css ``` # راه‌اندازی پروژه برای اجرای این پروژه از اکستنشن `live server` در `vs code` استفاده کنید. # جزئیات در فایل `index.html` چند تگ `a` را مشاهده می‌کنیم که با کلاس `navlink` مشخص شده‌اند. یکی از این تگ‌ها *logo* است و سه تای بعدی **بوت‌کمپ** ، **کالج** و **جونیورا** هستند. این برنامه باید طوری پیاده‌سازی شود که با کلیک شدن بر روی این تگ‌ها: - خانه (لوگو کوئرا) : `/` - بوت‌کمپ: `/bootcamp` - کالج: `/college` - جونیورا: `/juniora` به `Route`هایی که مشاهده کردید هدایت شود. در هر `Route`، محتوای خواسته شده مربوط به همان `Route`، باید در یک تگ `<h1>` نمایش داده شود. | لینک | Route | محتوا | |:-------------:|:----------:|:--------------------:| | خانه(لوگو) | / | به کوئرا خوش آمدید | | بوت کمپ | bootcamp/ | به بوت کمپ خوش آمدید | | کالج | college/ | به کالج خوش آمدید | | جونیورا | juniora/ | به جونیورا خوش آمدید | همانطور که گفته شد هر محتوا بر اساس `Route` آن در یک تگ `<h1>` نمایش داده شود. ## توجه کنید که: - قابلیت رفتن به صفحه‌ی قبل و بعد در مرورگر باید وجود داشته باشد. - دکمه‌های `a .navlink` نباید صفحه را **refresh** کنند. # نکات - شما تنها مجاز به اعمال تغییرات در فایل `main.js` هستید. - فایل ارسالی شما هم باید `main.js` باشد.