diff options
| -rw-r--r-- | index.html | 164 |
1 files changed, 164 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..ffad65e --- /dev/null +++ b/index.html @@ -0,0 +1,164 @@ +<!DOCTYPE html> +<html> + <head lang="pt"> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <style type="text/css" media="screen"> +/* Resettings some html properties */ +html, body, div, h1, header,section{ + margin: 0; + padding: 0; + border: 0; +} + +h1 { + font-size: 1.25rem; + color: #fff; + text-transform: uppercase; +} + +ul { + margin: 0; +} +body { + font-family: sans-serif; + background-color: #f4f4f4; +} + +header { + position: relative; + margin: auto; + margin-bottom: 20px; + background: #0062cc; + padding: 10px; + max-width: 900px; +} + +nav { + position: absolute; + top: 10px; + right: 10px; +} + +.warning { + font-size: small; + color: red; + visibility: hidden; +} + +.btn { + display: inline-block; + padding: .1rem .75rem; + background: #e9ecef; + border: #343a40 1px solid; + font-size: .9rem; + font-weight: 400; + line-height: 1.5; + cursor: pointer; + color: #000; + border-radius: 0; + text-transform: lowercase; +} + +nav li { + display: inline; + margin: 0 0 0 0; +} + +.section { + justify-content: center; + margin-bottom: 20px; + display: flex; +} + +main { + width: 50%; + margin: 0 auto; +} + </style> + </head> + <body> + <header> + <h1>Regra de três</h1> + <nav> + <ul> + <li> + <a class="btn" href="sourcecde">Código fonte</a> + </li> + </ul> + </nav> + </header> + <main> + <div class="section"> + <input type="number" id="a" placeholder="A"> + = + <input type="number" id="b" placeholder="B"> + </div> + <div class="section"> + <input type="number" id="c" placeholder="C"> + = + <input type="number" id="resultado" disabled placeholder="Resultado"> + </div> + <div id="warning" class="section warning"> + <p> + </p> + </div> + <div class="section"> + <input type="button" value="Calcular"onclick="eval()"> + </div> + </main> + + <script> +const aInput = document.getElementById('a') +const bInput = document.getElementById('b') +const cInput = document.getElementById('c') +const resultadoInput = document.getElementById('resultado') +const warningParagraph = document.getElementById('warning') + +function eval() { + const a = aInput.value + const b = bInput.value + const c = cInput.value + + try { + const values = validate(a,b,c) + resultadoInput.value = calculate(...values) + } catch (e) { + warningParagraph.textContent = e + warningParagraph.style.visibility = 'visible'; + setTimeout(() => { + warningParagraph.style.visibility = 'hidden'; + }, 3000) + } +} + +function validate(a, b, c) { + const result = [0,0,0] + + const ra = parseInt(a) + if (isNaN(ra)){ + throw "Valor de A invalido" + } + result[0] = ra + + const rb = parseInt(b) + if (isNaN(rb)){ + throw "Valor de B invalido" + } + result[1] = rb + + const rc = parseInt(c) + if (isNaN(rc)){ + throw "Valor de C invalido" + } + result[2] = rc + + return result +} + +function calculate(a, b, c) { + return (b*c)/a +} + </script> + </body> +</html> |