Merge pull request #2140 from S-i-y-a-g/volume

Adding Volume Calculator
Sulagna-Dutta-Roy · Jul 5, 2024 · 28447d9 · 28447d9
2 parents 24f4355 + 9e98e63
commit 28447d9
Show file tree

Hide file tree

Showing 4 changed files with 214 additions and 0 deletions.
diff --git a/Volume Calculator/manifest.json b/Volume Calculator/manifest.json
@@ -0,0 +1,11 @@
+{
+    "manifest_version": 3,
+    "name": "Volume Claculator Extension",
+    "version": "1.0",
+    "description": "Extension to calculate Volume ",
+    "permissions": ["activeTab", "storage"],
+    "action": {
+        "default_popup": "popup.html"
+      }
+
+  }
diff --git a/Volume Calculator/popup.css b/Volume Calculator/popup.css
@@ -0,0 +1,79 @@
+body, html {
+    background-color: #F1E5D1;
+    height: 100%;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: Arial, sans-serif;
+}
+
+.volumecalculator {
+    background-color: aquamarine;
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    max-width: 400px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+label, select, input, button {
+    display: block;
+    width: 100%;
+    margin-bottom: 10px;
+    box-sizing: border-box;
+}
+
+input[type="number"], select {
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    font-size: 16px;
+}
+
+button {
+    padding: 10px;
+    border: none;
+    border-radius: 3px;
+    background-color: #007BFF;
+    color: #fff;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+input[type="text"] {
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    font-size: 16px;
+    background-color: #f9f9f9;
+    cursor: not-allowed;
+}
+
+@media (max-width: 480px) {
+    body, html {
+        justify-content: flex-start;
+        align-items: flex-start;
+        padding: 10px;
+    }
+
+    #volumecalculator {
+        padding: 15px;
+        width: 100%;
+        box-shadow: none;
+    }
+
+    button {
+        font-size: 14px;
+    }
+
+    input[type="number"], select, input[type="text"] {
+        font-size: 14px;
+    }
+}
diff --git a/Volume Calculator/popup.html b/Volume Calculator/popup.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Volume Calculator</title>
+    <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+    <div id="volumecalculator">
+    <label for="dropdown">Choose an option:</label>
+    <select id="dropdown" name="options">
+        <option id="cubeoption" value="Cube">Cube</option>
+        <option id="cuboiodoption" value="Cuboid">Cuboid</option>
+        <option id="cylinderoption" value="Cylinder">Cylinder</option>
+        <option id="coneoption" value="Cone">Cone</option>
+        <option id="freustumoption" value="Frustum">Frustum</option>
+        <option id="hemisphereoption" value="Hemisphere">Hemisphere</option>
+        <option id="sphereoption" value="Sphere">Sphere</option>
+    </select>
+    <input type="number" min="0" id="radius" placeholder="Radius" style="display:none;">
+    <input type="number" min="0" id="frustum1" placeholder="Top Radius" style="display:none;">
+    <input type="number" min="0" id="frustum2" placeholder="Bottom Radius" style="display:none;">
+    <input type="number" min="0" id="height" placeholder="Height" style="display:none;">
+    <input type="number" min="0" id="cube" placeholder="Side Length" style="display:none;">
+    <input type="number" min="0" id="cuboid1" placeholder="Length" style="display:none;">
+    <input type="number" min="0" id="cuboid2" placeholder="Width" style="display:none;">
+    <button id="calculate">Calculate</button>
+    <input type="text" id="Calculatebox" readonly>
+</div>
+    <script src="popup.js"></script>
+
+</body>
+</html>
diff --git a/Volume Calculator/popup.js b/Volume Calculator/popup.js
@@ -0,0 +1,90 @@
+function showbutton(){
+    let button = document.getElementById("dropdown").value;
+    let radius=document.getElementById("radius")
+    let height=document.getElementById("height")
+    let frustum1=document.getElementById("frustum1")
+    let frustum2=document.getElementById("frustum2")
+    let cube=document.getElementById("cube")
+    let cuboid1=document.getElementById("cuboid1")
+    let cuboid2=document.getElementById("cuboid2")
+    radius.style.display='none';
+    height.style.display='none';
+    cube.style.display='none';
+    cuboid1.style.display='none';
+    cuboid2.style.display='none';
+    frustum1.style.display='none';
+    frustum2.style.display='none';
+
+    radius.value = "";
+            height.value = "";
+            frustum1.value = "";
+            frustum2.value = "";
+            cube.value = "";
+            cuboid1.value = "";
+            cuboid2.value = "";
+    if (button=="Cylinder"){
+        height.style.display='block';
+        radius.style.display='block';
+    }
+    if (button=="Cube"){
+        cube.style.display='block';
+    }
+    if (button=="Cuboid"){
+        cuboid1.style.display='block';
+        cuboid2.style.display='block';
+        height.style.display='block';
+    }
+    if (button=="Cone"){
+        radius.style.display='block';
+        height.style.display='block';
+    }
+    if (button=="Sphere"){
+        radius.style.display='block';
+    }
+    if (button=="Hemisphere"){
+        radius.style.display='block';
+    }
+    if (button=="Frustum"){
+        frustum1.style.display='block';
+        frustum2.style.display='block';
+        height.style.display='block';
+    }
+    }
+    document.getElementById("dropdown").addEventListener('change',showbutton);
+    showbutton();
+    function calculatevolume(){
+    let radius=parseFloat(document.getElementById("radius").value);
+    let height=parseFloat(document.getElementById("height").value);
+    let frustum1=parseFloat(document.getElementById("frustum1").value);
+    let frustum2=parseFloat(document.getElementById("frustum2").value);
+    let cube=parseFloat(document.getElementById("cube").value);
+    let cuboid1=parseFloat(document.getElementById("cuboid1").value);
+    let cuboid2=parseFloat(document.getElementById("cuboid2").value); 
+    //let Calculate=parseFloat(document.getElementById("Calculatebox").value); 
+    let calculate;
+    let shape=document.getElementById("dropdown").value;
+        if (shape=="Cylinder"){
+            calculate=(Math.PI*radius*radius*height)
+        }
+        if (shape=="Cube"){
+            calculate=(cube*cube*cube)
+        }
+        if (shape=="Cuboid"){
+            calculate=(height*cuboid1*cuboid2)
+        }
+        if (shape=="Cone"){
+            calculate=(Math.PI*radius*radius*height)/3
+        }
+        if (shape=="Sphere"){
+            calculate=(4*Math.PI*radius*radius)
+        }
+        if (shape=="Hemisphere"){
+            calculate=(2*Math.PI*radius*radius)
+        }
+        if (shape=="Frustum"){
+            calculate=(Math.PI*height)*(frustum1*frustum1 + frustum1*frustum2 + frustum2*frustum2)/3
+        }
+        document.getElementById("Calculatebox").value = "Volume: " + calculate;
+    }
+    document.getElementById("calculate").addEventListener('click',calculatevolume)
+    document.getElementById("dropdown").dispatchEvent(new Event("change"));