diff --git a/Calculators/Horsepower-Calculator/README.md b/Calculators/Horsepower-Calculator/README.md new file mode 100644 index 000000000..eefce7e2d --- /dev/null +++ b/Calculators/Horsepower-Calculator/README.md @@ -0,0 +1,15 @@ +#

Horsepower Calculator

+ +## 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 new file mode 100644 index 000000000..24415bef4 --- /dev/null +++ b/Calculators/Horsepower-Calculator/index.html @@ -0,0 +1,21 @@ + + + + + + + Horsepower Calculator + + +

Horsepower Calculator

+
+ + + + + +

+
+ + + diff --git a/Calculators/Horsepower-Calculator/script.js b/Calculators/Horsepower-Calculator/script.js new file mode 100644 index 000000000..a9c9f2071 --- /dev/null +++ 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 new file mode 100644 index 000000000..4d79ca955 --- /dev/null +++ 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 index a7f89610e..959b5d5ed 100644 --- a/index.html +++ b/index.html @@ -1380,6 +1380,20 @@

Calculates the cost of your home security.

+
+
+

Horsepower Calculator

+

Calculates the horsepower using force and velocity.

+ +
+

Income Tax Calculator