Added Plant Growth Calculator (#1290)

Rakesh9100 · Jun 14, 2024 · 55ba9f0 · 55ba9f0
1 parent 11f03f6
commit 55ba9f0
Show file tree

Hide file tree

Showing 6 changed files with 239 additions and 0 deletions.
diff --git a/Calculators/Plant-Growth-Calculator/README.md b/Calculators/Plant-Growth-Calculator/README.md
@@ -0,0 +1,34 @@
+# <p align="center">Plant Growth Calculator</p>
+
+## Description :-
+
+This is a web application designed to forecast the growth rate of your houseplants. This tool considers various factors such as plant species, light, water, soil conditions, and temperature to provide accurate predictions.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Features :-
+
+- Select the species of your plant (Succulents, Ferns, Flowering Plants, Vegetables).
+- Select the type of light condition (Full Sunlight, Partial Shade, Indirect Light).
+- Enter the watering amount as a percentage of plant needs.
+- Select the type of soil (Sandy, Loamy, Clay).
+- Enter the ambient temperature in degrees Celsius.
+- Perform the calculation and display the predicted growth rate in inches per month.
+
+## Example :-
+
+To predict the growth rate of a Tomato plant:
+1. Select "Vegetables" from the plant species dropdown menu.
+2. Select "Full Sunlight" from the light conditions dropdown menu (Tomato plants thrive in full sunlight).
+3. Enter the watering amount, for example, 80% (Tomato plants require consistent watering).
+4. Select "Loamy" from the soil type dropdown menu (Tomato plants prefer well-draining loamy soil).
+5. Enter the ambient temperature, for example, 25°C (Tomato plants grow well in warm temperatures).
+6. Click "Calculate Prediction" to get the predicted growth rate in inches per month.
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/118645569/5208670c-c86e-4df5-a90a-2fdef84dd7f4)
diff --git a/Calculators/Plant-Growth-Calculator/assets/background.jpg b/Calculators/Plant-Growth-Calculator/assets/background.jpg
diff --git a/Calculators/Plant-Growth-Calculator/index.html b/Calculators/Plant-Growth-Calculator/index.html
@@ -0,0 +1,56 @@
+<!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>Plant Growth Calculator</title>
+</head>
+
+<body>
+    <div class="container">
+        <h1>Plant Growth Predictor</h1>
+        <form id="plant-form">
+            <div id="plantSpecies">
+                <label>Plant Species:</label>
+                <select id="plantType">
+                    <option value="succulents">Succulents</option>
+                    <option value="ferns">Ferns</option>
+                    <option value="flowering">Flowering Plants</option>
+                    <option value="vegetables">Vegetables</option>
+                </select>
+            </div>
+            <div id="lightConditions">
+                <label>Light Conditions:</label>
+                <select id="lightType">
+                    <option value="full_sunlight">Full Sunlight</option>
+                    <option value="partial_shade">Partial Shade</option>
+                    <option value="indirect_light">Indirect Light</option>
+                </select>
+            </div>
+            <div id="watering">
+                <label>Plant Watering (%):</label>
+                <input type="number" id="wateringInput" min="0" max="100" required>
+            </div>
+            <div id="soilConditions">
+                <label>Soil Conditions:</label>
+                <select id="soilType">
+                    <option value="sandy">Sandy</option>
+                    <option value="loamy">Loamy</option>
+                    <option value="clay">Clay</option>
+                </select>
+            </div>
+            <div id="temperature">
+                <label>Temperature(°C)::</label>
+                <input type="number" id="temperatureInput" min="-50" max="50" required>
+            </div>
+            <button type="button" onclick="calculatePrediction()">Calculate Prediction</button>
+        </form>
+        <div id="predictionResult"></div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Calculators/Plant-Growth-Calculator/script.js b/Calculators/Plant-Growth-Calculator/script.js
@@ -0,0 +1,59 @@
+// Define factors' weights for calculation
+const LIGHT_WEIGHTS = {
+    'full_sunlight': 1.2,
+    'partial_shade': 1,
+    'indirect_light': 0.8
+};
+
+const WATERING_WEIGHT = 0.5;
+
+const SOIL_WEIGHTS = {
+    'sandy': 0.8,
+    'loamy': 1,
+    'clay': 0.9
+};
+
+// Define base growth rates for different plant species
+const BASE_GROWTH_RATES = {
+    'succulents': 0.5,
+    'ferns': 0.8,
+    'flowering': 1,
+    'vegetables': 1.2
+};
+
+// Define minimum and maximum growth rates
+const MIN_GROWTH_RATE = 0.1;
+const MAX_GROWTH_RATE = 2;
+
+function calculatePrediction() {
+    // Get input values
+    const plantSpecies = document.getElementById('plantType').value;
+    const lightCondition = document.getElementById('lightType').value;
+    const wateringAmount = parseFloat(document.getElementById('wateringInput').value);
+    const soilCondition = document.getElementById('soilType').value;
+    const temperature = parseFloat(document.getElementById('temperatureInput').value);
+
+    // Get base growth rate for selected plant species
+    const baseGrowthRate = BASE_GROWTH_RATES[plantSpecies];
+
+    // Calculate prediction based on inputs
+    const lightFactor = LIGHT_WEIGHTS[lightCondition];
+    const wateringFactor = Math.min(wateringAmount / 100, 1) * WATERING_WEIGHT;
+    const soilFactor = SOIL_WEIGHTS[soilCondition];
+
+    // Adjust growth rate based on temperature
+    let temperatureFactor = 1;
+    if (temperature < 10) {
+        temperatureFactor = 0.8;
+    } else if (temperature > 30) {
+        temperatureFactor = 0.9;
+    }
+
+    // Calculate growth rate
+    const growthRate = baseGrowthRate * ((lightFactor + wateringFactor + soilFactor + temperatureFactor) / 4 * (MAX_GROWTH_RATE - MIN_GROWTH_RATE) + MIN_GROWTH_RATE);
+
+    // Display prediction
+    const predictionResult = document.getElementById('predictionResult');
+    predictionResult.textContent = `Predicted growth rate for ${plantSpecies}: ${growthRate.toFixed(2)} inches per month`;
+    predictionResult.style.display = 'block';
+}
diff --git a/Calculators/Plant-Growth-Calculator/style.css b/Calculators/Plant-Growth-Calculator/style.css
@@ -0,0 +1,76 @@
+body,
+html {
+    height: 100%;
+    margin: 0;
+    font-family: Arial, sans-serif;
+    background-image: url('assets/background.jpg');
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+
+h1 {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+form {
+    background-color: rgba(255, 255, 255, 0.8);
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    width: 90%;
+    max-width: 400px;
+}
+
+label {
+    display: block;
+    margin-top: 10px;
+}
+
+input,
+select {
+    width: 100%;
+    padding: 10px;
+    margin-top: 5px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+}
+
+button {
+    display: block;
+    margin-top: 10px;
+    padding: 10px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    border-radius: 5px;
+}
+
+button:hover {
+    background-color: #45a049;
+}
+
+div {
+    margin-bottom: 1rem;
+}
+
+div label {
+    font-size: large;
+}
+
+#predictionResult {
+    margin-top: 20px;
+    font-size: 20px;
+    text-align: center;
+}
diff --git a/index.html b/index.html
@@ -2360,6 +2360,20 @@ <h3>Calculates various parameters of planetary motion using Kepler's laws.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Plant Growth Calculator</h2>
+                <h3>Calculates the average growth rate for your plants based on various parameters.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Plant-Growth-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Plant-Growth-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>Plant Watering Calculator</h2>