Added sugar Intake Calculator

Anshika14528 · Jun 29, 2024 · 9d69399 · 9d69399
1 parent 126fb69
commit 9d69399
Show file tree

Hide file tree

Showing 6 changed files with 212 additions and 0 deletions.
diff --git a/Sugar Intake Calculator/README.md b/Sugar Intake Calculator/README.md
@@ -0,0 +1,34 @@
+# Sugar Intake Calculator
+
+A simple web application to calculate the sugar intake based on the type and quantity of sugar consumed. The application allows users to select between brown sugar, white sugar, and jaggery, and then input the quantity in grams to calculate the sugar intake.
+
+## Features
+
+- Select between three types of sugar: Brown Sugar, White Sugar, and Jaggery
+- Input the quantity of sugar consumed in grams
+- Calculate the total sugar intake based on the selected type and quantity
+- Responsive and user-friendly design
+
+## Technologies Used
+
+- HTML
+- CSS
+- JavaScript
+
+
+## File Structure
+
+- `index.html` - The main HTML file for the application.
+- `styles.css` - The CSS file for styling the application.
+- `script.js` - The JavaScript file containing the logic for the sugar intake calculation.
+
+## Usage
+
+1. Open the application in a web browser.
+2. Select the type of sugar by clicking one of the buttons (Brown Sugar, White Sugar, Jaggery).
+3. Enter the quantity of sugar consumed in grams in the input field.
+4. Click the "Calculate Intake" button to see the result.
+5. The result will display the total sugar intake based on the selected type and quantity of sugar.
+
+## Screenshot
+![alt text](Sugar-Intake-Calculator.png)
diff --git a/Sugar Intake Calculator/Sugar-Intake-Calculator.png b/Sugar Intake Calculator/Sugar-Intake-Calculator.png
diff --git a/Sugar Intake Calculator/index.html b/Sugar Intake Calculator/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sugar Intake Calculator</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Sugar Intake Calculator</h1>
+        <div class="sugar-type">
+            <button id="brown-sugar" class="button" onclick="selectSugarType('brown')">Brown Sugar</button>
+            <button id="white-sugar" class="button" onclick="selectSugarType('white')">White Sugar</button>
+            <button id="jaggery" class="button" onclick="selectSugarType('jaggery')">Jaggery</button>
+        </div>
+        <div class="input-section">
+            <label for="quantity">Enter quantity in grams:</label>
+            <input type="number" id="quantity" min="0">
+        </div>
+        <button class="button" onclick="calculateIntake()">Calculate Intake</button>
+        <div id="result"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Sugar Intake Calculator/manifest.json b/Sugar Intake Calculator/manifest.json
@@ -0,0 +1,22 @@
+{
+    "name": "Sugar Intake Calculator",
+    "short_name": "SugarCalc",
+    "description": "A simple app to calculate sugar intake based on the type and quantity of sugar consumed.",
+    "start_url": "./index.html",
+    "display": "standalone",
+    "background_color": "#ffffff",
+    "theme_color": "#39bda7",
+    "icons": [
+      {
+        "src": "icons/icon-192x192.png",
+        "sizes": "192x192",
+        "type": "image/png"
+      },
+      {
+        "src": "icons/icon-512x512.png",
+        "sizes": "512x512",
+        "type": "image/png"
+      }
+    ]
+  }
+
diff --git a/Sugar Intake Calculator/script.js b/Sugar Intake Calculator/script.js
@@ -0,0 +1,36 @@
+let selectedSugarType = '';
+
+function selectSugarType(type) {
+    selectedSugarType = type;
+    document.querySelectorAll('.sugar-type button').forEach(button => {
+        button.classList.remove('active');
+    });
+    document.getElementById(`${type}-sugar`).classList.add('active');
+}
+
+function calculateIntake() {
+    const quantity = document.getElementById('quantity').value;
+    if (!selectedSugarType) {
+        alert('Please select a sugar type.');
+        return;
+    }
+    if (!quantity || quantity <= 0) {
+        alert('Please enter a valid quantity.');
+        return;
+    }
+
+    const sugarContent = getSugarContent(selectedSugarType);
+    const intake = (quantity * sugarContent).toFixed(2);
+
+    document.getElementById('result').innerText = 
+        `You have consumed ${intake} grams of sugar from ${selectedSugarType} sugar.`;
+}
+
+function getSugarContent(type) {
+    const sugarContents = {
+        brown: 0.973,
+        white: 1,
+        jaggery: 0.85
+    };
+    return sugarContents[type];
+}
diff --git a/Sugar Intake Calculator/styles.css b/Sugar Intake Calculator/styles.css
@@ -0,0 +1,94 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: grey;
+    margin: 0;
+}
+
+.container {
+    background: white;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+
+.input-section {
+    margin: 20px 0;
+}
+
+#quantity {
+    width: 100px;
+    padding: 5px;
+    margin-left: 10px;
+}
+
+#result {
+    margin-top: 20px;
+    font-size: 1.2em;
+    color: #333;
+}
+
+.button {
+  display: inline-block;
+  padding: 12px 24px;
+  border: 1px solid #4f4f4f;
+  border-radius: 4px;
+  transition: all 0.2s ease-in;
+  position: relative;
+  overflow: hidden;
+  font-size: 19px;
+  cursor: pointer;
+  color: black;
+  z-index: 1;
+}
+
+.button:before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%) scaleY(1) scaleX(1.25);
+  top: 100%;
+  width: 140%;
+  height: 180%;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 50%;
+  display: block;
+  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
+  z-index: -1;
+}
+
+.button:after {
+  content: "";
+  position: absolute;
+  left: 55%;
+  transform: translateX(-50%) scaleY(1) scaleX(1.45);
+  top: 180%;
+  width: 160%;
+  height: 190%;
+  background-color: #39bda7;
+  border-radius: 50%;
+  display: block;
+  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
+  z-index: -1;
+}
+
+.button:hover {
+  color: #ffffff;
+  border: 1px solid #39bda7;
+}
+
+.button:hover:before {
+  top: -35%;
+  background-color: #39bda7;
+  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
+}
+
+.button:hover:after {
+  top: -45%;
+  background-color: #39bda7;
+  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
+}