Implement computation
This commit is contained in:
parent
3af2ea3966
commit
8394ffa2e0
2 changed files with 62 additions and 6 deletions
30
index.html
30
index.html
|
@ -3,15 +3,33 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Doses</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
html {
|
||||
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Doses converter</h1>
|
||||
<label for="proof">Proof (%)</label>
|
||||
<input type="number" id="proof" value="40">
|
||||
<label for="volume">Volume (cl)</label>
|
||||
<input type="number" id="volume" value="10">
|
||||
<label for="dose">Dose</label>
|
||||
<input type="number" id="dose" value="3.2">
|
||||
|
||||
<p>
|
||||
<label for="proof">Proof (%)</label>
|
||||
<input type="number" id="proof" value="40">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="volume">Volume (cl)</label>
|
||||
<input type="number" id="volume" value="10">
|
||||
<button id="compute-volume">Compute</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="dose">Dose</label>
|
||||
<input type="number" id="dose" value="3.2">
|
||||
<button id="compute-dose">Compute</button>
|
||||
</p>
|
||||
|
||||
<script src="main.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
38
main.js
38
main.js
|
@ -0,0 +1,38 @@
|
|||
const computeVolumeButton = document.getElementById("compute-volume");
|
||||
computeVolumeButton.addEventListener("click", () => {
|
||||
const dose = getDoseValue();
|
||||
const proof = getProofValue();
|
||||
const volume = (dose * 100) / 0.8 / proof;
|
||||
setVolumeValue(volume.toFixed(2));
|
||||
});
|
||||
const computeDoseButton = document.getElementById("compute-dose");
|
||||
computeDoseButton.addEventListener("click", () => {
|
||||
const volume = getVolumeValue();
|
||||
const proof = getProofValue();
|
||||
const dose = (volume / 100) * 0.8 * proof;
|
||||
setDoseValue(dose.toFixed(2));
|
||||
});
|
||||
|
||||
const proofInput = document.getElementById("proof");
|
||||
const volumeInput = document.getElementById("volume");
|
||||
const doseInput = document.getElementById("dose");
|
||||
|
||||
function getProofValue() {
|
||||
return parseFloat(proofInput.value);
|
||||
}
|
||||
|
||||
function getVolumeValue() {
|
||||
return parseFloat(volumeInput.value);
|
||||
}
|
||||
|
||||
function setVolumeValue(value) {
|
||||
volumeInput.value = value;
|
||||
}
|
||||
|
||||
function getDoseValue() {
|
||||
return parseFloat(doseInput.value);
|
||||
}
|
||||
|
||||
function setDoseValue(value) {
|
||||
doseInput.value = value;
|
||||
}
|
Loading…
Reference in a new issue