شرح منطق كود جافاسكريبت التالي

منطق الكود ككل هو توفير واجهة بسيطة لإنشاء منتجات وحفظها محليًا، مع إمكانية عرض الإجمالي بشكل ديناميكي، أي مناسب لمشروع خاص بتطبيقات مثل إدارة المخزون أو قوائم المنتجات في متجر صغير.

الجزء التالي ما هو إلا استخدام الـ DOM للوصول لعناصر معينة في الصفحة عن طريق المعرفات ID الخاصة بها، وبالطبع نستطيع الوصول عن طريق الكلاس وخلافه، وتخزين في متغيرات واستخدامها لاحقًا في الكود لقراءة القيم المدخلة من خلال خاصية .value أو تحديث محتوى العنصر من خلال .innerHTML أو تغيير تنسيقه كالتالي .style.background

let title = document.getElementById('title');
let price = document.getElementById('price');
let taxes = document.getElementById('taxes');
let ads = document.getElementById('ads');
let discount = document.getElementById('discount');
let count = document.getElementById('count');
let category = document.getElementById('category');
let total = document.getElementById('total');
let btnCreate = document.getElementById('btnCreate');

والجزء التالي خاص بمنطق حساب الإجمالي  اعتمادًا على القيم المدخلة في حقول السعر price، الضرائب taxes، الإعلانات ads، والخصم discount، وذلك لتوفير توضيحات فورية للمستخدم حول الإجمالي بناءًا على المدخلات، مع تحسين تجربة المستخدم من خلال تغيير الألوان.

function getTotal(){
    if(price.value != ''){
        let result = (+price.value + +taxes.value + +ads.value) - +discount.value;
        total.innerHTML = result;
        total.style.background = 'green';
    }else{
        total.innerHTML = '';
        total.style.background = 'red';
    }
}

والجزء التالي لإدارة البيانات عن طريق التخزين المحلي في المتصفح localStorage وذلك لضمان استمرارية البيانات بين زيارات المستخدم حتى بعد إغلاق المتصفح، مع توفير تهيئة بمصفوفة فارغة في لم تكن هناك بيانات مخزنة مسبقًا.

let dataPro;
if(localStorage.product != null){
    dataPro = JSON.parse(localStorage.product)
}else{
    dataPro = [];
}

والجزء المتعلق  لإنشاء منتج جديد وحفظه عند النقر على زر الإنشاء الذي خزناه في متغير باسم btnCreate، ثم حفظ المنتج في التخزين المحلي.

btnCreate.onclick = function(){
    let newPro = {
        title: title.value,
        price: price.value,
        taxes: taxes.value,
        ads: ads.value,
        discount: discount.value,
        total: total.innerHTML,
        count: count.value,
        category: category.value
    }
    dataPro.push(newPro)
    localStorage.setItem('product', JSON.stringify(dataPro))
    console.log(dataPro)
}

الأمر كله يعتمد على التلاعب بالـ DOM، ستتضح لك الكثير من الأمور بعد قراءة التالي: