Skip to content

Instantly share code, notes, and snippets.

@umbreonight

umbreonight/index.html

Created July 1, 2019 09:54
Show Gist options
  • Save umbreonight/9a752f1b50ec9c3b8a42fb8e0ae14bd6 to your computer and use it in GitHub Desktop.
Save umbreonight/9a752f1b50ec9c3b8a42fb8e0ae14bd6 to your computer and use it in GitHub Desktop.
Download ZIP
Front End Test - Darren van Reenen
Raw
index.html
<!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