feat - utilizando função para calcular

wesleyanjoszero · wesleyanjoszero · commit 4cb97a1f940c · 2025-04-26T13:19:00.000-03:00
diff --git a/Tabuada/css/style.css b/Tabuada/css/style.css
@@ -9,95 +9,6 @@ body {
     background-color: #f2f2f2;
 }
 
-.title {
-    text-transform: uppercase;
-    text-shadow: 2px 2px 2px #0002;
-}
-
-.title a {
-    color: #d07335;
-}
-
-.content-center {
-    width: 100%;
-    max-width: 300px;
-    margin: auto;
-    padding: 25px;
-    background-color: #fff;
-    border-radius: 15px;
-    box-shadow: 6px 6px 6px #0004;
-}
-
-.content-center .text-center {
-    text-align: center;
-}
-
-.content-center img {
-    width: 70%;
-}
-
-.content-center form {
-    margin: 20px;
-}
-
-.content-center input,
-.content-center button {
-    width: 100%;
-    padding: 10px 5px;
-    border: none;
-    outline: none;
-}
-
-.content-center input {
-    border-bottom: 2px solid #ccc;
-    margin-bottom: 10px;
-}
-
-.content-center input:focus {
-    border-bottom-color: #d07335;
-}
-
-.content-center button {
-    background-color: #d07335;
-    color: #fff;
-    border-radius: 5px;
-}
-
-.content-center button:hover {
-    background-color: #b55b28;
-    cursor: pointer;
-}
-
-.content-center button:active {
-    background-color: #c14e0e;
-}
-
-header a {
-    color: #666;
-    text-decoration: none;
-}
-
-header a:visited {
-    color: #000;
-}
-
-header a:hover {
-    text-decoration: underline;
-}
-
-header h1 {
-    font-size: 2.5em;
-    text-align: center;
-    margin: 50px auto;
-}
-
-footer {
-    font-size: 0.8em;
-    text-align: center;
-    margin: 20px auto;
-}
-
-
 .content-tab {
     width: 100%;
     text-align: center;
@@ -127,3 +38,8 @@ footer {
     background-color: rgba(0, 0, 0, .15);
     cursor: pointer;
 }
+
+#valueA {
+    width: 100%;
+    padding: 10px;
+}
diff --git a/Tabuada/index.html b/Tabuada/index.html
@@ -8,6 +8,7 @@
 </head>
 <body>
     <div class="content-tab">
+        <input type="number" id="valueA" value="0">
         <table id="tab">
             <thead>
                 <tr>
diff --git a/Tabuada/js/script.js b/Tabuada/js/script.js
@@ -1,21 +1,27 @@
-let tab = document.querySelector('#tab tbody')
-let valueA = 5
-tab.innerHTML = ''
-
-for (let valueB = 0; valueB <= 10; valueB++) {
+function calc() {
+    let tab = document.querySelector('#tab tbody')
+    let valueA = parseInt(document.querySelector('#valueA').value)
+    tab.innerHTML = ''
+        
+    for (let valueB = 0; valueB <= 10; valueB++) {
     let r = valueA * valueB
-    
-    let tpl = `
-                <tr>
-                    <td>${valueA}</td>
-                    <td>X</td>
-                    <td>${valueB}</td>
-                    <td>=</td>
-                    <td>${r}</td>
-                </tr>
-            `
-    
-    let tr = document.createElement('tr')
-    tr.innerHTML = tpl
-    tab.append(tr)
-}
+        
+        let tpl = `
+        <tr>
+                        <td>${valueA}</td>
+                        <td>X</td>
+                        <td>${valueB}</td>
+                        <td>=</td>
+                        <td>${r}</td>
+                        </tr>
+                        `
+                        
+            let tr = document.createElement('tr')
+            tr.innerHTML = tpl
+            tab.append(tr)
+        }
+}
+
+calc()
+
+document.querySelector('#valueA').addEventListener('change', calc)
