---
title: Tip Calculator
localeTitle: نوع الكمبيوتر
---
## تلميح حاسبة
حاسبة التلميحات هي عبارة عن آلة حاسبة تقوم بحساب معلومات سرية بناءً على النسبة المئوية للفاتورة الإجمالية.
## الخطوة 1 - HTML:
نحن ننشئ نموذجًا لإدخال المبلغ المفضل:
`
Tip Calculator
Tip Calculator
Results
Tip amount
Total Bill with Tip
`
## الخطوة 2 - CSS:
يمكنك تصميم النمط كيفما تشاء. يمكنك أيضًا استخدام CSS لإخفاء النتائج وعرضها من خلال جافا سكريبت بعد ملء المستخدم للنموذج:
` #results {
display:none;
}
`
## الخطوة 3: 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'
}
``
يمكنك مشاهدة مثال [عملي ورمزه](https://codepen.io/voula12/pen/djrZGw) على [Codepen.io](https://codepen.io/voula12/pen/djrZGw) .