Add couscous calculator

couscous-calculator/index.html

@@ -0,0 +1,29 @@
+---
+title: Couscous Calculator
+tagline: Calculate couscous/water ratio
+layout: default
+---
+
+<label class="mdc-text-field mdc-text-field--outlined">
+  <span class="mdc-notched-outline">
+    <span class="mdc-notched-outline__leading"></span>
+    <span class="mdc-notched-outline__notch">
+      <span class="mdc-floating-label" id="couscous-label-id">Couscous</span>
+    </span>
+    <span class="mdc-notched-outline__trailing"></span>
+  </span>
+  <input id="couscous" type="number" class="mdc-text-field__input" aria-labelledby="couscous-label-id" value="250">
+  <span class="mdc-text-field__affix mdc-text-field__affix--suffix">g</span>
+</label>
+
+<label class="mdc-text-field mdc-text-field--outlined">
+  <span class="mdc-notched-outline">
+    <span class="mdc-notched-outline__leading"></span>
+    <span class="mdc-notched-outline__notch">
+      <span class="mdc-floating-label" id="water-label-id">Water</span>
+    </span>
+    <span class="mdc-notched-outline__trailing"></span>
+  </span>
+  <input id="water" type="number" class="mdc-text-field__input" aria-labelledby="water-label-id" value="313">
+  <span class="mdc-text-field__affix mdc-text-field__affix--suffix">ml</span>
+</label>

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);
+});

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