Added Plant Watering Calculator (#1238)

Rakesh9100 · Jun 11, 2024 · 1460e04 · 1460e04
1 parent 45b0a53
commit 1460e04
Show file tree

Hide file tree

Showing 6 changed files with 223 additions and 0 deletions.
diff --git a/Calculators/Plant-Watering-Calculator/README.md b/Calculators/Plant-Watering-Calculator/README.md
@@ -0,0 +1,34 @@
+# <p align="center">Plant Watering Calculator</p>
+
+## Description :-
+
+The Plant Watering Calculator is a web application that helps you calculate the amount of water needed for your plants based on the plant type, size, soil type, and sunlight exposure.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Features :-
+
+- Select the type of your plant (Succulents, Ferns, Flowering Plants, Vegetables).
+- Enter the size of your plant in cm.
+- Select the type of soil (Sandy, Loamy, Clay).
+- Enter the sunlight exposure in hours.
+- Perform the calculation and display the result in ml.
+
+## Example :-
+
+To find the amount of water needed for a Tomato plant:
+1. Select "Vegetables" from the plant type dropdown menu.
+2. Enter the size of the plant, for example, 60 cm (average size of a fully grown Tomato plant).
+3. Select "Loamy" from the soil type dropdown menu (Tomato plants prefer well-draining loamy soil).
+4. Enter the sunlight exposure, for example, 8 hours (Tomato plants need at least 8 hours of sunlight per day).
+5. Click "Calculate" to get the amount of water needed in ml.
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/03787a4d-ac36-4846-85af-6653fc31a410)
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/4953cd64-98f9-4c3f-bf8a-8b891e43f594)
diff --git a/Calculators/Plant-Watering-Calculator/assets/background.jpg b/Calculators/Plant-Watering-Calculator/assets/background.jpg
diff --git a/Calculators/Plant-Watering-Calculator/index.html b/Calculators/Plant-Watering-Calculator/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <title>Plant Watering Calculator</title>
+</head>
+
+<body>
+    <h1>Plant Watering Calculator</h1>
+    <form id="plant-form">
+        <label for="plant-type">Plant Type:</label>
+        <select id="plant-type">
+            <option value="succulents">Succulents</option>
+            <option value="ferns">Ferns</option>
+            <option value="flowering">Flowering Plants</option>
+            <option value="vegetables">Vegetables</option>
+        </select>
+        <label for="plant-size">Plant Size (cm):</label>
+        <input type="number" id="plant-size" min="1">
+        <label for="soil-type">Soil Type:</label>
+        <select id="soil-type">
+            <option value="sandy">Sandy</option>
+            <option value="loamy">Loamy</option>
+            <option value="clay">Clay</option>
+        </select>
+        <label for="sunlight">Sunlight Exposure (hours):</label>
+        <input type="number" id="sunlight" min="1" max="24">
+        <button type="submit">Calculate</button>
+    </form>
+    <p id="result"></p>
+    <section>
+        <h2>Plant Types</h2>
+        <ul>
+            <li><strong>Succulents:</strong> These are plants with thick, fleshy parts that are adapted to store water. Examples include cacti and aloe.</li>
+            <li><strong>Ferns:</strong> These are non-flowering plants that reproduce via spores. They typically prefer shady, moist environments.</li>
+            <li><strong>Flowering Plants:</strong> These are plants that produce flowers as part of their reproductive process. Examples include roses and daisies.</li>
+            <li><strong>Vegetables:</strong> These are plants where the leaves, roots, stems, flowers, or seeds are edible. Examples include tomatoes and lettuce.</li>
+        </ul>
+
+        <h2>Soil Types</h2>
+        <ul>
+            <li><strong>Sandy:</strong> This type of soil has large particles and doesn't hold onto water well. It's good for plants that need well-draining soil.</li>
+            <li><strong>Loamy:</strong> This type of soil is a balanced mix of sand, silt, and clay. It's ideal for most plants because it holds moisture but also drains well.</li>
+            <li><strong>Clay:</strong> This type of soil has very small particles and holds onto water for a long time. It's good for plants that need a lot of water, but it can be problematic if it gets waterlogged.</li>
+        </ul>
+    </section>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Plant-Watering-Calculator/script.js b/Calculators/Plant-Watering-Calculator/script.js
@@ -0,0 +1,38 @@
+document.getElementById('plant-form').addEventListener('submit', function(e) {
+    e.preventDefault();
+
+    const plantType = document.getElementById('plant-type').value;
+    const plantSize = document.getElementById('plant-size').value;
+    const soilType = document.getElementById('soil-type').value;
+    const sunlight = document.getElementById('sunlight').value;
+
+    let waterAmount = calculateWaterAmount(plantType, plantSize, soilType, sunlight);
+    waterAmount = waterAmount.toFixed(2);
+
+    document.getElementById('result').innerText = `The plant needs ${waterAmount} ml of water.`;
+});
+
+function calculateWaterAmount(plantType, plantSize, soilType, sunlight) {
+    let baseAmount;
+
+    switch (plantType) {
+        case 'succulents':
+            baseAmount = 10;
+            break;
+        case 'ferns':
+            baseAmount = 20;
+            break;
+        case 'flowering':
+            baseAmount = 30;
+            break;
+        case 'vegetables':
+            baseAmount = 40;
+            break;
+    }
+
+    let sizeFactor = plantSize/10;
+    let soilFactor = soilType === 'sandy' ? 1.2 : (soilType === 'loamy' ? 1 : 0.8);
+    let sunlightFactor = sunlight/12;
+
+    return baseAmount*sizeFactor*soilFactor*sunlightFactor;
+}
diff --git a/Calculators/Plant-Watering-Calculator/style.css b/Calculators/Plant-Watering-Calculator/style.css
@@ -0,0 +1,87 @@
+body {
+    font-family: Arial, sans-serif;
+    background-image: url('assets/background.jpg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    margin: 5rem 0;
+    padding: 0;
+    color: #333;
+}
+
+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: 300px;
+}
+
+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;
+}
+
+#result {
+    margin-top: 20px;
+    font-size: 20px;
+    text-align: center;
+}
+
+section {
+    margin-top: 2rem;
+    padding: 2rem;
+    border-radius: 5px;
+    max-width: 60rem;
+    background-color: rgba(255, 255, 255, 0.8);
+}
+
+h2 {
+    color: #333;
+    margin-bottom: 0.5rem;
+}
+
+li {
+    margin-bottom: 0.5rem;
+    line-height: 1.5;
+}
+
+strong {
+    color: #007BFF;
+}
diff --git a/index.html b/index.html
@@ -2150,6 +2150,20 @@ <h3>Calculates various parameters of planetary motion using Kepler's laws.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Plant Watering Calculator</h2>
+                <h3>Calculates the amount of water needed for your plants based on the plant type, size, soil type, and sunlight exposure.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Plant-Watering-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Plant-Watering-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>Polynomial Roots Calculator</h2>