حاسبة قروض بالجافاسكريبت للمبتدئين
نظرة سريعة بالفيديو
1- الملف index.php
<!doctype html>
<html lang="en" dir="rtl">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>حاسبة القروض</title>
</head>
<body class="bg-light">
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card text-center mt-3 bg-primary border-primary">
<div class="card-body">
<h2 class="card-title text-white">حاسبة القروض</h2>
<div id="error"></div>
<form id="form" class="mt-3">
<div class="form-group">
<input type="number" name="amount" id="amount" class="form-control" placeholder="مبلغ القرض">
</div>
<div class="form-group">
<input type="number" name="ints" id="ints" class="form-control" placeholder="معدل الفائدة">
</div>
<div class="form-group">
<input type="number" name="years" id="years" class="form-control" placeholder="عدد السنوات">
</div>
<div class="form-group">
<button class="btn btn-block btn-success" id="calc" class="calc">حساب</button>
</div>
</form>
<hr>
<div id="results">
<h3 class="text-white mb-3">النتيجة</h3>
<label class="sr-only" for="inlineFormInputGroup">المبلغ الشهري</label>
<div class="input-group mb-2">
<input type="text" class="form-control" id="monthly" disabled>
<div class="input-group-prepend">
<div class="input-group-text">المبلغ الشهري</div>
</div>
</div>
<label class="sr-only" for="inlineFormInputGroup">المبلغ الإجمالي</label>
<div class="input-group mb-2">
<input type="text" class="form-control" id="total" disabled>
<div class="input-group-prepend">
<div class="input-group-text">المبلغ الإجمالي</div>
</div>
</div>
<label class="sr-only" for="inlineFormInputGroup">مجموع الفوائد</label>
<div class="input-group mb-2">
<input type="text" class="form-control" id="tinter" disabled>
<div class="input-group-prepend">
<div class="input-group-text">مجموع الفوائد</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
2- الملف main.js
const form = document.querySelector('#form');
const amount = document.querySelector('#amount');
const interest = document.querySelector('#ints');
const years = document.querySelector('#years');
const calcBtn = document.querySelector('#calc');
const TotalInterest = document.querySelector('#tinter');
const monthlyPayement = document.querySelector('#monthly');
const totalPayament = document.querySelector('#total');
form.addEventListener('submit',calculateAmount);
function calculateAmount(e){
const AmountP = parseFloat(amount.value);
const InterestCalcule = parseFloat(interest.value) / 100 / 12;
const MonthCount = parseFloat(years.value) * 12;
//calculate monthly payements
const count = Math.pow(1+InterestCalcule,MonthCount);
const monthPayment = (AmountP*count*InterestCalcule)/(count-1);
if(isFinite(monthPayment)){
monthlyPayement.value = monthPayment.toFixed(2);
totalPayament.value = (monthPayment * MonthCount).toFixed(2);
TotalInterest.value = ((monthPayment * MonthCount) - AmountP).toFixed(2);
document.getElementById('error').textContent = '';
}else{
const div = document.createElement('div');
div.className = 'alert alert-danger';
div.appendChild(document.createTextNode('المرجو ملء جميع الخانات'));
document.getElementById('error').appendChild(div);
}
e.preventDefault();
}
3- الملف style.css
body{
background: #C9C9C9;
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding: 30px;
}
.input-group-prepend,
.form-control{
border-radius: 0;
}