Rakesh9100 · Rakesh9100 · Dec 16, 2024 · Dec 12, 2024 · Dec 12, 2024 · Dec 12, 2024
diff --git a/Calculators/Photosynthesis-Rate-Calculator/README.md b/Calculators/Photosynthesis-Rate-Calculator/README.md
@@ -0,0 +1,22 @@
+# <p align="center">Photosynthesis Rate Calculator</p>
+
+## Description :-
+
+The Photosynthesis Rate Calculator is a simple yet elegant web application designed to estimate the rate of photosynthesis based on user inputs. The application takes into account three key factors that influence the photosynthesis process: light intensity, CO₂ concentration, and temperature.
+
+## Tech Stacks :-
+
+- HTML 
+- CSS 
+- JavaScript
+
+## Features :-
+
+- Intuitive input fields with placeholders and labels for better usability.
+- Calculates the photosynthesis rate instantly based on user inputs.
+- Styled using CSS with gradient backgrounds, hover effects, and smooth transitions.
+- Provides error messages when invalid inputs are detected.
+
+## Screenshots :-
+
+![image](https://github.com/user-attachments/assets/54dd73c4-60a6-478d-b0af-b09962fd9a88)
diff --git a/Calculators/Photosynthesis-Rate-Calculator/index.html b/Calculators/Photosynthesis-Rate-Calculator/index.html
@@ -0,0 +1,42 @@
+<!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>Photosynthesis Rate Calculator</title>
+</head>
+
+<body>
+    <div class="calculator">
+        <h1>Photosynthesis Rate Calculator</h1>
+
+        <!-- Input group for light intensity -->
+        <div class="input-group">
+            <label for="light">Light Intensity (µmol/m²/s):</label>
+            <input type="number" id="light" placeholder="Enter light intensity">
+        </div>
+
+        <!-- Input group for CO2 concentration -->
+        <div class="input-group">
+            <label for="co2">CO₂ Concentration (ppm):</label>
+            <input type="number" id="co2" placeholder="Enter CO₂ concentration">
+        </div>
+
+        <!-- Input group for temperature -->
+        <div class="input-group">
+            <label for="temperature ">Temperature (°C):</label>
+            <input type="number" id="temperature" placeholder="Enter temperature">
+        </div>
+
+        <!-- Button to calculate the photosynthesis rate -->
+        <button onclick="calculateRate()">Calculate Rate</button>
+
+        <!-- Section to display the result -->
+        <div class="result" id="result"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Calculators/Photosynthesis-Rate-Calculator/script.js b/Calculators/Photosynthesis-Rate-Calculator/script.js
@@ -0,0 +1,21 @@
+function calculateRate() {
+    // Retrieve and parse the input values for light intensity, CO2 concentration, and temperature
+    const light = parseFloat(document.getElementById('light').value);
+    const co2 = parseFloat(document.getElementById('co2').value);
+    const temperature = parseFloat(document.getElementById('temperature').value);
+
+    // Validate the input values to ensure they are numbers
+    if (isNaN(light) || isNaN(co2) || isNaN(temperature)) {
+        document.getElementById('result').textContent = 'Please enter valid inputs.';
+        return;
+    }
+
+    // Simplified formula for calculating the photosynthesis rate
+    // - Light contributes positively to the rate (scaled by 0.05)
+    // - CO2 contributes positively to the rate (scaled by 0.02)
+    // - Deviation from the optimal temperature of 25°C reduces the rate (scaled by 0.1)
+    const rate = ((light * 0.05) + (co2 * 0.02) - Math.abs(temperature - 25) * 0.1).toFixed(2);
+
+    // Display the calculated photosynthesis rate in the result section
+    document.getElementById('result').textContent = `The photosynthesis rate is ${rate} units.`;
+}
diff --git a/Calculators/Photosynthesis-Rate-Calculator/style.css b/Calculators/Photosynthesis-Rate-Calculator/style.css
@@ -0,0 +1,100 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Poppins', sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: linear-gradient(to bottom right, #43cea2, #185a9d);
+    color: #fff;
+    background-size: 800% 800%;
+    animation: color-transition 6s infinite;
+}
+
+@keyframes color-transition {
+    0% {
+        background-position: 0% 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+.calculator {
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 20px;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+    padding: 40px;
+    max-width: 400px;
+    width: 100%;
+    text-align: center;
+    color: #333;
+}
+
+.calculator h1 {
+    font-size: 2rem;
+    margin-bottom: 20px;
+    color: #185a9d;
+    font-weight: bold;
+}
+
+.input-group {
+    margin-bottom: 20px;
+}
+
+.input-group label {
+    display: block;
+    font-weight: 600;
+    margin-bottom: 10px;
+    text-align: left;
+    color: #185a9d;
+}
+
+.input-group input {
+    width: 100%;
+    padding: 12px;
+    border: 2px solid #43cea2;
+    border-radius: 8px;
+    font-size: 1rem;
+    outline: none;
+    transition: 0.3s;
+}
+
+.input-group input:focus {
+    border-color: #185a9d;
+    box-shadow: 0 0 8px rgba(67, 206, 162, 0.5);
+}
+
+button {
+    background: linear-gradient(to right, #43cea2, #185a9d);
+    color: #fff;
+    border: none;
+    padding: 12px 25px;
+    font-size: 1rem;
+    border-radius: 50px;
+    cursor: pointer;
+    transition: transform 0.3s ease, background 0.3s ease;
+}
+
+button:hover {
+    transform: scale(1.05);
+    background: linear-gradient(to right, #185a9d, #43cea2);
+}
+
+.result {
+    margin-top: 20px;
+    font-size: 1.4rem;
+    font-weight: bold;
+    color: #185a9d;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
diff --git a/index.html b/index.html
@@ -4187,6 +4187,20 @@ <h3>Calculates the lifetime cost of owning a pet.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Photosynthesis Rate Calculator</h2>
+                <h3>Calculates the rate of photosynthesis based on user inputs.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Photosynthesis-Rate-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Photosynthesis-Rate-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>Pipe Flow Calculator</h2>