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>