پورت

پروژه‌ی اولیه

فایلِ پروژه را می‌توانید از طریق این این لینک دانلود کنید.

ساختار پروژه به شکلِ زیر است:

initial_project/
├─ index.html
├─ main.js
└─ styles.css

جزئیات پیاده‌سازی

1. همان‌طور که مشاهده می‌کنید، همه‌ی پورت‌ها شامل یک مقدار مشخص هستند که در فایلِ index.html می‌توانید تگ‌‌های مربوطه برا ببینید.

2. در کنارِ هر عدد، یک آیکونِ ویرایش (همان مداد) مشاهده می‌کنید که وقتی روی آن کلیک می‌کنیم، تگی که مقدار در آن ذخیره شده بود باید از دیدِ کاربر محو شده و به‌جای آن، یک input نمایش داده شود که مقدارِ آن، همان مقدارِ موجود در تگِ مربوطه بوده؛ همچنین یک دکمه‌ی «ثبت» هم در زیرِ هر input قرار دارد.

3. حالا با وارد کردنِ مقدارِ جدید در input و زدنِ دکمه‌ی ثبت، input محو شده و دوباره همان تگی که وظیفه‌ی نمایش مقدار را داشت، نمایش داده می‌شود.

نکات

1. شما صرفا باید در فایل main.js تغییرات ایجاد کرده و کد بنویسید.
2. هر باکس، اطلاعاتِ مخصوصِ خودش را دارد.
3. در نظر داشته باشید که هر input فقط یک‌بار باز می‌شود.
4. تگ‌های اچ‌تی‌ام‌ای دارای آیدی با نام‌های واضح و مفهومی هستند.

آنچه باید آپلود کنید

فایلی که آپلود خواهید کرد باید دارای فرمت .zip باشد و دارای ساختارِ زیر باشد:

answer/
└─ main.js

موفق باشید 🌟