<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Weekly Salary</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body onload="showSalaries();">
<h1>Weekly Salary</h1>
<form onsubmit="newSale(this);return false;" autocomplete="off">
<label>Gross Weekly Sales<label>
<input name="sales" required="" pattern="^\d*$" title="Positive numbers only!" autofocus=""/>
<button>Submit</button>
</form>
<table border="1" cellspacing="0" cellpadding="5" style="margin-top:10px;">
<thead>
<tr>
<th>Salaries</th>
<th>No# of Salesperson</th>
</tr>
</thead>
<tbody id="out"/>
</table>
<script>
var fixedSalary = 200;
var commissionRate = 0.09;
var lastBracket = 1000;
var rangeLimit = 100;
var salaries = new Array();
var out = document.getElementById('out');
function newSale(form){
var sales = parseInt(form.sales.value,10);
if(isNaN(sales) || 0 > sales){
alert('Invalid sales!');
return;
}
form.sales.value = '';
var commission = sales * commissionRate;
var salary = fixedSalary + commission;
salary = Math.round(salary);
var index = calcIndex(salary);
console.log(salary, index);
var count = 1;
if(undefined !== salaries[index]){
count += salaries[index];
}
salaries[index] = count;
showSalaries();
}
function calcIndex(salary){
var curIndex = Math.round((salary-fixedSalary)/rangeLimit);
var maxIndex = Math.round((lastBracket-fixedSalary)/rangeLimit);
return Math.min(curIndex, maxIndex);
}
function showSalaries(){
var limit;
var iHtml = '';
var count, index;
for(var salary = fixedSalary; lastBracket >= salary; salary += rangeLimit){
limit = salary + rangeLimit - 1;
limit = ' - $' + limit;
if(salary === lastBracket){
limit = ' and over';
}
limit = salary + limit;
count = 0;
index = calcIndex(salary);
if(undefined !== salaries[index]){
count = salaries[index];
}
iHtml += '<tr><td>$'+limit+'</td><td>'+count+'</td></tr>';
}
out.innerHTML = iHtml;
}
</script>
</body>
</html>
Download
Comments
Post a Comment