initial commit

Sln-GR · web-flow · commit db088e76c2d9 · 2024-10-28T23:12:46.000-03:00
diff --git a/index.html b/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Calculadora Básica</title>
+    <link rel="stylesheet" href="./main.css">
+</head>
+<body>
+    <form onsubmit="handlerSubmit(event)" class="container">
+        <div class="input-values">
+            <label>Value 1:
+                <input id="value-1" name="value1" type="number">
+            </label>
+
+            <label for="value-2">Value 2: 
+                <input id="value-2" type="number">
+            </label>
+        </div>
+        <div class="options">
+            <h3>Options</h3>
+            <ul>
+                <li>
+                    <input type="radio" name="chosen-option" id="sum">
+                    <label for="sum">SUM</label>
+                </li>
+                <li>
+                    <input type="radio" name="chosen-option" id="subtraction">
+                    <label for="subtraction">SUBTRACTION</label>
+                </li>
+                <li>
+                    <input type="radio" name="chosen-option" id="multiplication">
+                    <label for="multiplication">MULTIPLICATION</label>
+                </li>
+                <li>
+                    <input type="radio" name="chosen-option" id="division">
+                    <label for="division">DIVISION</label>
+                </li>
+            </ul>
+        </div>
+        <div>
+            <h3>Result</h3>
+            <input id="input-calculate" type="number" readonly>
+            <input id="button" type="submit" value="Calculate" >
+            <button id="button-clear">Clear</button>
+        </div>
+    </form>
+
+    <script src="./main.js"></script>
+</body>
+</html>
diff --git a/main.css b/main.css
@@ -0,0 +1,68 @@
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    font-family: monospace;
+}
+
+body {
+    width: 100%;
+    height: 100vh;
+    background-color: rgb(252, 252, 252);
+    display: grid;
+    place-items: center;
+}
+
+
+.container {
+    background-color: blue;
+    border-radius: 16px;
+    padding: 32px;
+    color: #fff;
+}
+
+.input-values {
+    display: flex;
+    gap: 20px;
+}
+
+.input-values label {
+    font-weight: bold;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+div {
+    margin-bottom: 32px;
+}
+
+
+h3 {
+    margin-bottom: 8px;
+}
+
+ul li {
+    list-style: none;
+    margin-bottom: 5px;
+}
+
+input[type="radio"],
+label {
+    cursor: pointer;
+}
+
+
+#button, 
+input,
+button {
+    padding: 3px;
+}
+
+#button,
+button {
+    color: #fff;
+    font-weight: bold;
+    background-color: #000;
+}
+
diff --git a/main.js b/main.js
@@ -0,0 +1,69 @@
+function handlerSubmit(event) {
+    event.preventDefault()
+
+    const chosenOption = document.querySelector('input[name = "chosen-option"]:checked')
+    console.log(chosenOption)
+    
+
+    const inputSum = event.target[2]
+    const inputSubt = event.target[3]
+    const inputMultp = event.target[4]
+    const inputDiv = event.target[5]
+    const result = event.target[6]
+    const buttonClear = event.target[8]
+
+
+    const val1 = parseFloat(event.target[0].value)
+    const val2 = parseFloat(event.target[1].value)
+
+    
+    if(chosenOption == inputSum) {
+
+        const sum = () => {  
+            return val1 + val2
+        }
+        
+        result.value = sum()
+        
+
+    }else if (chosenOption == inputSubt){
+
+        const subt = () => {
+            return val1 - val2
+        }
+
+        result.value = subt()
+
+    }else if (chosenOption == inputMultp){
+
+        const multip = () => {
+            return val1 * val2
+        }
+
+        result.value = multip()
+
+    }else if (chosenOption == inputDiv){
+
+        const divd = () => {
+            return val1 / val2
+        }
+
+        result.value = divd()
+        
+    }
+
+
+    function clearFields() {
+        event.target[0].value = ''
+        event.target[1].value = ''
+        event.target[6].value = ''
+        if(chosenOption){
+            chosenOption.checked = false
+        }
+    }
+
+
+    buttonClear.addEventListener('click', clearFields)
+
+    
+}
