Implement computation

This commit is contained in:
Gabriel Augendre 2022-10-08 20:17:22 +02:00
parent 3af2ea3966
commit 8394ffa2e0
2 changed files with 62 additions and 6 deletions

View file

@ -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
View file

@ -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;
}