aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--index.html164
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">
+ &nbsp;=&nbsp;
+ <input type="number" id="b" placeholder="B">
+ </div>
+ <div class="section">
+ <input type="number" id="c" placeholder="C">
+ &nbsp;=&nbsp;
+ <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>