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

imadbelasri Javascript
JS

فهاد الدرس الجديد من سلسلة 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;
}
                                                        
                                                    

دروس ذات صلة

JS

كيفاش نصاوب إختبار بإستعمال Javascript

فهاد الدرس الاول من سلسلة javascript غادي نشوفو كيفاش نقادو واحد المشروع لي عبارة عن إختبار ديال الأ...


JS

لعبة Tic Tac Toe ب Javascript

فهاد الدرس غادي نشوفو كيفاش نقادو واحد اللعبة بسيطة سميتها Tic Tac Toe بإستعمال javascript هاد الدرس...


JS

كيفاش تصاوب تطبيق صرف عملات بإستخدام JSON

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


JS

كيفاش تصاوب تطبيق كيحسب مؤشر كتلة الجسم بإستخدام JSON

فهاد الدرس غادي نقومو بالبرمجة ديال واحد لAPI بسيط كيمكن من حساب كتلة الجسم من بعد ما كيستقبل الوزن...


JS

لعبة Domino ب javascript

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


JS

كيفاش تصاوب jeu de math ب javascript

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نقادو واحد اللعبة بسيطة سميتها jeu de math لي...


JS

application كتحسب المسافة بين المدن ب html & css & javascript

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نقادو واحد ل application كتحسب المسافة مابين...


JS

برمج ساعة باستعمال javascript

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


JS

كيفاش تسجل المعلومات فل local storage ديال navigateur

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش تسجل المعلومات فل local storage ديال nav...


JS

ألة حاسبة للمبتدئين ب javascript

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