document.getElementById("monthly").addEventListener("change", getYearly);
document.getElementById("yearly").addEventListener("change", getMonthly);
document.getElementById("loanAmount").addEventListener("blur", formatAmount);
document.getElementById("loanAmount").addEventListener("change", formatAmount);
document.getElementById("btnSubmit").addEventListener("click", getValues);
document.getElementById("btnReset").addEventListener("click", reset);

// set numbers to currancy format
let USDollar = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
});

function reset(){
    document.querySelectorAll("input").forEach((input) => {
    input.value = "";
    })
    window.location.reload();
};

function getMonthly() {
    let monthly = document.getElementById("monthly");
    let yearly = document.getElementById("yearly");
    yearly.focus();
    monthly.value = yearly.value * 12;
}

function getYearly() {
    let monthly = document.getElementById("monthly");
    let yearly = document.getElementById("yearly");
    monthly.focus();
    yearly.value = (monthly.value / 12).toFixed(2);
}

function formatAmount() {
    let fSpan = document.getElementById("fAmount");
    fSpan.focus();
    let amountInput = document.getElementById("loanAmount");
    let fAmount = parseFloat(amountInput.value).toLocaleString("en-US");
    fSpan.innerHTML = "($" + fAmount + ")";
}

function getValues() {
    let valuesObj = {};
    let loanAmount = document.getElementById("loanAmount").value;
    let payments = document.getElementById("monthly").value;
    let rate = document.getElementById("rate").value;
    let extraPayment = document.getElementById("extraPayment").value;

    // validate user input
    document.querySelectorAll("input").forEach((input) => {
    switch(input.id){
        case "extraPayment":
        if(extraPayment == "" || extraPayment < 0){extraPayment = 0; document.getElementById("extraPayment").value = 0;}
        break;
        default:
        if (input.value < 1 || Math.sign(input.value) === -1) {
            alert( 'Please enter a valid number in the "' + input.getAttribute("aria-label") + '" field');
        }
        break;
    }
    });

    // Change the values of the number fields to integers.
    valuesObj.loanAmount = Math.round(parseInt(loanAmount));
    valuesObj.payments = Math.round(parseInt(payments));
    valuesObj.rate = Math.round(parseInt(rate));
    valuesObj.extraPayment = Math.round(parseInt(extraPayment));

    let results = generateResults(valuesObj);

    displayResults(results);
}

function generateResults(valuesObj) {
    let results = [];
    let mPay =(valuesObj.loanAmount * (valuesObj.rate / 1200)) /(1 - Math.pow(1 + valuesObj.rate / 1200, -valuesObj.payments));
    let previousBalance = valuesObj.loanAmount;
    let rate = valuesObj.rate;
    let payments = valuesObj.payments;
    let monthlyPayment = mPay;
    let extraPayment = valuesObj.extraPayment;

    for (let i = 1; i <= payments; i++) {
    let intPayment = (previousBalance * rate) / 1200;
    let princPayment = monthlyPayment - intPayment;
    let remBalance = Math.abs(previousBalance - princPayment - extraPayment);

    results.push({
        month: i,
        monthlyPayment: mPay,
        interestPayment: intPayment,
        principalPayment: princPayment,
        remainingBalance: remBalance,
    });

    previousBalance = remBalance;
    }
    return results;
}

function displayResults(results) {
    let templateRows = "";

    let accInterest = 0;
    let accruedInterest = 0;
    let ttlInterest = 0;
    let totalInterest = 0;
    let ttlCost = 0;
    let totalCost = 0;

    let chartData = {
    balanceData: [],
    monthData: []
    };

    for (let i = 0; i <= results.length - 1; i++) {
    let month = results[i].month;
    let monthlyPayment = results[i].monthlyPayment.toFixed(2);
    let interestPayment = results[i].interestPayment.toFixed(2);
    let principalPayment = results[i].principalPayment.toFixed(2);
    let remainingBalance = results[i].remainingBalance.toFixed(2);

    accInterest += +interestPayment;
    accruedInterest = accInterest.toFixed(2);

    ttlInterest += +interestPayment;
    totalInterest = ttlInterest.toFixed(2);

    ttlCost += +monthlyPayment;
    totalCost = ttlCost.toFixed(2);

    // format numbers
    monPayment = USDollar.format(monthlyPayment);
    princPayment = USDollar.format(principalPayment);
    intPayment = USDollar.format(interestPayment);
    accruedInt = USDollar.format(accruedInterest);
    remBalance = USDollar.format(remainingBalance);


    templateRows =
        templateRows +
        `<tr>
        <td>${month}</td>
        <td>${monPayment}</td>
        <td>${princPayment}</td>
        <td>${intPayment}</td>
        <td>${accruedInt}</td>
        <td>${remBalance}</td>
    </tr>`;
    }

    document.getElementById("results").innerHTML = templateRows;

    // this is for the header, not the table
    let monthlyPaymentTag = document.getElementById("monthlyPayment");
    let mPayment = results[0].monthlyPayment.toFixed(2);
    monthlyPaymentTag.innerHTML = USDollar.format(mPayment);

    let totalPrincipalTag = document.getElementById("totalPrincipal");
    let loanAmount = document.getElementById("loanAmount").value;
    let lAmount =  USDollar.format(loanAmount);
    totalPrincipalTag.innerHTML =lAmount;

    let totalInterestTag = document.getElementById("totalInterest");
    let tInterest =  USDollar.format(totalInterest);
    totalInterestTag.innerHTML = tInterest;

    let totalCostTag = document.getElementById("totalCost");
    let tCost = USDollar.format(totalCost);
    totalCostTag.innerHTML = tCost;

    // see the code link
    let codeLink = document.getElementById("codeLink");
    codeLink.innerHTML = '<a href="code.html">See The Code</a>';
}
                
            

This code is structured in three functions.

The first section of code handles the select list and button. When you click the button, the version of the code you chose to run will execute.

The next getValues function gets the values from the number and text input fields. It also makes a few checks to see if the numbers entered are valid. Finally it will call on a couple of "helper" functions explained below.

The first helper function is called generateResults. This function will generate a list of numbers in between and including the starting and ending numbers and put them into an array to be passed on later. Then it will replace the first multiple(number), with the first replaced word. The second multiple(number) will be replaced by the second word. Finally, the numbers that are a multiple of both the first and second number are replaced with both words.
Note that there are three versions of this code, which are the three choices displayed in the dropdown list.

The second helper function is called displayResults. This will take the results in the array, put them in some html code, and then inject them into the web page for display.

In summary, once the getValues function gets the values from the number and text fields and checks to make sure those inputs are valid, it calls the generateResults function to generate the numbers array and replace the multiples with the words entered in the text fields. Finally it calls the displayResults function to display the array passed on from the generateResults function into the web page.

Please contact me if you have any questions and/or would like to discuss my skill set and qualifications.