Добро пожаловать в блог Codewithrandom. В этом блоге мы узнаем, как создать Кредитный калькулятор с использованием HTML, CSS и JavaScript с исходным кодом. в этом кредитном калькуляторе мы вводим сумму, процент и сколько лет он показывает общий платеж, ежемесячный платеж и общий процент.
Надеюсь, вам понравится наш блог, так что давайте начнем с базовой HTML-структуры кредитного калькулятора.
HTML и Css код для кредитного калькулятора
<!doctype html> <html lang="en"> <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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <style> #loading, #results{ display: none; } </style> <title>Loan Calculator</title> </head> <body class="bg-dark"> <div class="container"> <div class="row"> <div class="col-md-6 mx-auro"> <div class="card card-body text-center mt-5"> <h1 class="heading display-5 pb-3">Loan Calculator</h1> <form action="" id="loan-form"> <div class="form-group"> <div class="input-group"> <span class="input-group-text">$</span> <input type="number" class="form-control" id="amount" placeholder="Loan Amout"> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-text">%</span> <input type="number" class="form-control" id="interest" placeholder="Interest"> </div> </div> <div class="form-group"> <input type="number" class="form-control" id="years" placeholder="Years to repay"> </div> <div class="form-group"> <input type="submit" value="Calculator" class="btn btn-dark btn-block"> </div> </form> <!-- Loader Here --> <div id="loading"> <img src="img/loading.gif" alt=""> </div> <!-- Results --> <div id="results" class="pt-4"> <h5>Results</h5> <div class="form-group"> <div class="input-group"> <span class="input-group-text">Total Payment</span> <input type="number" class="form-control" id="total-payment" disabled> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-text">Mothly Payment</span> <input type="number" class="form-control" id="monthly-payment" disabled> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-text">Total Interest</span> <input type="number" class="form-control" id="total-interest" disabled> </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.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <script src="app.js"></script> </body> </html>
Есть весь код Html и код Css для кредитного калькулятора. Теперь вы можете увидеть вывод с помощью Html и Css. затем мы пишем javascript для добавления основного функционала в Loan Calculator.
Вывод HTML + Css
Код JavaScript для кредитного калькулятора
// //Listen for submit button //document.getElementById('loan-form').addEventListener('submit',calculateResults);; //Listen for submit button const form = document.getElementById('loan-form'); //form.addEventListener('submit',calculateResults);//Without loader form.addEventListener('submit',function(e){ //Hide Results document.getElementById('results').style.display='none'; //Show Loader document.getElementById('loading').style.display='block'; setTimeout(calculateResults,2000); e.preventDefault(); }); //Calculate Results function function calculateResults(e){ console.log('calculating...'); //UI cars const ELamount = document.getElementById('amount'); const ELinterest = document.getElementById('interest'); const ELyears = document.getElementById('years'); const ELMonthly_payment = document.getElementById('monthly-payment'); const ELtotal_payment = document.getElementById('total-payment'); const ELtotal_interest = document.getElementById('total-interest'); const principal = parseFloat(ELamount.value); const calculatedInterest = parseFloat(ELinterest.value) /100 /12; const calculatedPayment = parseFloat(ELyears.value )*12; //Create monthly payment const x = Math.pow(1 + calculatedInterest, calculatedPayment); const monthly = (principal * x * calculatedInterest) / (x - 1); console.log(monthly); if(isFinite(monthly)){//check whether it is finite or not ELMonthly_payment.value = monthly.toFixed(2); ELtotal_payment.value = (monthly*calculatedPayment).toFixed(2); ELtotal_interest.value = ((monthly*calculatedPayment)-principal).toFixed(2);//fix to 2 deciman places //Show Results document.getElementById('results').style.display='block'; //Hide Loader document.getElementById('loading').style.display='none'; }else{ console.log("Plase check your numbers"); //Display an error showError('Plase check your number'); } e.preventDefault(); } function showError(error){ //Show Results document.getElementById('results').style.display='none'; //Hide Loader document.getElementById('loading').style.display='none'; //-------------------------------------------------------------------- //Create a div const errorDiv = document.createElement('div'); //get elements const ELcard = document.querySelector ('.card'); const ELheading = document.querySelector('.heading'); //Add class errorDiv.className = 'alert alert-danger'; //create text node and append to dic errorDiv.appendChild(document.createTextNode(error)); //Insert error above heading ELcard.insertBefore(errorDiv, ELheading); //clear error after 3 seconds setTimeout(clearError, 3000); } function clearError(){ document.querySelector('.alert').remove(); }
Окончательный вывод ссудного калькулятора с использованием исходного кода JavaScript
Итак, мы завершили наш кредитный калькулятор. Вот наш обновленный вывод с Html, Css и JavaScript. Надеюсь, вам понравился проект кредитного калькулятора. вы можете увидеть выходное видео и скриншоты проекта. Смотрите другие наши блоги и получайте знания в области фронтенд-разработки.
Спасибо!
В этом посте мы узнаем, как создать Кредитный калькулятор, используя исходный код HTML, CSS и JavaScript. Если мы допустили ошибку или какую-либо путаницу, пожалуйста, оставьте комментарий, чтобы ответить или помочь вам в легком обучении.
Автор — Code With Random/Anki
Какой редактор кода вы используете для кодирования кредитного калькулятора?
Я лично рекомендую использовать VS Code Studio, он прост и удобен в использовании.
Является ли этот проект адаптивным или нет?
Да! это адаптивный проект
Используете ли вы какие-либо внешние ссылки для создания этого проекта?
Да!