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