Added Horsepower Calculator (#1152)

Rakesh9100 · Jun 4, 2024 · a731a4b · a731a4b
1 parent 84dd661
commit a731a4b
Show file tree

Hide file tree

Showing 5 changed files with 155 additions and 0 deletions.
diff --git a/Calculators/Horsepower-Calculator/README.md b/Calculators/Horsepower-Calculator/README.md
@@ -0,0 +1,15 @@
+# <p align="center">Horsepower Calculator</p>
+
+## Description :-
+
+Welcome to the Horsepower Calculator! This tool helps you calculate the horsepower of your vehicle using force and velocity.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/137085798/2c8ec34d-c1d3-4891-965e-e0172f392759)
diff --git a/Calculators/Horsepower-Calculator/index.html b/Calculators/Horsepower-Calculator/index.html
@@ -0,0 +1,21 @@
+<!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>Horsepower Calculator</title>
+</head>
+<body>
+    <h1>Horsepower Calculator</h1>
+    <div class="calculator">
+        <label for="force">Force (Newtons):</label>
+        <input type="number" id="force" name="force" required>
+        <label for="velocity">Velocity (Meters per Second):</label>
+        <input type="number" id="velocity" name="velocity" required>
+        <button onclick="calculateHorsepower()">Calculate Horsepower</button>
+        <p id="result"></p>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Horsepower-Calculator/script.js b/Calculators/Horsepower-Calculator/script.js
@@ -0,0 +1,13 @@
+function calculateHorsepower() {
+    const force = parseFloat(document.getElementById("force").value);
+    const velocity = parseFloat(document.getElementById("velocity").value);
+
+    if (isNaN(force) || isNaN(velocity)) {
+        alert('Please enter valid values for all fields.');
+        return;
+    }
+    const horsepower = (force * velocity) / 746;
+
+    const resultElement = document.getElementById("result");
+    resultElement.textContent = `Horsepower: ${horsepower.toFixed(2)}`;
+}
diff --git a/Calculators/Horsepower-Calculator/style.css b/Calculators/Horsepower-Calculator/style.css
@@ -0,0 +1,92 @@
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin: 0;
+    padding: 0;
+    background: linear-gradient(to right, #000, #1E1E1E);
+    /* Black gradient */
+    color: #ddd;
+    /* Light gray text */
+    overflow: hidden;
+    /* Hide potential scrollbars */
+}
+
+h1 {
+    text-align: center;
+    color: #00ffff;
+    /* Light blue for title */
+    text-shadow: 0 0 3px #00ffff, 0 0 5px #4CAF50;
+    /* Text glow effect */
+}
+
+.calculator {
+    max-width: 600px;
+    margin: 50px auto;
+    padding: 20px;
+    background-color: rgba(0, 0, 0, 0.8);
+    /* Semi-transparent black */
+    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2), 0 0 40px rgba(0, 255, 255, 0.1);
+    /* Neon blue glow */
+    border-radius: 10px;
+    /* Increased corner roundness */
+    animation: fadeIn 0.5s ease-out;
+    transition: background-color 0.5s ease-in-out;
+}
+
+.calculator label {
+    margin-bottom: 5px;
+    display: block;
+    color: #ddd;
+    /* Light gray text */
+}
+
+.calculator input,
+.calculator button {
+    padding: 15px;
+    /* Increased padding for better spacing */
+    border: none;
+    /* Removed border for cleaner look */
+    border-radius: 10px;
+    /* Consistent corner roundness */
+    margin-bottom: 10px;
+    width: 100%;
+    font-size: 16px;
+    /* Increased font size for better readability */
+    background-color: rgba(222, 211, 211, 0.21);
+    /* Slightly transparent black */
+    color: #ddd;
+    /* Light gray text */
+    text-shadow: 0 0 2px #00ffff;
+    /* Text glow effect */
+}
+
+
+.calculator button {
+    cursor: pointer;
+    background-color: rgba(0, 255, 255, 0.2);
+    /* Semi-transparent neon blue */
+    color: #ddd;
+    /* Light gray text */
+    text-shadow: 0 0 2px #00aaff;
+    /* Text glow effect */
+}
+
+.calculator button:hover {
+    background-color: rgba(0, 255, 255, 0.3);
+    /* Brighter neon blue on hover */
+}
+
+#result {
+    font-weight: bold;
+    color: #00ffff;
+    /* Light blue for result */
+    text-shadow: 0 0 3px #00ffff, 0 0 5px #4CAF50;
+    /* Text glow effect */
+}
+
+#force {
+    max-width: 580px;
+}
+
+#velocity {
+    max-width: 580px;
+}
diff --git a/index.html b/index.html
@@ -1380,6 +1380,20 @@ <h3>Calculates the cost of your home security.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Horsepower Calculator</h2>
+                <h3>Calculates the horsepower using force and velocity.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Horsepower-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Horsepower-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>Income Tax Calculator</h2>