Added Pythagorean Triples Calculator (#1743)

Rakesh9100 · Aug 3, 2024 · 0ed3e15 · 0ed3e15
1 parent e3d1d18
commit 0ed3e15
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 1 deletion.
diff --git a/Calculators/Pythagorean-Triples-Calculator/README.md b/Calculators/Pythagorean-Triples-Calculator/README.md
@@ -0,0 +1,15 @@
+# <p align="center">Pythagorean Triples Calculator</p>
+
+## Description :-
+
+A simple calculator that checks whether the user inputs side lengths form a Pythagorean triplet or not.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![Screenshot 2024-07-10 131510](https://github.com/user-attachments/assets/672f63c9-28c8-4835-9b66-1f05293921c1)
diff --git a/Calculators/Pythagorean-Triples-Calculator/index.html b/Calculators/Pythagorean-Triples-Calculator/index.html
@@ -0,0 +1,23 @@
+<!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>Pythagorean Triples Calculator</title>
+</head>
+<body>
+    <div class="container">
+        <h1>Pythagorean Triplet Calculator</h1>
+        <label for="side1">Side 1:</label>
+        <input type="number" id="side1" placeholder="Enter side 1" required>
+        <label for="side2">Side 2:</label>
+        <input type="number" id="side2" placeholder="Enter side 2" required>
+        <label for="side3">Side 3:</label>
+        <input type="number" id="side3" placeholder="Enter side 3" required>
+        <button onclick="calculate()">Check</button>
+        <p id="result"></p>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Pythagorean-Triples-Calculator/script.js b/Calculators/Pythagorean-Triples-Calculator/script.js
@@ -0,0 +1,28 @@
+function calculate() {
+    var side1 = document.getElementById("side1").value;
+    var side2 = document.getElementById("side2").value;
+    var side3 = document.getElementById("side3").value;
+
+    if (side1 === "" || side2 === "" || side3 === "") {
+        document.getElementById("result").textContent = "Please enter all three sides.";
+        return;
+    }
+
+    side1 = parseInt(side1);
+    side2 = parseInt(side2);
+    side3 = parseInt(side3);
+
+    if (side1 <= 0 || side2 <= 0 || side3 <= 0) {
+        document.getElementById("result").textContent = "Please enter valid positive numbers.";
+        return;
+    }
+
+    var sides = [side1, side2, side3];
+    sides.sort((a, b) => a - b);
+
+    if (sides[0] * sides[0] + sides[1] * sides[1] === sides[2] * sides[2]) {
+        document.getElementById("result").textContent = `(${sides[0]}, ${sides[1]}, ${sides[2]}) form a Pythagorean triplet.`;
+    } else {
+        document.getElementById("result").textContent = `(${sides[0]}, ${sides[1]}, ${sides[2]}) do not form a Pythagorean triplet.`;
+    }
+}
diff --git a/Calculators/Pythagorean-Triples-Calculator/style.css b/Calculators/Pythagorean-Triples-Calculator/style.css
@@ -0,0 +1,41 @@
+body {
+    font-family: Arial, sans-serif;
+    background: rgb(58,90,64);
+    background: linear-gradient(90deg, rgba(58,90,64,1) 24%, rgba(2,0,36,1) 100%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.container {
+    background-color: #dad7cd;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    padding: 20px;
+}
+
+input[type="number"], button {
+    padding: 8px;
+    margin: 5px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+button {
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #45a049;
+}
+
+p#result {
+    margin-top: 10px;
+    font-weight: bold;
+}
diff --git a/index.html b/index.html
@@ -3812,7 +3812,7 @@ <h3>Input three values to compute the fourth, showcasing proportionality..</h3>
         <div class="box">
             <div class="content">
                 <h2>Pythagorean Theorem Calculator</h2>
-                <h3>Which takes two sides of right-angled triangle and gives third side.</h3>
+                <h3>Calculates the third side of a right-angled triangle from the other two sides</h3>
                 <div class="card-footer">
                     <a href="./Calculators/Pythagorean-Theorem-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
@@ -3823,6 +3823,20 @@ <h3>Which takes two sides of right-angled triangle and gives third side.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Pythagorean Triples Calculator</h2>
+                <h3>checks whether the user inputs side lengths form a Pythagorean triplet or not.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Pythagorean-Triples-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Pythagorean-Triples-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>QR Code Generator Calculator</h2>