added complex number calculator #103 (#115)

completed #103 please merge that Co-authored-by: Ruan Aragão <[email protected]>
RuanAragao · Oct 30, 2023 · 75eda39 · 75eda39
1 parent 2257fdd
commit 75eda39
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 0 deletions.
diff --git a/calculators/complex-number-calculator/index.html b/calculators/complex-number-calculator/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Complex Number Calculator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="calculator">
+        <h1>Complex Number Calculator</h1>
+        <label for="real1">Real Part (Number 1):</label>
+        <input type="number" id="real1" step="0.01">
+        <label for="imaginary1">Imaginary Part (Number 1):</label>
+        <input type="number" id="imaginary1" step="0.01">
+        <label for="real2">Real Part (Number 2):</label>
+        <input type="number" id="real2" step="0.01">
+        <label for="imaginary2">Imaginary Part (Number 2):</label>
+        <input type="number" id="imaginary2" step="0.01">
+        <button id="addButton">Add</button>
+        <button id="subtractButton">Subtract</button>
+        <button id="multiplyButton">Multiply</button>
+        <button id="divideButton">Divide</button>
+        <div id="result">
+            <p><strong>Result:</strong></p>
+            <p id="resultText"></p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/calculators/complex-number-calculator/script.js b/calculators/complex-number-calculator/script.js
@@ -0,0 +1,62 @@
+document.getElementById("addButton").addEventListener("click", performAddition);
+document.getElementById("subtractButton").addEventListener("click", performSubtraction);
+document.getElementById("multiplyButton").addEventListener("click", performMultiplication);
+document.getElementById("divideButton").addEventListener("click", performDivision);
+
+function getComplexNumber1() {
+    const real1 = parseFloat(document.getElementById("real1").value);
+    const imaginary1 = parseFloat(document.getElementById("imaginary1").value);
+    return { real: real1, imaginary: imaginary1 };
+}
+
+function getComplexNumber2() {
+    const real2 = parseFloat(document.getElementById("real2").value);
+    const imaginary2 = parseFloat(document.getElementById("imaginary2").value);
+    return { real: real2, imaginary: imaginary2 };
+}
+
+function performAddition() {
+    const complex1 = getComplexNumber1();
+    const complex2 = getComplexNumber2();
+    const result = {
+        real: complex1.real + complex2.real,
+        imaginary: complex1.imaginary + complex2.imaginary
+    };
+    displayResult(result);
+}
+
+function performSubtraction() {
+    const complex1 = getComplexNumber1();
+    const complex2 = getComplexNumber2();
+    const result = {
+        real: complex1.real - complex2.real,
+        imaginary: complex1.imaginary - complex2.imaginary
+    };
+    displayResult(result);
+}
+
+function performMultiplication() {
+    const complex1 = getComplexNumber1();
+    const complex2 = getComplexNumber2();
+    const result = {
+        real: complex1.real * complex2.real - complex1.imaginary * complex2.imaginary,
+        imaginary: complex1.real * complex2.imaginary + complex1.imaginary * complex2.real
+    };
+    displayResult(result);
+}
+
+function performDivision() {
+    const complex1 = getComplexNumber1();
+    const complex2 = getComplexNumber2();
+    const denominator = complex2.real * complex2.real + complex2.imaginary * complex2.imaginary;
+    const result = {
+        real: (complex1.real * complex2.real + complex1.imaginary * complex2.imaginary) / denominator,
+        imaginary: (complex1.imaginary * complex2.real - complex1.real * complex2.imaginary) / denominator
+    };
+    displayResult(result);
+}
+
+function displayResult(result) {
+    const resultText = `Result: ${result.real} + ${result.imaginary}i`;
+    document.getElementById("resultText").innerText = resultText;
+}
diff --git a/calculators/complex-number-calculator/style.css b/calculators/complex-number-calculator/style.css
@@ -0,0 +1,60 @@
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #f0f0f0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.calculator {
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+    padding: 20px;
+    text-align: center;
+    width: 300px;
+}
+
+h1 {
+    color: #3498db;
+}
+
+label, input, button {
+    width: 100%;
+    margin: 10px 0;
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    font-size: 16px;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+label {
+    display: block;
+    text-align: left;
+    font-weight: bold;
+    color: #555;
+}
+
+input {
+    display: block;
+    background-color: #f4f4f4;
+}
+
+button {
+    background-color: #3498db;
+    color: #fff;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #2980b9;
+}
+
+#resultText {
+    font-weight: bold;
+    font-size: 20px;
+    color: #333;
+}
diff --git a/index.html b/index.html
@@ -45,6 +45,7 @@ <h1>Calculators</h1>
   <a href="./calculators/unit-convertor/index.html">Unit Convertor </a><br />
   <a href="./calculators/Distance-between-two-coordinates-calculator/index.html">Coordinate Distance Calculator</a> <br />
   <a href="./calculators/cron-expression-calculator/index.html">Cron Expression Calculator</a> <br />
+  <a href="./calculators/complex-number-calculator/index.html">Complex Number Calculator</a> <br />
   <a href="./calculators/sip-calculator/index.html">SIP Calculator</a><br />
 </body>
 </html>