Created
July 1, 2019 09:54
-
-
Save umbreonight/9a752f1b50ec9c3b8a42fb8e0ae14bd6 to your computer and use it in GitHub Desktop.
Front End Test - Darren van Reenen
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<title>Document</title> | |
</head> | |
<body> | |
<div id="container"> | |
<label for="inputLumpSumInvestmentMonth">Lump Sum Investment Month</label> | |
<select name="cars" id="inputLumpSumInvestmentMonth"> | |
<option value="1">March</option> | |
<option value="2">April</option> | |
<option value="3">May</option> | |
<option value="4">June</option> | |
<option value="5">July</option> | |
<option value="6">August</option> | |
<option value="7">September</option> | |
<option value="8">October</option> | |
<option value="9">November</option> | |
<option value="10">December</option> | |
<option value="11">January</option> | |
<option value="12">February</option> | |
</select> | |
<label for="inputLumpSumInvestmentAmount">Lump Sum Investment Amount</label> | |
<input type="number" name="number-input" id="inputLumpSumInvestmentAmount"> | |
<label for="inputDebitOrderStartMonth">Debit Order Start Month</label> | |
<select name="cars" id="inputDebitOrderStartMonth"> | |
<option value="1">March</option> | |
<option value="2">April</option> | |
<option value="3">May</option> | |
<option value="4">June</option> | |
<option value="5">July</option> | |
<option value="6">August</option> | |
<option value="7">September</option> | |
<option value="8">October</option> | |
<option value="9">November</option> | |
<option value="10">December</option> | |
<option value="11">January</option> | |
<option value="12">February</option> | |
</select> | |
<label for="inputDebitOrderAmount">Debit Order Amount</label> | |
<input type="number" name="number-input" id="inputDebitOrderAmount"> | |
<p id="message"></p> | |
<button id="btnValidate">Validate</button> | |
<button id="toggle-results">Toggle Results</button> | |
<br> | |
<div id="results"> | |
<h4>Results</h4> | |
<p id="totalContributionText"></p> | |
<p id="earliestPermissibleDebitOrderStartMonthText"></p> | |
</div> | |
</div> | |
<style> | |
label, | |
select, | |
input { | |
display: block; | |
width: 100%; | |
} | |
label { | |
margin: 15px 0 5px 0; | |
} | |
button { | |
margin-top: 20px; | |
} | |
#container { | |
width: 400px; | |
margin: 0 auto; | |
} | |
#message { | |
color: red; | |
font-size: 16px; | |
line-height: 1.2; | |
} | |
#view-results { | |
padding: 10px 0; | |
} | |
#results { | |
display: none; | |
} | |
#results.is-open { | |
display: block; | |
} | |
</style> | |
<script> | |
function validateInvestments(LumpSumInvestmentMonth, LumpSumInvestmentAmount, DebitOrderStartMonth, | |
DebitOrderAmount) { | |
const MaxContributions = 30000; | |
const MaxMonths = 12; | |
const msg = document.getElementById('message'); | |
var EarliestPermissibleDebitOrderStartMonth; | |
var DebitOrderTotal = DebitOrderAmount * (MaxMonths - (DebitOrderStartMonth - 1)); | |
var TotalContributions; | |
if (LumpSumInvestmentAmount > MaxContributions) { | |
msg.innerText = 'Lump sum invenstment amount exceeds R30 000 limit'; | |
} else if (DebitOrderAmount > 2500) { | |
msg.innerText = 'Debit order amount exceeds R2 500 limit'; | |
} else if (DebitOrderStartMonth <= LumpSumInvestmentMonth) { | |
msg.innerText = 'Debit order month must follow Lump sum investment month'; | |
} else { | |
msg.innerText = ''; | |
} | |
// EarliestPermissibleDebitOrderStartMonth | |
function calculateEarliestPermissibleDebitOrderStartMonth() { | |
EarliestPermissibleDebitOrderStartMonth = DebitOrderStartMonth; | |
while (DebitOrderTotal > (MaxContributions - LumpSumInvestmentAmount)) { | |
DebitOrderTotal = DebitOrderAmount * (MaxMonths - EarliestPermissibleDebitOrderStartMonth); | |
EarliestPermissibleDebitOrderStartMonth += 1; | |
} | |
return EarliestPermissibleDebitOrderStartMonth; | |
} | |
TotalContributions = DebitOrderTotal + LumpSumInvestmentAmount; | |
EarliestPermissibleDebitOrderStartMonth = calculateEarliestPermissibleDebitOrderStartMonth(); | |
if ((DebitOrderStartMonth < EarliestPermissibleDebitOrderStartMonth) && (TotalContributions >= | |
MaxContributions)) { | |
alert('This application is invalid.'); | |
} else { | |
alert('This is a valid application.'); | |
} | |
return { | |
TotalContributions: TotalContributions, | |
EarliestPermissibleDebitOrderStartMonth: EarliestPermissibleDebitOrderStartMonth | |
}; | |
} | |
document.getElementById("btnValidate").addEventListener("click", function () { | |
let LumpSumInvestmentMonth = parseInt(document.getElementById('inputLumpSumInvestmentMonth').value), | |
LumpSumInvestmentAmount = parseFloat(document.getElementById('inputLumpSumInvestmentAmount') | |
.value), | |
DebitOrderStartMonth = parseInt(document.getElementById('inputDebitOrderStartMonth').value), | |
DebitOrderAmount = parseFloat(document.getElementById('inputDebitOrderAmount').value); | |
var results = validateInvestments(LumpSumInvestmentMonth, LumpSumInvestmentAmount, | |
DebitOrderStartMonth, DebitOrderAmount); | |
const totalContributionText = document.getElementById('totalContributionText'); | |
const earliestPermissibleDebitOrderStartMonthText = document.getElementById( | |
'earliestPermissibleDebitOrderStartMonthText'); | |
totalContributionText.innerHTML = 'Total Contributions: R' + results.TotalContributions; | |
switch (results.EarliestPermissibleDebitOrderStartMonth) { | |
case 1: | |
results.EarliestPermissibleDebitOrderStartMonth = 'March'; | |
break; | |
case 2: | |
results.EarliestPermissibleDebitOrderStartMonth = 'April'; | |
break; | |
case 3: | |
results.EarliestPermissibleDebitOrderStartMonth = 'May'; | |
break; | |
case 4: | |
results.EarliestPermissibleDebitOrderStartMonth = 'June'; | |
break; | |
case 5: | |
results.EarliestPermissibleDebitOrderStartMonth = 'July'; | |
break; | |
case 6: | |
results.EarliestPermissibleDebitOrderStartMonth = 'August'; | |
break; | |
case 7: | |
results.EarliestPermissibleDebitOrderStartMonth = 'September'; | |
break; | |
case 8: | |
results.EarliestPermissibleDebitOrderStartMonth = 'October'; | |
break; | |
case 9: | |
results.EarliestPermissibleDebitOrderStartMonth = 'November'; | |
break; | |
case 10: | |
results.EarliestPermissibleDebitOrderStartMonth = 'December'; | |
break; | |
case 11: | |
results.EarliestPermissibleDebitOrderStartMonth = 'January'; | |
break; | |
case 12: | |
results.EarliestPermissibleDebitOrderStartMonth = 'February'; | |
break; | |
default: | |
break; | |
} | |
earliestPermissibleDebitOrderStartMonthText.innerHTML = | |
'Earliest permissible debot order start month: ' + results | |
.EarliestPermissibleDebitOrderStartMonth; | |
}); | |
const results = document.getElementById('results'); | |
document.getElementById('toggle-results').addEventListener("click", function () { | |
results.classList.toggle("is-open"); | |
}); | |
</script> | |
<!-- <script src="./index.js"></script> --> | |
<!-- <script src="./testFunction.js"></script> --> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment