Added Z-Spray Calculator (#1845)

Rakesh9100 · Aug 10, 2024 · 2412a43 · 2412a43
1 parent 4a322a2
commit 2412a43
Show file tree

Hide file tree

Showing 6 changed files with 154 additions and 0 deletions.
diff --git a/Calculators/Z-Spray-Calculator/README.md b/Calculators/Z-Spray-Calculator/README.md
@@ -0,0 +1,13 @@
+# <p align="center">Z-Spray Calculator</p>
+
+## Description :-
+
+The Z-Spray Calculator is a practical tool designed to help users accurately determine the amount of spray needed for lawn and garden care. By inputting key parameters such as area size, spray rate, and coverage efficiency, users can quickly calculate the required spray quantity. This calculator simplifies the process, ensuring that the right amount of product is used, which not only enhances effectiveness but also minimizes waste. With its responsive design, transparent interface, and intuitive usability, the Z-Spray Calculator is an essential tool for anyone looking to maintain a healthy and well-cared-for outdoor space.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
diff --git a/Calculators/Z-Spray-Calculator/bg_img.jpeg b/Calculators/Z-Spray-Calculator/bg_img.jpeg
diff --git a/Calculators/Z-Spray-Calculator/index.html b/Calculators/Z-Spray-Calculator/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Z-Spray Calculator</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <h1>Z-Spray Calculator</h1>
+      <form id="z-spray-form">
+        <div class="form-group">
+          <label for="area">Area (sq ft):</label>
+          <input type="number" id="area" name="area" required />
+        </div>
+        <div class="form-group">
+          <label for="spray-rate">Spray Rate (gallons/1000 sq ft):</label>
+          <input type="number" id="spray-rate" name="spray-rate" required />
+        </div>
+        <div class="form-group">
+          <label for="coverage">Coverage Efficiency (%):</label>
+          <input type="number" id="coverage" name="coverage" required />
+        </div>
+        <button type="button" onclick="calculateZSpray()">Calculate</button>
+      </form>
+      <div id="result" class="result"></div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Calculators/Z-Spray-Calculator/script.js b/Calculators/Z-Spray-Calculator/script.js
@@ -0,0 +1,14 @@
+function calculateZSpray() {
+  const area = document.getElementById("area").value;
+  const sprayRate = document.getElementById("spray-rate").value;
+  const coverage = document.getElementById("coverage").value;
+
+  if (area && sprayRate && coverage) {
+    const sprayAmount = (area / 1000) * sprayRate * (coverage / 100);
+    document.getElementById(
+      "result"
+    ).innerHTML = `Total Spray Amount: ${sprayAmount.toFixed(2)} gallons`;
+  } else {
+    document.getElementById("result").innerHTML = "Please fill out all fields";
+  }
+}
diff --git a/Calculators/Z-Spray-Calculator/style.css b/Calculators/Z-Spray-Calculator/style.css
@@ -0,0 +1,82 @@
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f4f4f4;
+  background-image: url("bg_img.jpeg"); /* Add your background image URL */
+  background-size: cover;
+  background-position: center;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.container {
+  background-color: rgba(174, 226, 244, 0.6);
+  padding: 30px;
+  border-radius: 10px;
+  /* margin-left: 450px; */
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  width: 300px;
+  max-width: 90%;
+  border: 2px solid black;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.container:hover {
+  transform: translateY(-10px);
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
+}
+
+h1 {
+  text-align: center;
+  margin-bottom: 20px;
+  color: #0f0e0e;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+label {
+  display: block;
+  margin-bottom: 10px;
+  margin-top: 30px;
+  color: #060404;
+}
+
+input {
+  width: 100%;
+  background-color: #e2edf9;
+  padding: 8px;
+  box-sizing: border-box;
+  border-radius: 5px;
+  border: 1px solid #070709;
+}
+
+button {
+  width: 100%;
+  padding: 10px;
+  background-color: #ff2200;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+button:hover {
+  background-color: #ee8f85;
+  border: 2px solid black;
+  color: #060404;
+  transform: scale(1.05); /* Slightly enlarge on hover */
+}
+
+.result {
+  margin-top: 20px;
+  font-size: 18px;
+  text-align: center;
+  color: #333;
+}
diff --git a/index.html b/index.html
@@ -5703,6 +5703,20 @@ <h3>Calculates how many standard deviations a data point is from the mean of a d
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Z-Spray Calculator</h2>
+                <h3>Calculates the required spray amount based on area size, spray rate, and coverage efficiency for precise lawn and garden care.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Z-Spray-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Z-Spray-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>Zodiac Sign Calculator</h2>