حاسبة قروض بالجافاسكريبت للمبتدئين


فهاد الدرس الجديد من سلسلة javascript غادي نشوفوا كيفاش نقادو واحد لآلة حاسبة كتمكن المستخدم باش يحسب القرض لي غادي ياخد شحال غادي يخلص عليه ديال الفوائد من بعد مكيدخل المبلغ وعدد السنوات والفائدة فهاد الدرس بسيط لأي مبتدئ فالجافاسكريبت.

نظرة سريعة بالفيديو

1- الملف index.php

فأول حاجة زيد projet جديد سميه لي بغيتي منبعد فيه زيد 3 ديال les fichiers index.html, style.css, main.js منبعد فال fichier index.html عندنا structure html فكنزيد روابط css هنا خدمت ب bootstrap 4 منبعد كنزيد ل fichier style.css منبعد عندي form فيها des champs كيمكنوا من إدخال المبلغ والعدد ديال السنوات ومعدل الفائدة وكل champ عندو id لي بيه غادي نسترجعوه فالملف main.js منبعد عندي des champs اخرين لي غادي ياخدو حتى هما des ids وغادي يتعرضوا فيهم النتيجة وغادي نسترجعهم  فالملف main.js منبعد كاين روابط js ولي فيهم الملف main.js الكود ديال الملف هو:

                                <!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

فالملف main.js كنسترجع ل form بل id ديالها وأيضا les champs بل id ديالهم منبعد كنزيد ل form ل event submit يعني ملي المستخدم كيكليكي على ل bouton حساب كنفدو ل fonction calculateAmount لي كتاخد event e وبداك ل e لي هي event كنمنع من ان الفورم يتندارلها submit من بعد كنسترجع القيم لي كاينين ف les champs منبعد كنحسب لمبلغ الشهري فكاين des formules لي فقط كنحسبوا بهم ماشي ضروري نشرحوهم منبعد كنتحقق يلا كان المبلغ الشهري فعلا كاين كنعمر les champs بالنتيجة فكنعمر المبلغ الشهري والمبلغ الإجمالي ومبلغ الفوائد ويلا مكانش كن créer div élément لي كنعطيها class alert alert-danger لي كتعرض رسالة خطأ وكنزيدها لواحد div error لي déjà زدناها ف index.html ولي فقط كتبان يلا كانو الحقول خاويين  الكود ديال الملف هو :

                                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

فالملف style.css كنزيد des styles css لي غادي يديرو تغييرات بسيطة على ل app ديالنا الكود ديال الملف هو :

                                body{
    background: #C9C9C9;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding: 30px;
}
.input-group-prepend,
.form-control{
    border-radius: 0;
}
                            


بحث في الموقع


إشترك للتوصل بالجديد