BrodyCur/gist:f650a181e67dec3bc78aac4673773583

## gistfile1.html
<!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>
	<!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>