feat: hellow world 🍕

index.css

@@ -0,0 +1,179 @@
+body {
+    font-family: "Sour Gummy", sans-serif;
+    display: flex;
+    flex-flow: column;
+    place-items: center;
+    place-content: center;
+    position: absolute;
+    inset: 0;
+    gap: 1rem;
+    background-color: #bf873b;
+    font-size: 2rem;
+}
+h1 {
+    font-family: "Pacifico", sans-serif;
+    font-size: 4rem;
+    color: #4f1800;
+    margin: 0;
+}
+h2 {
+    font-size: 2rem;
+    font-weight: bold;
+    color: #752503;
+    margin: 0;
+}
+fieldset {
+    border: none;
+    text-align: center;
+}
+fieldset select {
+    font-family: "Sour Gummy", sans-serif;
+    padding: 5px;
+    text-align: center;
+    background: transparent;
+    border: none;
+    border-bottom: solid 3px #852e00;
+    border-radius: 0;
+    font-size: 2rem;
+    font-weight: bold;
+    color: #4f1800;
+}
+label {
+    display: flex;
+    flex-flow: column;
+    place-content: center;
+    place-items: stretch;
+    width: 40vw;
+    text-align: center;
+    /* Pizza-style range input */
+}
+label > span {
+    display: flex;
+    place-items: baseline;
+    gap: 2rem;
+    margin: -2rem 0;
+}
+#amount-range {
+    -webkit-appearance: none;
+    /* Remove default styling */
+    flex: 1 1 auto;
+    height: 8px;
+    background: linear-gradient(to right, #f77f00, #e63946);
+    border-radius: 10px;
+    outline: none;
+    opacity: 0.9;
+    transition: opacity 0.2s;
+    /* Custom thumb styling */
+    /* Style for Firefox range track */
+}
+#amount-range:hover {
+    opacity: 1;
+}
+#amount-range::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 30px;
+    height: 30px;
+    background-color: #fcbf49;
+    /* Pizza crust color */
+    border: 2px solid #e63946;
+    /* Pizza sauce edge */
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+    background-image: radial-gradient(
+            circle at 8px 8px,
+            #e63946 20%,
+            transparent 22%
+        ),
+        radial-gradient(circle at 22px 22px, #e63946 20%, transparent 22%);
+    background-size: 50% 50%;
+    background-position: center;
+}
+#amount-range::-moz-range-thumb {
+    width: 30px;
+    height: 30px;
+    background-color: #fcbf49;
+    border: 2px solid #e63946;
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+    background-image: radial-gradient(
+            circle at 8px 8px,
+            #e63946 20%,
+            transparent 22%
+        ),
+        radial-gradient(circle at 22px 22px, #e63946 20%, transparent 22%);
+    background-size: 50% 50%;
+    background-position: center;
+}
+#amount-range::-moz-range-track {
+    width: 100%;
+    height: 8px;
+    background: linear-gradient(to right, #f77f00, #e63946);
+    border-radius: 10px;
+}
+#amount {
+    appearance: none;
+    font-family: "Pacifico", sans-serif;
+    padding: 5px;
+    text-align: center;
+    background: transparent;
+    border: none;
+    border-bottom: solid 3px #852e00;
+    border-radius: 0;
+    font-size: 4rem;
+    font-weight: bold;
+    color: #4f1800;
+    width: 100px;
+}
+#amount::-webkit-inner-spin-button,
+#amount::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    margin: 0;
+}
+#result {
+    margin-top: 20px;
+    display: flex;
+    flex-flow: column;
+    gap: 1rem;
+    place-items: center;
+}
+#pizza-amount {
+    font-size: 4rem;
+    font-weight: bold;
+    color: #a90000;
+}
+#pizza-label {
+    font-size: 2rem;
+    font-weight: bold;
+    color: #752503;
+}
+#pizza-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-flow: column wrap;
+    max-height: 375px;
+    gap: 0.3rem;
+}
+#pizza-list li {
+    background-color: #97222b;
+    border-radius: 8px;
+    padding: 0.5rem 1rem;
+    font-size: 18px;
+    font-weight: bold;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    transition: transform 0.3s ease;
+    /* Decorative pizza slice icon */
+}
+#pizza-list li::before {
+    content: "🍕";
+    font-size: 2rem;
+    margin-right: 10px;
+}

index.html

@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <title>RennesJS Pizzas</title>
+        <meta charset="UTF-8" />
+        <meta name="twitter:title" content="RennesJS pizzas" />
+        <meta name="twitter:description" content="..." />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="stylesheet" href="./index.css" />
+    </head>
+    <body>
+        <h1>RennesJS pizza picker</h1>
+        <fieldset>
+            <h2>Pizzas from</h2>
+            <select id="pizza-source">
+                <option value="amour">Amour de pizza</option>
+                <option value="dominos">Domino's pizza</option>
+            </select>
+        </fieldset>
+        <label>
+            <h2>Attendies</h2>
+            <span>
+                <input
+                    id="amount-range"
+                    type="range"
+                    max="100"
+                    min="20"
+                    value="60"
+                />
+                <input
+                    id="amount"
+                    type="number"
+                    max="100"
+                    min="20"
+                    value="60"
+                />
+            </span>
+        </label>
+        <span id="result">
+            <span>
+                <output id="pizza-amount">0</output>
+                <span id="pizza-label">pizzas :</span>
+            </span>
+            <ul id="pizza-list"></ul>
+        </span>
+        <script type="module" src="./index.js"></script>
+    </body>
+</html>

index.js

@@ -0,0 +1,94 @@
+const PIZZA_OPTIONS = {
+  amour: [
+    "5 fromages",
+    "Canadienne",
+    "Chicken chic",
+    "Curry amour",
+    "Délice Amour",
+    "Extra amour",
+    "Fromagère",
+    "Méli amour",
+    "Nordica",
+    "Rustique",
+    "Tartiflette",
+    "Mexico",
+    "Kebab",
+    "Bolognaise",
+    "Raclette",
+  ],
+  dominos: [
+    "Savoyarde",
+    "4 fromages",
+    "Extravaganza",
+    "Bacon Groovy",
+    "Chickenita",
+    "Forestière",
+    "Orientale",
+    "Saumoneta",
+    "Peppina",
+    "Hypnotika",
+    "Cannibale",
+    "Savoyarde",
+    "Bacon chèvre miel",
+  ],
+};
+
+// Function to get the selected pizza list based on the selected option
+function getSelectedPizzaList() {
+  const selectedSource = document.getElementById("pizza-source").value;
+  return PIZZA_OPTIONS[selectedSource] || [];
+}
+
+function getRandomPizzaList(pizzaList) {
+  return pizzaList.slice().sort(() => Math.random() - 0.5);
+}
+
+function calculatePizzas() {
+  const amount = document.getElementById("amount").value;
+  const pizzasToOrder = Math.ceil(amount * 0.3);
+  const vegetarianCount = Math.ceil(pizzasToOrder * 0.15);
+  let remainingPizzas = pizzasToOrder - vegetarianCount;
+
+  document.getElementById("pizza-amount").textContent = pizzasToOrder;
+
+  const pizzaListElement = document.getElementById("pizza-list");
+  pizzaListElement.innerHTML = "";
+
+  // Display Vegetarian pizza count
+  const vegetarianItem = document.createElement("li");
+  vegetarianItem.textContent = `${vegetarianCount} × Végétarienne`;
+  pizzaListElement.appendChild(vegetarianItem);
+
+  // Get the selected and randomized pizza list
+  const randomPizzaList = getRandomPizzaList(getSelectedPizzaList());
+
+  // Distribute remaining pizzas in pairs, in random order
+  for (let i = 0; i < randomPizzaList.length && remainingPizzas > 0; i++) {
+    const count = Math.min(2, remainingPizzas);
+    const listItem = document.createElement("li");
+    listItem.textContent = `${count} × ${randomPizzaList[i]}`;
+    pizzaListElement.appendChild(listItem);
+    remainingPizzas -= count;
+  }
+}
+
+// Synchronize input and range values
+function syncAmountInputs(event) {
+  const value = event.target.value;
+  document.getElementById("amount").value = value;
+  document.getElementById("amount-range").value = value;
+  calculatePizzas();
+}
+
+// Event listeners
+document.getElementById("amount").addEventListener("input", syncAmountInputs);
+document
+  .getElementById("amount-range")
+  .addEventListener("input", syncAmountInputs);
+
+// Update pizza list when selection changes
+document
+  .getElementById("pizza-source")
+  .addEventListener("change", calculatePizzas);
+
+calculatePizzas();