jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

up

Browse source
This commit is contained in:
Ilya Kantor 2017-03-20 21:57:10 +03:00
parent e4db23fa56
commit 4ae129054e
8 changed files with 3 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

0
2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/solution.md Normal file
View file

112
2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/solution.view/index.html Normal file
View file

@ -0,0 +1,112 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
td select,
td input {
width: 150px;
}
#diagram td {
vertical-align: bottom;
text-align: center;
padding: 10px;
}
#diagram div {
margin: auto;
}
</style>
</head>
<body>
Deposit calculator.
<form name="calculator">
<table>
<tr>
<td>Initial deposit</td>
<td>
<input name="money" type="number" value="10000" required>
</td>
</tr>
<tr>
<td>How many months?</td>
<td>
<select name="months">
<option value="3">3 (minimum)</option>
<option value="6">6 (half-year)</option>
<option value="12" selected>12 (one year)</option>
<option value="18">18 (1.5 years)</option>
<option value="24">24 (2 years)</option>
<option value="30">30 (2.5 years)</option>
<option value="36">36 (3 years)</option>
<option value="60">60 (5 years)</option>
</select>
</td>
</tr>
<tr>
<td>Interest per year?</td>
<td>
<input name="interest" type="number" value="5" required>
</td>
</tr>
</table>
</form>
<table id="diagram">
<tr>
<th>Was:</th>
<th>Becomes:</th>
</tr>
<tr>
<th id="money-before"></th>
<th id="money-after"></th>
</tr>
<td>
<div style="background: red;width:40px;height:100px"></div>
</td>
<td>
<div style="background: green;width:40px;height:0" id="height-after"></div>
</td>
</table>
<script>
let form = document.forms.calculator;
form.money.oninput = calculate;
form.months.onchange = calculate;
form.interest.oninput = calculate;
function calculate() {
let initial = +form.money.value;
if (!initial) return;
let interest = form.interest.value * 0.01;
if (!interest) return;
let years = form.months.value / 12;
if (!years) return;
let result = Math.round(initial * (1 + interest * years));
let height = result / form.money.value * 100 + 'px';
document.getElementById('height-after').style.height = height;
document.getElementById('money-before').innerHTML = form.money.value;
document.getElementById('money-after').innerHTML = result;
}
calculate();
</script>
</body>
</html>

89
2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/source.view/index.html Normal file
View file

@ -0,0 +1,89 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
td select,
td input {
width: 150px;
}
#diagram td {
vertical-align: bottom;
text-align: center;
padding: 10px;
}
#diagram div {
margin: auto;
}
</style>
</head>
<body>
Deposit calculator.
<form name="calculator">
<table>
<tr>
<td>Initial deposit</td>
<td>
<input name="money" type="number" value="10000" required>
</td>
</tr>
<tr>
<td>How many months?</td>
<td>
<select name="months">
<option value="3">3 (minimum)</option>
<option value="6">6 (half-year)</option>
<option value="12" selected>12 (one year)</option>
<option value="18">18 (1.5 years)</option>
<option value="24">24 (2 years)</option>
<option value="30">30 (2.5 years)</option>
<option value="36">36 (3 years)</option>
<option value="60">60 (5 years)</option>
</select>
</td>
</tr>
<tr>
<td>Interest per year?</td>
<td>
<input name="interest" type="number" value="5" required>
</td>
</tr>
</table>
</form>
<table id="diagram">
<tr>
<th>Was:</th>
<th>Becomes:</th>
</tr>
<tr>
<th id="money-before"></th>
<th id="money-after"></th>
</tr>
<td>
<div style="background: red;width:40px;height:100px"></div>
</td>
<td>
<div style="background: green;width:40px;height:0" id="height-after"></div>
</td>
</table>
<script>
let form = document.forms.calculator;
// your code
</script>
</body>
</html>

21
2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/task.md Normal file
View file

@ -0,0 +1,21 @@
importance: 5
---
# Deposit calculator
Create an interface that allows to enter a sum of bank deposit and percentage, then calculates how much it will be after given periods of time.
Here's the demo:
[iframe src="solution" height="350" border="1"]
Any input change should be processed immediately.
The formula is:
```js
// initial: the initial money sum
// interest: e.g. 0.05 means 5% per year
// years: how many years to wait
let result = Math.round(initial * (1 + interest * years));
```