در این بخش، عملیات ویرایش، حذف و پاککردن همه آیتمها با localStorage هماهنگ میشود تا تغییرات فقط در رابط کاربری نمایش داده نشوند و بعد از رفرش صفحه نیز بهصورت پایدار باقی بمانند.
در این بخش، ساختار StorageController برای ذخیره آیتمها در localStorage پیادهسازی میشود تا اطلاعات اپلیکیشن پس از رفرش صفحه از بین نرود و دوباره بارگذاری شود.
در این بخش، عملکرد دکمه Back برای خروج از حالت ویرایش، حذف یک آیتم از داده و رابط کاربری، و پاککردن همه آیتمها همراه با بهروزرسانی مجموع کالریها پیادهسازی میشود.
در این بخش، نام تابع مربوط به کلیک روی آیکن ویرایش اصلاح میشود و سپس فرایند کامل بهروزرسانی آیتم، غیرفعالکردن ارسال فرم با Enter، بهروزرسانی رابط کاربری و محاسبه دوباره مجموع کالریها پیادهسازی میشود.
در این بخش یاد میگیرید چگونه در زمان کلیک روی آیکن ویرایش، فرم را وارد حالت ویرایش کنید، دکمههای مناسب را نمایش دهید، از Event Delegation استفاده کنید و آیتم انتخابشده را داخل فرم بارگذاری کنید.
در این بخش، منطق محاسبه مجموع کالریها را به Item Controller اضافه میکنیم و مقدار نهایی را بعد از ثبت هر آیتم و همچنین هنگام اجرای اولیه برنامه در رابط کاربری نمایش میدهیم.
در این بخش، آیتم جدید را بعد از ثبت فرم مستقیماً به رابط کاربری اضافه میکنیم، فیلدهای ورودی را پاکسازی میکنیم، نوع ورودی کالری را به number تغییر میدهیم و نمایش یا مخفیسازی لیست را بر اساس وجود آیتمها مدیریت میکنیم.
در این بخش، فرایند افزودن آیتم جدید به برنامه Calorie Tracker را پیادهسازی میکنیم. ابتدا Event Listener مربوط به دکمه افزودن را میسازیم، سپس ورودیهای فرم را از UI Controller میگیریم و در نهایت آیتم جدید را در Item Controller به ساختار داده اضافه میکنیم.
در این بخش، متد getItems را در Item Controller میسازیم، دادهها را هنگام راهاندازی برنامه دریافت میکنیم و با متد populateItemList آنها را در رابط کاربری نمایش میدهیم. همچنین برای مدیریت بهتر سلکتورها، آبجکت UISelectors را تعریف میکنیم.