Added Orthocenter Of A Triangle Calculator (#1735)

Rakesh9100 · Aug 3, 2024 · 03ea832 · 03ea832
1 parent 56dfd7a
commit 03ea832
Show file tree

Hide file tree

Showing 6 changed files with 282 additions and 0 deletions.
diff --git a/Calculators/Orthocentre-Of-A-Triangle-Calculator/README.md b/Calculators/Orthocentre-Of-A-Triangle-Calculator/README.md
@@ -0,0 +1,15 @@
+# <p align="center">Orthocentre Of A Triangle Calculator</p>
+
+## Description :-
+
+Orthocentre Of A Triangle Calculator is a web application that calculates the coordinates of the orthocentre of the triangle whose all three coordinates are input by the user
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image](https://github.com/user-attachments/assets/336d2985-5411-4f40-89c9-1dbd67049eab)
diff --git a/Calculators/Orthocentre-Of-A-Triangle-Calculator/assets/background.jpeg b/Calculators/Orthocentre-Of-A-Triangle-Calculator/assets/background.jpeg
diff --git a/Calculators/Orthocentre-Of-A-Triangle-Calculator/index.html b/Calculators/Orthocentre-Of-A-Triangle-Calculator/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Orthocentre Of A Triangle Calculator</title>
+</head>
+
+<body>
+    <header>
+        <h1>Orthocentre Of A Triangle Calculator</h1>
+    </header>
+
+    <section id="calculator">
+        <label for="firstSide">First Vertex :</label>
+        <input type="number" id="x1" required placeholder="Enter (x1)">
+        <input type="number" id="y1" required placeholder="Enter (y1)">
+
+        <label for="secondSide">Second Vertex :</label>
+        <input type="number" id="x2" required placeholder="Enter (x2)">
+        <input type="number" id="y2" required placeholder="Enter (y2)">
+
+        <label for="thirdSide">Third Vertex :</label>
+        <input type="number" id="x3" required placeholder="Enter (x3)">
+        <input type="number" id="y3" required placeholder="Enter (y3)">
+
+        <button onclick="calculate()">Calculate</button>
+
+        <p id="result"></p>
+    </section>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Calculators/Orthocentre-Of-A-Triangle-Calculator/script.js b/Calculators/Orthocentre-Of-A-Triangle-Calculator/script.js
@@ -0,0 +1,146 @@
+function calculate() {
+    // Get input values
+    const x1 = parseFloat(document.getElementById('x1').value);
+    const y1 = parseFloat(document.getElementById('y1').value);
+    const x2 = parseFloat(document.getElementById('x2').value);
+    const y2 = parseFloat(document.getElementById('y2').value);
+    const x3 = parseFloat(document.getElementById('x3').value);
+    const y3 = parseFloat(document.getElementById('y3').value);
+
+    if (isNaN(x1) || isNaN(y1) || isNaN(x2) || isNaN(y2) || isNaN(x3) || isNaN(y3)) {
+        document.getElementById("result").innerText = "Please enter the valid numbers for all fields.";
+        return;
+    }
+    if ((x1 * (y2 - y3) + x2 * (y3 - y1) + x3 * (y1 - y2)) == 0) {
+        document.getElementById("result").innerText = "The given coordinates do not form a triangle";
+        return;
+    }
+
+    // Display the result
+    const orthocenter = calculateOrthocenter(x1, y1, x2, y2, x3, y3);
+    const resultElement = document.getElementById('result');
+    resultElement.innerText = "Orthocenter coordinates: (" + (orthocenter.x).toString() + ", " + (orthocenter.y).toString() + ")";
+}
+
+
+function calculateOrthocenter(x1, y1, x2, y2, x3, y3) {
+    // Javascript program for the above approach
+
+    // Function to find the line given
+    // two points
+    function lineFromPoints(P, Q, arr) {
+        arr[0] = Q[1] - P[1];
+        arr[1] = P[0] - Q[0];
+        arr[2] = arr[0] * (P[0]) + arr[1] * (P[1]);
+    }
+
+    // Function to convert the input line
+    // to its perpendicular bisector
+    function perpendicularBisector(P, Q, arr) {
+        let mid_point = [(P[0] + Q[0]) / 2,
+            (P[1] + Q[1]) / 2
+        ];
+
+        // c = -bx + ay
+        arr[2] = -arr[1] * (mid_point[0]) +
+            arr[0] * (mid_point[1]);
+
+        let temp = arr[0];
+        arr[0] = -arr[1];
+        arr[1] = temp;
+    }
+
+    // Function to find the
+    // intersection point of two lines
+    function lineLineIntersection(abc, efg) {
+
+        let determinant = abc[0] * efg[1] - efg[0] * abc[1];
+
+        // As points are non-collinear,
+        // determinant cannot be 0
+        let x = (efg[1] * abc[2] - abc[1] * efg[2]) / determinant;
+        let y = (abc[0] * efg[2] - efg[0] * abc[2]) / determinant;
+
+        return [x, y];
+    }
+
+    // Function to find the
+    // circumcenter of a triangle
+    function findCircumCenter(A) {
+
+        let P = A[0],
+            Q = A[1],
+            R = A[2];
+
+        // Line PQ is represented as
+        // ax + by = c
+        let abc = new Array(3);
+        lineFromPoints(P, Q, abc);
+
+        // Line QR is represented as
+        // ex + fy = g
+        let efg = new Array(3);
+        lineFromPoints(Q, R, efg);
+
+        // Converting lines PQ and QR
+        // to perpendicular bisectors
+        perpendicularBisector(P, Q, abc);
+        perpendicularBisector(Q, R, efg);
+
+        // Their point of intersection
+        // gives the circumcenter
+        let circumcenter = lineLineIntersection(abc, efg);
+
+        // Return the circumcenter
+        return circumcenter;
+    }
+
+    // Function to find the
+    // centroid of a triangle
+    function findCentroid(A) {
+        // Centroid of a triangle is
+        // given as (Xa + Xb + Xc)/3,
+        // (Ya + Yb + Yc)/3
+        let centroid = [
+            (A[0][0] + A[1][0] + A[2][0]) / 3,
+            (A[0][1] + A[1][1] + A[2][1]) / 3
+        ];
+
+        // Return the centroid
+        return centroid;
+    }
+
+    // Function to find the
+    // orthocenter of a triangle
+    function findOrthocenter(A) {
+        // Store the circumcenter and
+        // the centroid of triangle
+        let circumcenter = findCircumCenter(A);
+        let centroid = findCentroid(A);
+
+        // Apply External section formula:
+        // (mX1 - nX2)/(m - n), (mY1 - nY2)/(m - n)
+        let h = [
+            (3 * centroid[0] - 2 * circumcenter[0]),
+            (3 * centroid[1] -
+                2 * circumcenter[1])
+        ];
+
+        // Print the x and y-coordinate
+        // of the orthocenter of the triangle
+        return h;
+    }
+
+    // Given points P, Q, R
+    let P = [x1, y1];
+    let Q = [x2, y2];
+    let R = [x3, y3];
+
+    let A = [P, Q, R];
+    h = findOrthocenter(A)
+    // function call
+    return ({
+        x: h[0],
+        y: h[1]
+    });
+}
diff --git a/Calculators/Orthocentre-Of-A-Triangle-Calculator/style.css b/Calculators/Orthocentre-Of-A-Triangle-Calculator/style.css
@@ -0,0 +1,70 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #85e3e0;
+    background-image: url('assets/background.jpeg');
+    background-size: cover;
+    background-repeat: none;
+    background-position: center;
+}
+
+header {
+    padding: 1em;
+    font-weight: bold;
+    font-size: larger;
+    color: #f7f6f6;
+    text-align: center;
+    text-decoration: underline;
+
+}
+
+#calculator {
+    max-width: 300px;
+    margin: 20px auto;
+    border: 1px solid #cccccc;
+    padding: 20px;
+    border-radius: 8px;
+    background: linear-gradient(to right, #d564e6, #e591aa);
+    background-color: #627a8d;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+label {
+    font-weight: bold;
+    display: block;
+    margin-bottom: 8px;
+    color: #333333;
+}
+
+input,
+select {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 16px;
+    box-sizing: border-box;
+    border-radius: 10px;
+}
+
+button {
+    width: 100%;
+    height: 40px;
+    font-size: 16px;
+    cursor: pointer;
+    background-color: #600178;
+    color: #ffffff;
+    border: none;
+    border-radius: 9px;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #45a09e;
+}
+
+#result {
+    margin-top: 16px;
+    font-weight: bold;
+    font-size: larger;
+    color: #333333;
+}
diff --git a/index.html b/index.html
@@ -3319,6 +3319,20 @@ <h3>Calculates voltage, current, resistance, and power in watts for an electrica
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Orthocentre Of A Triangle Calculator</h2>
+                <h3>Calculates the orthocenter from the coordinates of a triangle's vertices.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Orthocentre-Of-A-Triangle-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Orthocentre-Of-A-Triangle-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
         <div class="box">
             <div class="content">
                 <h2>PH Calculator</h2>