Skip to content

Instantly share code, notes, and snippets.

@BrodyCur

BrodyCur/gist:f650a181e67dec3bc78aac4673773583

Created June 20, 2019 20:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save BrodyCur/f650a181e67dec3bc78aac4673773583 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save BrodyCur/f650a181e67dec3bc78aac4673773583 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. BrodyCur renamed this gist Jun 20, 2019. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → gistfile1.html
    View file
    File renamed without changes.
  2. BrodyCur created this gist Jun 20, 2019.
    67 changes: 67 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,67 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Calculator</title>
    </head>
    <body>
    <form>
    <p>Starting Value: <input type="number" name="startingVal" id="startingVal"><br></p>
    <p>Age: <select max="65" name="age" id="age"></select></p>
    </form>

    <div>
    <p>Total: $</p>
    <p id="result"></p>
    </div>

    <script>
    ///////////////////// "ESSENTIAL COMPLEXITY" (BUSINESS LOGIC) OF THE PROBLEM /////////////////////

    // CALCULATING RETURN TOTAL
    function calculateReturn(amount, age) {
    const monthUntilRetirement = (65 - age) * 12;
    const interestRate = 1 + 0.07 / 12;
    return (amount * (interestRate ** monthUntilRetirement)).toFixed(2)
    }


    // TEST CALCULATING RETURN TOTAL
    function testCalculateReturn(){
    const expected = "42.56"
    const result = calculateReturn(3, 27)
    return {
    expected: expected,
    result: result,
    passed: (result === expected)
    };
    }
    console.log("Calculate Return:", testCalculateReturn())


    ///////////////////// "INCIDENTAL COMPLEXITY" {SOLUTION IMPLEMENTATION} OF THE PROBLEM /////////////////////


    // IMPERATIVELY ADDING OPTIONS TO SELECT AGE FIELD
    const select = document.querySelector("#age");
    for(let i = 1; i <= 65; i++){
    let option = document.createElement("OPTION");
    select.options.add(option);
    option.text = i;
    option.value = i;
    }


    // HANDLE FORM CHANGES
    const form = document.querySelector('form');
    form.addEventListener('input', function(){
    const amount = document.querySelector('#startingVal').value;
    const select = document.getElementById('age');
    const age = parseInt(select.options[select.selectedIndex].value);

    document.querySelector('#result').innerText = 'Total: $';
    document.querySelector('#result').innerHTML = calculateReturn(amount, age);
    })
    </script>
    </body>
    </html>