➕ feat: add html form JS

semana-7/tip-calculator/index.html

@@ -31,18 +31,10 @@
           </div>
           <div>
             <p class="text-title">Select Tip %</p>
-            <div class="container-percentage grid grid-cols-2 gap-3">
-              <button>5%</button>
-              <button>10%</button>
-              <button>15%</button>
-              <button>25%</button>
-              <button>50%</button>
-              <input
-                type="text"
-                class="outline-none p-2 bg-[#F3F8FB] rounded-md"
-                placeholder="Custom"
-              />
-            </div>
+            <div
+              id="container-percentage"
+              class="container-percentage grid grid-cols-2 gap-3"
+            ></div>
           </div>
           <div>
             <label for="input-people" class="text-title"

semana-7/tip-calculator/js/app.js

@@ -1,6 +1,35 @@
 const containerBill = document.querySelector("#contailer-bill");
+const containerPercentages = document.querySelector("#container-percentage");
 const inputBill = document.querySelector("#input-bill");
 
+// array con los valores de los botons
+const percentages = [
+  {
+    type: "button",
+    value: "5%",
+  },
+  {
+    type: "button",
+    value: "10%",
+  },
+  {
+    type: "button",
+    value: "20%",
+  },
+  {
+    type: "button",
+    value: "25%",
+  },
+  {
+    type: "button",
+    value: "50%",
+  },
+  {
+    type: "input",
+    value: "0",
+  },
+];
+
 // click
 containerBill.onclick = function () {
   inputBill.focus();
@@ -19,3 +48,27 @@ inputBill.onkeyup = function (event) {
     this.value = inputValue.slice(0, -1);
   }
 };
+
+function renderButton(text) {
+  return `<button>${text}</button>`;
+}
+
+function renderInput() {
+  return `<input
+            type="text"
+            class="outline-none p-2 bg-[#F3F8FB] rounded-md"
+            placeholder="Custom"
+          />`;
+}
+
+// paso 1 es limpiar el contenido del container
+containerPercentages.innerHTML = "";
+
+percentages.forEach(function (percentage) {
+  const html =
+    percentage.type === "button"
+      ? renderButton(percentage.value)
+      : renderInput();
+
+  containerPercentages.innerHTML += html;
+});