كيفية إنشاء حاسبة تلميح باستخدام HTML و CSS وجافا سكريبت

حاسبة الإكرامية هي آلة حاسبة تقوم بحساب الإكرامية بناءً على النسبة المئوية لإجمالي الفاتورة.

دعونا نبني واحدة الآن.

الخطوة الأولى - HTML:

نقوم بإنشاء نموذج لإدخال المبلغ المفضل:

   Tip Calculator 

Tip Calculator

$ Tip:
Results
Tip amount Total Bill with Tip

الخطوة الثانية - CSS:

أنت تصمم النمط الذي تريده. يمكنك أيضًا استخدام CSS لإخفاء النتائج وإظهارها من خلال JavaScript بعد أن يملأ المستخدم النموذج:

 #results { display:none; }

الخطوة الثالثة: JavaScript:

نضيف حدث onchange. يقع حدث onchange عندما يتفاعل المستخدم مع النموذج.

سيؤدي هذا الإجراء إلى تنفيذ وظيفة تحسب مبلغ الفاتورة النهائية بناءً على نصيحة النسبة المئوية ، ثم تُرجع النتائج.

document.querySelector('#tip-form').onchange = function(){ var bill = Number(document.getElementById('billTotal').value); var tip = document.getElementById('tipInput').value; document.getElementById('tipOutput').innerHTML = `${tip}%`; var tipValue = bill * (tip/100) var finalBill = bill + tipValue console.log(finalBill) var tipAmount = document.querySelector('#tipAmount') var totalBillWithTip = document.querySelector('#totalBillWithTip') tipAmount.value = tipValue.toFixed(2); totalBillWithTip.value =finalBill.toFixed(2); //Show Results document.getElementById('results').style.display='block' }

يمكنك رؤية مثال عملي ورمزه على Codepen.io.