Tabuada

├── index.html ├── js └── scripts.js └── css └── styles.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tabuada 8 | 9 | 10 | 11 | 12 |

Digite o número e confirme para gerar uma tabuada

13 | 29 |

30 |

Tabuada do número:

31 |

32 |

Informe um número para calcular uma tabuada...

33 |

34 |

35 | 36 | 37 | -------------------------------------------------------------------------------- /js/scripts.js: -------------------------------------------------------------------------------- 1 | // Seleção de elementos 2 | const multiplicationForm = document.querySelector("#multiplication-form"); 3 | const numberInput = document.querySelector("#number"); 4 | const multiplicationInput = document.querySelector("#multiplicator"); 5 | 6 | const multiplicationTitle = document.querySelector( 7 | "#multiplication-title span" 8 | ); 9 | const multiplicationTable = document.querySelector( 10 | "#multiplication-operations" 11 | ); 12 | 13 | // Funções 14 | const createTable = (number, multiplicatorNumber) => { 15 | multiplicationTable.innerHTML = ""; 16 | 17 | for (i = 1; i <= multiplicatorNumber; i++) { 18 | const result = number * i; 19 | 20 | const template = `

21 |

${number} x ${i} =

22 |

${result}

23 |

`; 24 | 25 | const parser = new DOMParser(); 26 | const htmlTemplate = parser.parseFromString(template, "text/html"); 27 | const row = htmlTemplate.querySelector(".row"); 28 | 29 | multiplicationTable.appendChild(row); 30 | } 31 | 32 | multiplicationTitle.innerText = number; 33 | }; 34 | 35 | // Eventos 36 | multiplicationForm.addEventListener("submit", (e) => { 37 | e.preventDefault(); 38 | 39 | const multiplicationNumber = numberInput.value; 40 | 41 | const multiplicatorNumber = +multiplicationInput.value; 42 | 43 | if (!multiplicationNumber || !multiplicatorNumber) return; 44 | 45 | createTable(multiplicationNumber, multiplicatorNumber); 46 | }); 47 | -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | font-family: Helvetica; 5 | } 6 | 7 | body { 8 | text-align: center; 9 | padding: 2rem; 10 | min-height: 100vh; 11 | background: linear-gradient(180deg, #db4444 0%, #3f24dd 98%); 12 | color: #fff; 13 | } 14 | 15 | h2 { 16 | margin-bottom: 1rem; 17 | } 18 | 19 | #multiplication-form { 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | flex-wrap: wrap; 24 | margin: 1rem auto; 25 | padding: 1rem; 26 | max-width: 300px; 27 | background-color: #fff; 28 | border-radius: 1rem; 29 | color: #333; 30 | } 31 | 32 | .form-control { 33 | display: flex; 34 | flex-direction: column; 35 | align-items: center; 36 | width: 100px; 37 | margin: 0 1rem; 38 | } 39 | 40 | .form-control label { 41 | margin-bottom: 0.6rem; 42 | font-size: 0.8rem; 43 | font-weight: bold; 44 | } 45 | 46 | .form-control input { 47 | margin-bottom: 1rem; 48 | flex: 1; 49 | padding: 0.6rem 0.4rem; 50 | border: none; 51 | width: 50px; 52 | border: 1px solid #333; 53 | border-radius: 5px; 54 | text-align: center; 55 | } 56 | 57 | #multiplication-form input[type="submit"] { 58 | max-height: 50px; 59 | padding: 0.6rem 1.2rem; 60 | width: 200px; 61 | background-color: #333; 62 | color: #fff; 63 | border: 1px solid #333; 64 | border-radius: 5px; 65 | cursor: pointer; 66 | font-weight: bold; 67 | } 68 | 69 | #multiplication-operations { 70 | display: flex; 71 | flex-direction: column; 72 | align-items: center; 73 | max-width: 300px; 74 | margin: 1rem auto; 75 | padding: 2rem 1rem; 76 | background-color: #fff; 77 | border-radius: 1rem; 78 | color: #333; 79 | } 80 | 81 | #multiplication-operations .row { 82 | display: flex; 83 | justify-content: center; 84 | border: 1px solid #ccc; 85 | border-bottom: none; 86 | padding: 0.5rem; 87 | width: 150px; 88 | text-align: center; 89 | } 90 | 91 | #multiplication-operations .row:last-child { 92 | border-bottom: 1px solid #ccc; 93 | } 94 | 95 | #multiplication-operations .result { 96 | margin-left: 0.4rem; 97 | } 98 | --------------------------------------------------------------------------------