From 87347cc4c541ce75955bbee3967d8c1845eacff3 Mon Sep 17 00:00:00 2001 From: Kit Date: Wed, 3 Jul 2024 20:34:14 +0100 Subject: [PATCH] Add couscous calculator --- couscous-calculator/index.html | 29 +++++++++++++++++++++++++++++ couscous-calculator/scripts.js | 16 ++++++++++++++++ couscous-calculator/styles.css | 14 ++++++++++++++ 3 files changed, 59 insertions(+) create mode 100644 couscous-calculator/index.html create mode 100644 couscous-calculator/scripts.js create mode 100644 couscous-calculator/styles.css diff --git a/couscous-calculator/index.html b/couscous-calculator/index.html new file mode 100644 index 0000000..467996c --- /dev/null +++ b/couscous-calculator/index.html @@ -0,0 +1,29 @@ +--- +title: Couscous Calculator +tagline: Calculate couscous/water ratio +layout: default +--- + + + + diff --git a/couscous-calculator/scripts.js b/couscous-calculator/scripts.js new file mode 100644 index 0000000..f609013 --- /dev/null +++ b/couscous-calculator/scripts.js @@ -0,0 +1,16 @@ +const waterEl = document.getElementById('water'); +const couscousEl = document.getElementById('couscous'); + +const ratio = 100 / 125; + +waterEl.addEventListener('input', () => { + const waterQuantity = parseInt(waterEl.value, 10); + const lentilQuantity = waterQuantity * ratio; + couscousEl.value = Math.round(lentilQuantity); +}); + +couscousEl.addEventListener('input', () => { + const lentilQuantity = parseInt(couscousEl.value, 10); + const waterQuantity = lentilQuantity / ratio; + waterEl.value = Math.round(waterQuantity); +}); diff --git a/couscous-calculator/styles.css b/couscous-calculator/styles.css new file mode 100644 index 0000000..bb83922 --- /dev/null +++ b/couscous-calculator/styles.css @@ -0,0 +1,14 @@ +.mdc-text-field { + margin: 0.5rem; + width: 7rem; +} + +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +input[type=number] { + -moz-appearance:textfield; +}