**فرانتیوم** این روزها حالِ جالبی ندارد; **درس می‌خوانَد، کار می‌کند، حتی تفریح هم می‌کند،**
اما انگار فکرهای زیادی که توی سرش می‌چرخد **و احساسِ از‌دست‌رفته‌اش باعث شده نسبت به همه‌چیز سِر باشد!**
تنها چیزی که فرانتیوم را روی پا نگه داشته، **فقط و فقط کار کردن بود** — یادتان هست؟
ذهنش هم خیلی خلاق بود؛
برای همین تصمیم گرفت با **ایموجی‌های مختلف** و **رنگ‌های گوناگون** کاری کند تا ذهنِ آشفته‌اش را به تصویر بکشد.
# **پروژه‌ی اولیه**
برای دانلود **پروژه‌ی اولیه** روی [این لینک](/problemset/assignments/4367/download_problem_initial_project/316812/) کلیک کنید.
<details class="red">
<summary>**ساختار فایل‌ها**</summary>
```
happy_sad_angry/
├─ icons/
│ ├─ angry.png
│ ├─ happy.png
│ └─ sad.png
├─ <mark class="orange" title="این فایل را تکمیل کنید">index.html</mark>
├─ <mark class="orange" title="این فایل را تکمیل کنید">index.js</mark>
└─ styles.css
```
</details>
# **جزئیات پیاده‌سازی**
پس از **پیاده‌سازی کامل** و **صحیح** تمام موارد ذکرشده، باید نتیجه‌ای مشابه تصویر زیر مشاهده کنید:
<details class="purple">
<summary>**پیاده‌سازی اِلمان** `container`</summary>
**هر سطری** که در ادامه پیاده‌سازی می‌شود، **باید درون این** `container` قرار گیرد. در مجموع، **چهار سطر** خواهیم داشت.
+ **توجه:** در نهایت، باید در مجموع **۱۰ آیکون** استفاده شده باشد، به‌طوری که تعداد آیکون‌های هر سطر با توضیحات داده‌شده مطابقت داشته باشد. در صورت عدم رعایت این مورد، **نمره‌ای به شما تعلق نخواهد گرفت.**
<details class="yellow">
<summary>**پیاده‌سازی ساختار هر سطر**</summary>
+ **هر سطر** باید در **یک** `div` قرار داشته باشد.
+ **هر سطر** باید دارای **کلاس** `container_item` باشد.
</details>
<details class="yellow">
<summary>**پیاده‌سازی سطرهای فرد**</summary>
در سطرهای فرد، **تنها باید دو آیکون** `happy` وجود داشته باشد.
**سطر اول فرد** باید دارای **کلاس** `row-blue` و **سطر فرد بعدی** دارای **کلاس** `row-red` باشد.
+ همچنین **هر سطر دارای دو آیکون** *(سطر فرد)* **باید کلاس** `two-icons` را نیز داشته باشد.
</details>
<details class="yellow">
<summary>**پیاده‌سازی سطرهای زوج**</summary>
در **سطرهای زوج** باید **سه آیکون** به‌ترتیب **از سمت چپ** وجود داشته باشد:
1. `happy`
2. `sad`
3. `angry`
**سطر اول زوج** باید دارای **کلاس** `row-teal` باشد و **سطر زوج بعدی** دارای **کلاس** `row-lightred`.
</details>
+ **توجه:** برای **هر آیکون** باید یک **تگ** `img` ایجاد کرده و **مسیر آن آیکون** را در **ویژگی** `src` قرار دهید.
+ **توجه:** آیکون‌های ذکرشده را می‌توانید در **پوشه‌ی** `icons` در میان **فایل‌های پروژه اولیه** پیدا کنید.
</details>
# **آنچه باید آپلود کنید**
+ **توجه:** در صورتی که تمام موارد را پیاده‌سازی کرده‌اید، اما نتیجه‌ی دلخواه **مشاهده نمی‌شود،** ممکن است نیاز باشد به **تگ** _script_ پراپتی‌ای اضافه کنید یا از یک **رویداد** *(event)* **جاوا اسکریپتی** در فایل *index.js* استفاده کنید تا مشکل برطرف شود.
+ **توجه:** در این سوال **شما مجاز به ایجاد تغییرات در فایل‌های** `index.html` و `index.js` هستید.
+ **توجه:** پس از اعمال تغییرات، این دو فایل را در یک فایل _Zip_ قرار داده و آپلود کنید.