Added Bicycle Efficiency Calculator (#1967)

Rakesh9100 · Jan 3, 2025 · af91881 · af91881
1 parent 791055e
commit af91881
Show file tree

Hide file tree

Showing 7 changed files with 297 additions and 0 deletions.
diff --git a/Calculators/Bicycle-Efficiency-Calculator/README.md b/Calculators/Bicycle-Efficiency-Calculator/README.md
@@ -0,0 +1,29 @@
+# <p align="center">Bicycle Efficiency Calculator</p>
+
+## Description :-
+
+This calculator calculates the speed of a cyclist based on pedal effort, gear settings, and terrain type. It's designed for cyclists to track and optimize their performance.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Features :-
+
+- Input pedal effort as a percentage.
+- Select gear ratio for different cycling conditions.
+- Choose terrain type (e.g., flat, uphill).
+- Calculate and display the cyclist's estimated speed.
+
+## Usage :-
+
+1. Adjust **Pedal Effort** using the slider.
+2. Set the **Gear Ratio** from the dropdown.
+3. Choose the **Terrain Type**.
+4. Click **Calculate** to display the speed.
+
+## Screenshots :-
+
+![image](https://github.com/user-attachments/assets/f5dc28ad-b374-4bb5-a81f-b23ecc482e09)
diff --git a/Calculators/Bicycle-Efficiency-Calculator/assets/background.jpg b/Calculators/Bicycle-Efficiency-Calculator/assets/background.jpg
diff --git a/Calculators/Bicycle-Efficiency-Calculator/index.html b/Calculators/Bicycle-Efficiency-Calculator/index.html
@@ -0,0 +1,81 @@
+<!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">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@500&display=swap" rel="stylesheet">
+    <title>Bicycle Efficiency Calculator</title>
+</head>
+
+<body>
+    <div class="card">
+        <div class="waviy">
+            <span style="--i:1">B</span>
+            <span style="--i:2">I</span>
+            <span style="--i:3">C</span>
+            <span style="--i:4">Y</span>
+            <span style="--i:5">C</span>
+            <span style="--i:6">L</span>
+            <span style="--i:7">E</span>
+            <span style="--i:8">&nbsp;</span>
+            <span style="--i:9">S</span>
+            <span style="--i:10">P</span>
+            <span style="--i:11">E</span>
+            <span style="--i:12">E</span>
+            <span style="--i:13">D</span>
+            <span style="--i:14"> &nbsp;V</span>
+            <span style="--i:15">S</span>
+            <span style="--i:16"> &nbsp;E</span>
+            <span style="--i:17">F</span>
+            <span style="--i:18">F</span>
+            <span style="--i:19">O</span>
+            <span style="--i:20">R</span>
+            <span style="--i:21">T</span>
+        </div>
+        <br><br>
+
+        <!-- Pedal Effort -->
+        <div class="row">
+            <label for="pedal-effort">Enter Pedal Effort (in watts):</label>
+            <input type="number" id="pedal-effort" name="pedal-effort" required>
+        </div><br>
+
+        <!-- Gear Settings -->
+        <div class="row">
+            <label for="gear-ratio">Enter Gear Ratio:</label>
+            <input type="number" id="gear-ratio" name="gear-ratio" required>
+        </div><br>
+
+        <!-- Terrain Type -->
+        <div class="row">
+            <label for="terrain">Select Terrain Type:</label>
+            <select id="terrain" name="terrain" required>
+                <option value="flat">Flat</option>
+                <option value="uphill">Uphill</option>
+                <option value="downhill">Downhill</option>
+            </select>
+        </div><br>
+
+        <!-- Additional Inputs if necessary -->
+        <div class="row">
+            <label for="wind-speed">Enter Wind Speed (optional, in m/s):</label>
+            <input type="number" id="wind-speed" name="wind-speed">
+        </div><br>
+
+        <div class="rule"></div>
+        <div class="form-footer">
+            <button class="button" onclick="calculate(event)">Calculate Speed</button>
+        </div>
+        <div id="result-container">
+            <p id="result"></p>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Calculators/Bicycle-Efficiency-Calculator/script.js b/Calculators/Bicycle-Efficiency-Calculator/script.js
@@ -0,0 +1,29 @@
+function calculate(event) {
+    // Prevent the form from submitting and reloading the page
+    event.preventDefault();
+
+    // Get the input values from the form
+    let pedalEffort = parseFloat(document.getElementById('pedal-effort').value);
+    let gearRatio = parseFloat(document.getElementById('gear-ratio').value);
+    let terrain = document.getElementById('terrain').value;
+    let windSpeed = parseFloat(document.getElementById('wind-speed').value) || 0;
+
+    // Validate the inputs
+    if (isNaN(pedalEffort) || pedalEffort <= 0) {
+        alert("Please enter a valid pedal effort.");
+        return;
+    }
+    if (isNaN(gearRatio) || gearRatio <= 0) {
+        alert("Please enter a valid gear ratio.");
+        return;
+    }
+
+    // Calculate the base speed based on pedal effort, gear ratio, and terrain type
+    let baseSpeed = pedalEffort * gearRatio * (terrain === 'uphill' ? 0.8 : (terrain === 'downhill' ? 1.2 : 1));
+
+    // Adjust speed based on wind speed (positive for headwind, negative for tailwind)
+    let adjustedSpeed = baseSpeed - windSpeed;
+
+    // Display the result
+    document.getElementById('result').innerText = `Your speed is approximately: ${adjustedSpeed.toFixed(2)} km/h`;
+}
diff --git a/Calculators/Bicycle-Efficiency-Calculator/style.css b/Calculators/Bicycle-Efficiency-Calculator/style.css
@@ -0,0 +1,150 @@
+body {
+    font-family: 'Inconsolata', monospace;
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    background: linear-gradient(to right bottom, #7ed0e7, #77c1ee, #87afee, #a399e1, #bf80c6);
+    height: 100%;
+    min-height: 100vh;
+    margin: 0;
+    background-image: url(./assets/background.jpg);
+    background-size: cover;
+    background-position: center;
+}
+
+.waviy {
+    position: relative;
+}
+
+.waviy span {
+    position: relative;
+    display: inline-block;
+    font-size: 30px;
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+    color: #fff;
+    text-transform: uppercase;
+    animation: flip 2s infinite;
+    animation-delay: calc(.2s * var(--i))
+}
+
+@keyframes flip {
+
+    0%,
+    80% {
+        transform: rotateY(360deg)
+    }
+}
+
+.card {
+    background: rgba(158, 187, 226, 0.1);
+    backdrop-filter: blur(10px);
+    border-radius: 15px;
+    padding: 25px;
+    text-align: center;
+    max-width: 570px;
+    width: 90%;
+    margin-bottom: 20px;
+}
+
+.row {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+label {
+    color: white;
+    display: block;
+    margin-bottom: 5px;
+    font-size: 1.1rem;
+    font-family: monospace;
+}
+
+input,
+select {
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    border: none;
+    border-radius: 5px;
+    background-color: rgba(255, 255, 255, 0.8);
+    color: #333333;
+    transition: background-color 0.3s ease;
+}
+
+input:focus,
+select:focus {
+    background-color: rgba(255, 255, 255, 1);
+}
+
+select {
+    cursor: pointer;
+}
+
+.rule {
+    height: 1px;
+    background-color: #ffffff;
+    margin: 20px 0;
+}
+
+.form-footer {
+    text-align: center;
+}
+
+#result-container {
+    margin-top: 20px;
+    text-align: center;
+    font-weight: bold;
+    color: white;
+    font-size: 1.3rem;
+    font-family: monospace;
+}
+
+.button {
+    align-items: center;
+    appearance: none;
+    background-image: radial-gradient(100% 100% at 100% 0, #e08b46 0, #603289 100%);
+    border: 0;
+    border-radius: 6px;
+    box-shadow: rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, rgba(58, 65, 111, .5) 0 -3px 0 inset;
+    box-sizing: border-box;
+    color: #fff;
+    cursor: pointer;
+    display: inline-flex;
+    font-family: "JetBrains Mono", monospace;
+    height: 40px;
+    justify-content: center;
+    line-height: 1;
+    list-style: none;
+    overflow: hidden;
+    padding-left: 16px;
+    padding-right: 16px;
+    position: relative;
+    text-align: left;
+    text-decoration: none;
+    transition: box-shadow .15s, transform .15s;
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: manipulation;
+    white-space: nowrap;
+    will-change: box-shadow, transform;
+    font-size: 18px;
+}
+
+.button:focus {
+    box-shadow: #b5b952 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
+}
+
+.button:hover {
+    box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #e1dde8 0 -3px 0 inset;
+    transform: translateY(-2px);
+}
+
+.button:active {
+    box-shadow: #e3e3dd 0 3px 7px inset;
+    transform: translateY(2px);
+}
diff --git a/README.md b/README.md
@@ -348,6 +348,8 @@ CalcDiverse is a customized collection of calculators for various aspects of mat
 | 281 | Pet Care Cost Calculator | Calculates the cost required to keep the pet throughout lifespan from the entered data. | https://calcdiverse.netlify.app/calculators/pet-care-cost-calculator/ |
 | 282 | Finance Calculator | Calculates the future value of investments and monthly loan payments| https://calcdiverse.netlify.app/Calculators/finance-calculator/ |
 | 283 | Annulus Calculator | Calculates the area of circle with inner and outer radius. | https://calcdiverse.netlify.app/calculators/annulus-calculator/ |
+| 284 | Bicycle Efficiency Calculator | Estimates cycling speed based on effort, gear settings, terrain type, and other factors. | https://calcdiverse.netlify.app/calculators/bicycle-efficiency-calculator/ |
+
 <br>
 <p align="right">(<a href="#top">back to top</a>)</p>
 

diff --git a/calculators.json b/calculators.json
@@ -239,6 +239,12 @@
         "link": "./Calculators/Beta-Function-Calculator/index.html",
         "source": "https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Beta-Function-Calculator"
     },
+    {
+        "title": "Bicycle Efficiency Calculator",
+        "description": "Estimates the cycling speed based on effort, gear settings, terrain type, and other factors.",
+        "link": "./Calculators/Bicycle-Efficiency-Calculator/index.html",
+        "source": "https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Bicycle-Efficiency-Calculator"
+    },
     {
         "title": "Bill Split Calculator",
         "description": "Effortlessly split bills with our calculator. Simplify expense sharing now!",