➕ feat: onclick in html

linder3hs · Mar 14, 2024 · d3cb8e0 · d3cb8e0
1 parent 6c58d93
commit d3cb8e0
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 10 deletions.
diff --git a/semana-7/tip-calculator/css/style.css b/semana-7/tip-calculator/css/style.css
@@ -25,7 +25,7 @@ main {
   gap: 50px;
 }
 
-form {
+.form {
   background-color: #fff;
   padding: 40px;
   border-radius: 16px;

diff --git a/semana-7/tip-calculator/index.html b/semana-7/tip-calculator/index.html
@@ -20,7 +20,7 @@
       <div class="p-6">
         <img src="./images/logo.svg" alt="" />
       </div>
-      <form class="w-full border h-full md:h-auto xl:w-[800px]">
+      <div class="form w-full border h-full md:h-auto xl:w-[800px]">
         <div>
           <div>
             <label for="input-bill" class="text-title">Bill</label>
@@ -73,7 +73,7 @@
             </button>
           </div>
         </div>
-      </form>
+      </div>
     </main>
   </body>
 </html>
diff --git a/semana-7/tip-calculator/js/app.js b/semana-7/tip-calculator/js/app.js
@@ -14,7 +14,7 @@ const percentages = [
   },
   {
     type: "button",
-    value: "20%",
+    value: "15%",
   },
   {
     type: "button",
@@ -49,13 +49,18 @@ inputBill.onkeyup = function (event) {
   }
 };
 
-function renderButton(text) {
-  return `<button>${text}</button>`;
+function setButtonTip(element) {
+  console.log(element);
 }
 
-function renderInput() {
+function renderButton(text, index) {
+  return `<button onclick="setButtonTip(this)" id="button-percentage-${index}">${text}</button>`;
+}
+
+function renderInput(index) {
   return `<input
             type="text"
+            id="input-percentage-${index}"
             class="outline-none p-2 bg-[#F3F8FB] rounded-md"
             placeholder="Custom"
           />`;
@@ -64,11 +69,11 @@ function renderInput() {
 // paso 1 es limpiar el contenido del container
 containerPercentages.innerHTML = "";
 
-percentages.forEach(function (percentage) {
+percentages.forEach(function (percentage, index) {
   const html =
     percentage.type === "button"
-      ? renderButton(percentage.value)
-      : renderInput();
+      ? renderButton(percentage.value, index)
+      : renderInput(index);
 
   containerPercentages.innerHTML += html;
 });