Merge pull request pranjay-poddar#352 from Rakesh9100/volume-calc

ADDING 3D SHAPES VOLUME CALC
ST1LLWATER · Aug 2, 2022 · 5366991 · 5366991
2 parents 97410e8 + eb29c25
commit 5366991
Show file tree

Hide file tree

Showing 3 changed files with 264 additions and 0 deletions.
diff --git a/Js-Projects/3D_Sapes_Volume_Calculator/index.html b/Js-Projects/3D_Sapes_Volume_Calculator/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>3D Shapes Volume Calculator</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
+</head>
+<body>
+    <h1>Volume of 3D Shapes Calculator</h1><br><br>
+    <label for="Shape">Select the Shape: </label>
+    <select name="Shape" onchange=showDiv(this)>
+        <option value="Sphere">Sphere</option>
+        <option value="Cube">Cube</option>
+        <option value="Cuboid">Cuboid</option>
+        <option value="Cone">Cone</option>
+        <option value="Cylinder">Cylinder</option>
+        <option value="Ellipsoid">Ellipsoid</option>
+    </select><br><br><br>
+    <div id="Sphere" class="shape" style="display: block;">
+        <p>V = (4/3) * &pi; * 
+            <input id="sphere-radius" type="text" placeholder="radius"> <sup> 3 </sup>
+        </p>
+        <p id="sphereAnswer" class="answer"></p>
+        <button onclick=calculate()>Calculate</button>
+    </div>
+
+    <div id="Cone" class="shape">
+        <p>V = (1/3) * &pi; *
+            <input id="cone-radius" type="text" placeholder="radius"> <sup> 2 </sup>
+            <input id="cone-height" type="text" placeholder="height">
+        </p>
+        <p id="coneAnswer" class="answer"></p>
+        <button onclick=calculate()>Calculate</button>
+    </div>
+
+    <div id="Cube" class="shape">
+        <p>V =
+            <input id="cube-length" type="text" placeholder="length"> <sup> 3 </sup>
+        </p>
+        <p id="cubeAnswer" class="answer"></p>
+        <button onclick=calculate()>Calculate</button>
+    </div>
+
+    <div id="Cuboid" class="shape">
+        <p>V = 
+            <input id="cuboid-length" type="text" placeholder="length"> *
+            <input id="cuboid-width" type="text" placeholder="width"> *
+            <input id="cuboid-height" type="text" placeholder="height">
+        </p>
+        <p id="cuboidAnswer" class="answer"></p>
+        <button onclick=calculate()>Calculate</button>
+    </div>
+
+    <div id="Cylinder" class="shape">
+        <p>V = &pi; *
+            <input id="cylinder-radius" type="text" placeholder="radius"> <sup> 2 * </sup>
+            <input id="cylinder-height" type="text" placeholder="height">
+        </p>
+        <p id="cylinderAnswer" class="answer"></p>
+        <button onclick=calculate()>Calculate</button>
+    </div>
+
+    <div id="Ellipsoid" class="shape">
+        <p>V = (4/3) &pi;
+        <input id="axis-a" type="text" placeholder="axis">
+        <input id="axis-b" type="text" placeholder="axis">
+        <input id="axis-c" type="text" placeholder="axis"> 
+        </p>
+        <p id="ellipsoidAnswer" class="answer"></p>
+        <button onclick=calculate()>Calculate</button>
+    </div>
+
+</body>
+<script src="script.js"></script>
+</html>
diff --git a/Js-Projects/3D_Sapes_Volume_Calculator/script.js b/Js-Projects/3D_Sapes_Volume_Calculator/script.js
@@ -0,0 +1,96 @@
+var radius, height, length, axisa, axisb, axisc, width;
+var cubed = "3";
+var shape;
+//variable to later allow user to select their own measurement
+var system = "unit"; 
+const pi = 3.1415926535897932384626433833;
+
+function showDiv(select) {
+  var shapes = document.getElementsByClassName("shape");
+  var inputs = document.getElementsByTagName("input");
+  for(var i = 0; i < inputs.length; i++) {
+      document.getElementsByTagName("input")[i].value = '';
+  } //remove all previously inputted values each time a new shape is selected
+
+  for(var i = 0; i < shapes.length; i++) {
+    //document.getElementsByClassName("answer")[i].value = '';
+    shapes[i].style.display = "none"; 
+  } //hide all previously revealed divs each time a new shape is selected
+
+  if(select.value == "Sphere") { 
+    shape = "sphere"; //'shape' var used to later calculate the answer
+    document.getElementById("Sphere").style.display = "block"; }
+
+  if(select.value == "Cone") { 
+   shape = "cone";
+   document.getElementById("Cone").style.display = "block"; }
+
+  if(select.value == "Cube"){
+    shape = "cube";
+    document.getElementById("Cube").style.display = "block"; }
+
+  if(select.value == "Cuboid"){
+    shape = "cuboid";
+    document.getElementById("Cuboid").style.display = "block"; }
+
+  if(select.value == "Cylinder"){
+    shape = "cylinder";
+    document.getElementById("Cylinder").style.display = "block"; }
+
+  if(select.value == "Ellipsoid"){
+    shape = "ellipsoid";
+    document.getElementById("Ellipsoid").style.display = "block"; }
+}
+
+function calculate() {
+  var answer;
+  if(shape == "sphere") {
+    radius = document.getElementById("sphere-radius").value;
+    var sphereFormula = (4/3) * pi * (Math.pow(radius,3));
+    var answer = (sphereFormula + " " + system + cubed.sup());
+    /*insert the calculated answer into the blank 
+    paragraph tag with id = "sphereAnswer"*/
+    document.getElementById("sphereAnswer").innerHTML = "V = " + answer;
+  }
+
+  if(shape == "cone") {
+     radius = document.getElementById("cone-radius").value;
+     height = document.getElementById("cone-height").value;
+     var coneFormula = (1/3) * pi * (Math.pow(radius,2)) * height;
+     var answer = (coneFormula + " " + system + cubed.sup());
+     document.getElementById("coneAnswer").innerHTML = "V = " + answer;
+  }
+
+  if(shape == "cube") {
+    length = document.getElementById("cube-length").value;
+    var cubeFormula = Math.pow(length, 3);
+    var answer = (cubeFormula + " " + system + cubed.sup());
+    document.getElementById("cubeAnswer").innerHTML = "V = " + answer;
+  }
+
+  if(shape == "cuboid") {
+    length = document.getElementById("cuboid-length").value;
+    width = document.getElementById("cuboid-width").value;
+    height = document.getElementById("cuboid-height").value;
+    var cuboidFormula = length * width * height;
+    var answer = (cuboidFormula + " " + system + cubed.sup());
+    document.getElementById("cuboidAnswer").innerHTML = "V = " + answer;
+  }
+
+  if(shape == "cylinder") {
+    radius = document.getElementById("cylinder-radius").value;
+    height = document.getElementById("cylinder-height").value;
+    var cylinderFormula = pi * (Math.pow(radius,2)) * height;
+    var answer = (cylinderFormula + " " + system + cubed.sup());
+    document.getElementById("cylinderAnswer").innerHTML = "V = " + answer;
+  }
+
+  if(shape == "ellipsoid") {
+    axisa = document.getElementById("axis-a").value;
+    axisb = document.getElementById("axis-b").value;
+    axisc = document.getElementById("axis-c").value;
+    var ellipsoidFormula = (4/3) * pi * axisa * axisb * axisc;
+    var answer = (ellipsoidFormula + " " + system + cubed.sup());
+    document.getElementById("ellipsoidAnswer").innerHTML = "V = " + answer;
+  }
+}
diff --git a/Js-Projects/3D_Sapes_Volume_Calculator/style.css b/Js-Projects/3D_Sapes_Volume_Calculator/style.css
@@ -0,0 +1,90 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: 'Roboto', sans-serif;
+  }
+
+  @media screen and (max-width: 877px) {
+    .content {
+        width: 100%;
+    }
+}
+
+  body {
+    background-color: #FFD908;
+    margin-top: 2%;
+  }
+
+  div {
+    display: none;
+    background-color: #36FF08;
+    height: 350px;
+    border: 5px solid #F00689;
+    width: 45%;
+    font-size: 2.5rem;
+    padding: 2%;
+    margin-left: 28%;
+  }
+
+  input {
+    width: 21%;
+    font-size: 2.5rem;
+    text-align: center;
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+    margin-bottom: 5%;
+    border: 2px solid #ccc;
+    outline: none;
+  }
+
+  input[type=text]:focus, input:hover {
+    border: 2px solid #71305b;
+  }
+
+  button {
+    padding-top: 2%;
+    padding-bottom: 2%;
+    padding-left: 1.5%;
+    padding-right: 1.5%;
+    margin-left: 10rem;
+    margin-top: 6%;
+    background-color: #71305b;
+    color: white;
+    border: none;
+    width: 45%;
+    font-size: 2.5rem;
+  }
+
+  h1 {
+    text-align: center;
+    font-size: 3rem;
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+    color: #1503E9;
+  }
+
+  select {
+    width: 17.2%;
+    padding-top: 0.25%;
+    font-size: 1.5rem;
+    padding-bottom: 0.25%;
+    margin-top: 1.5%;
+    margin-bottom: 1%;
+    margin-left: 0.75%;
+  }
+
+  select:hover {
+    cursor:pointer;
+  }
+
+  select option {
+    background-color: #E03357;
+  }
+
+  label {
+    font-size: 1.5rem;  
+    width: 10%;
+    margin-left: 35.5%;
+    font-weight: bold;
+  }