Added surface area to 3D Shapes Calculator (#817)

Rakesh9100 · May 24, 2024 · 04215b0 · 04215b0
1 parent da0dd75
commit 04215b0
Show file tree

Hide file tree

Showing 13 changed files with 487 additions and 19 deletions.
diff --git a/...s-Volume-Calculator/assets/background.jpg → ...s-Volume-Calculator/assets/background.jpg b/...s-Volume-Calculator/assets/background.jpg → ...s-Volume-Calculator/assets/background.jpg
diff --git a/...rs/3D-Shapes-Volume-Calculator/index.html → ...or/3D-Shapes-Volume-Calculator/index.html b/...rs/3D-Shapes-Volume-Calculator/index.html → ...or/3D-Shapes-Volume-Calculator/index.html
diff --git a/...ors/3D-Shapes-Volume-Calculator/script.js → ...tor/3D-Shapes-Volume-Calculator/script.js b/...ors/3D-Shapes-Volume-Calculator/script.js → ...tor/3D-Shapes-Volume-Calculator/script.js
diff --git a/...ors/3D-Shapes-Volume-Calculator/style.css → ...tor/3D-Shapes-Volume-Calculator/style.css b/...ors/3D-Shapes-Volume-Calculator/style.css → ...tor/3D-Shapes-Volume-Calculator/style.css
diff --git a/Calculators/3D-Shapes-Calculator/README.md b/Calculators/3D-Shapes-Calculator/README.md
@@ -0,0 +1,13 @@
+# <p align="center">3D Shapes Calculator</p>
+
+## Description :-
+
+Calculates the volume and surface area of different important and useful 3D shapes.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
diff --git a/Calculators/3D-Shapes-Calculator/Surface-Area-Calculator/index.html b/Calculators/3D-Shapes-Calculator/Surface-Area-Calculator/index.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@500&display=swap" rel="stylesheet">
+    <title>3D Shapes Surface Area Calculator</title>
+</head>
+
+<body>
+    <div class="card">
+        <div class="waviy">
+            <span style="--i:1">S</span>
+            <span style="--i:2">U</span>
+            <span style="--i:4">R</span>
+            <span style="--i:5">F</span>
+            <span style="--i:6">A</span>
+            <span style="--i:7">C</span>
+            <span style="--i:8">E</span>
+            <span style="--i:9">&nbsp;</span>
+            <span style="--i:10">A</span>
+            <span style="--i:10">R</span>
+            <span style="--i:10">E </span>
+            <span style="--i:10">A</span>
+            <span style="--i:9">&nbsp;</span>
+            <span style="--i:11">C</span>
+            <span style="--i:12">A</span>
+            <span style="--i:13">L</span>
+            <span style="--i:14">C</span>
+            <span style="--i:15">U</span>
+            <span style="--i:16">L</span>
+            <span style="--i:17">A</span>
+            <span style="--i:18">T</span>
+            <span style="--i:19">O</span>
+            <span style="--i:20">R</span>
+        </div>
+        <br><br>
+        <div class="row">
+            <select id="shape" name="shape" onchange="showDimensions()" required>
+                <option value="" disabled selected hidden>Select a shape</option>
+                <option value="cube">Cube</option>
+                <option value="cuboid">Cuboid</option>
+                <option value="cone">Cone</option>
+                <option value="cylinder">Cylinder</option>
+                <option value="sphere">Sphere</option>
+                <option value="triangularPrism">Triangular Prism</option>
+                <option value="rectangularPrism">Rectangular Prism</option>
+                <option value="torus">Torus</option>
+            </select>
+        </div>
+        <br>
+        <br>
+        <div class="row" id="length-row" style="display: none;">
+            <label for="length">Enter Length:</label>
+            <input type="number" id="length" name="length">
+        </div><br>
+        <div class="row" id="width-row" style="display: none;">
+            <label for="width">Enter Width:</label>
+            <input type="number" id="width" name="width">
+        </div><br>
+        <div class="row" id="height-row" style="display: none;">
+            <label for="height">Enter Height:</label>
+            <input type="number" id="height" name="height">
+        </div><br>
+        <div class="row" id="radius-row" style="display: none;">
+            <label for="radius">Enter Radius:</label>
+            <input type="number" id="radius" name="radius">
+        </div><br>
+        <div class="row" id="slant-height-row" style="display: none;">
+            <label for="slant-height">Enter Slant Height:</label>
+            <input type="number" id="slant-height" name="slant-height">
+        </div><br>
+        <div class="row" id="base-length-row" style="display: none;">
+            <label for="base-length">Enter Base Length:</label>
+            <input type="number" id="base-length" name="base-length">
+        </div><br>
+        <div class="row" id="base-width-row" style="display: none;">
+            <label for="base-width">Enter Base Width:</label>
+            <input type="number" id="base-width" name="base-width">
+        </div><br>
+        <div class="row" id="minor-radius-row" style="display: none;">
+            <label for="minor-radius">Enter Minor Radius:</label>
+            <input type="number" id="minor-radius" name="minor-radius">
+        </div><br>
+        <div class="rule"></div>
+        <div class="form-footer">
+            <button class="button" onclick="calculate(event)">Calculate</button>
+        </div>
+        <div id="result-container">
+            <p id="result"></p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Calculators/3D-Shapes-Calculator/Surface-Area-Calculator/script.js b/Calculators/3D-Shapes-Calculator/Surface-Area-Calculator/script.js
@@ -0,0 +1,123 @@
+function showDimensions() {
+    const shape = document.getElementById('shape').value;
+    document.getElementById('length-row').style.display = 'none';
+    document.getElementById('width-row').style.display = 'none';
+    document.getElementById('height-row').style.display = 'none';
+    document.getElementById('radius-row').style.display = 'none';
+    document.getElementById('slant-height-row').style.display = 'none';
+    document.getElementById('base-length-row').style.display = 'none';
+    document.getElementById('base-width-row').style.display = 'none';
+    document.getElementById('minor-radius-row').style.display = 'none';
+
+    switch (shape) {
+        case 'cube':
+            document.getElementById('length-row').style.display = 'block';
+            break;
+        case 'cuboid':
+            document.getElementById('length-row').style.display = 'block';
+            document.getElementById('width-row').style.display = 'block';
+            document.getElementById('height-row').style.display = 'block';
+            break;
+        case 'cone':
+            document.getElementById('radius-row').style.display = 'block';
+            document.getElementById('slant-height-row').style.display = 'block';
+            break;
+        case 'cylinder':
+            document.getElementById('radius-row').style.display = 'block';
+            document.getElementById('height-row').style.display = 'block';
+            break;
+        case 'sphere':
+            document.getElementById('radius-row').style.display = 'block';
+            break;
+        case 'triangularPrism':
+            document.getElementById('base-length-row').style.display = 'block';
+            document.getElementById('height-row').style.display = 'block';
+            document.getElementById('length-row').style.display = 'block';
+            break;
+        case 'rectangularPrism':
+            document.getElementById('length-row').style.display = 'block';
+            document.getElementById('width-row').style.display = 'block';
+            document.getElementById('height-row').style.display = 'block';
+            break;
+        case 'torus':
+            document.getElementById('radius-row').style.display = 'block';
+            document.getElementById('minor-radius-row').style.display = 'block';
+            break;
+        default:
+            break;
+    }
+}
+
+function calculate(event) {
+    event.preventDefault();
+    const shape = document.getElementById('shape').value;
+    let result;
+
+    function validateInputs(...inputs) {
+        for (const input of inputs) {
+            if (input < 0) {
+                document.getElementById('result').textContent = "Lengths can't be negative Dude!!!";
+                return false;
+            }
+        }
+        return true;
+    }
+
+    switch (shape) {
+        case 'cube':
+            const length = parseFloat(document.getElementById('length').value);
+            if (!validateInputs(length)) return;
+            result = 6 * length * length;
+            break;
+        case 'cuboid':
+            const l = parseFloat(document.getElementById('length').value);
+            const w = parseFloat(document.getElementById('width').value);
+            const h = parseFloat(document.getElementById('height').value);
+            if (!validateInputs(l, w, h)) return;
+            result = 2 * (l * w + l * h + w * h);
+            break;
+        case 'cone':
+            const rCone = parseFloat(document.getElementById('radius').value);
+            const slantHeight = parseFloat(document.getElementById('slant-height').value);
+            if (!validateInputs(rCone, slantHeight)) return;
+            result = Math.PI * rCone * (rCone + slantHeight);
+            break;
+        case 'cylinder':
+            const rCylinder = parseFloat(document.getElementById('radius').value);
+            const hCylinder = parseFloat(document.getElementById('height').value);
+            if (!validateInputs(rCylinder, hCylinder)) return;
+            result = 2 * Math.PI * rCylinder * (rCylinder + hCylinder);
+            break;
+        case 'sphere':
+            const rSphere = parseFloat(document.getElementById('radius').value);
+            if (!validateInputs(rSphere)) return;
+            result = 4 * Math.PI * Math.pow(rSphere, 2);
+            break;
+        case 'triangularPrism':
+            const bLength = parseFloat(document.getElementById('base-length').value);
+            const height = parseFloat(document.getElementById('height').value);
+            const lengthPrism = parseFloat(document.getElementById('length').value);
+            if (!validateInputs(bLength, height, lengthPrism)) return;
+            const baseArea = 0.5 * bLength * height;
+            const perimeter = 3 * bLength;
+            result = 2 * baseArea + perimeter * lengthPrism;
+            break;
+        case 'rectangularPrism':
+            const lRect = parseFloat(document.getElementById('length').value);
+            const wRect = parseFloat(document.getElementById('width').value);
+            const hRect = parseFloat(document.getElementById('height').value);
+            if (!validateInputs(lRect, wRect, hRect)) return;
+            result = 2 * (lRect * wRect + lRect * hRect + wRect * hRect);
+            break;
+        case 'torus':
+            const rMajor = parseFloat(document.getElementById('radius').value);
+            const rMinor = parseFloat(document.getElementById('minor-radius').value);
+            if (!validateInputs(rMajor, rMinor)) return;
+            result = 4 * Math.PI * Math.PI * rMajor * rMinor;
+            break;
+        default:
+            result = 'Please select a shape and provide valid inputs';
+    }
+
+    document.getElementById('result').textContent = `Surface Area: ${result.toFixed(2)}`;
+}
diff --git a/Calculators/3D-Shapes-Calculator/Surface-Area-Calculator/style.css b/Calculators/3D-Shapes-Calculator/Surface-Area-Calculator/style.css
@@ -0,0 +1,107 @@
+body {
+    font-family: 'Inconsolata', monospace;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-image: url('assets/background.jpg');
+    margin: 0;
+}
+
+.card {
+    background: rgba(255, 255, 255, 0.9); /* Slightly transparent to see some background */
+    padding: 2em;
+    border-radius: 15px;
+    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
+    width: 350px;
+    text-align: center;
+}
+
+.waviy {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+}
+
+.waviy span {
+    display: inline-block;
+    font-size: 30px;
+    color: #a40c8b;
+    animation: waviy 1.2s infinite;
+}
+
+.waviy span:nth-child(even) {
+    animation-delay: 0.1s;
+}
+
+@keyframes waviy {
+    0%, 40%, 100% {
+        transform: translateY(0);
+    }
+    20% {
+        transform: translateY(-12px);
+    }
+}
+
+.row {
+    margin-bottom: 1.5em;
+}
+
+label {
+    display: block;
+    margin-bottom: 0.5em;
+    font-size: 16px;
+    color: #333;
+}
+
+input, select {
+    width: 100%;
+    padding: 0.6em;
+    border: 2px solid #ddd;
+    border-radius: 10px;
+    font-size: 16px;
+    transition: border-color 0.3s;
+}
+
+input:focus, select:focus {
+    border-color: #4A90E2;
+    outline: none;
+}
+
+button {
+    width: 100%;
+    padding: 0.8em;
+    background: linear-gradient(135deg, #6A82FB, #FC5C7D);
+    color: white;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background 0.3s, transform 0.2s;
+}
+
+button:hover {
+    background: linear-gradient(135deg, #FC5C7D, #6A82FB);
+    transform: translateY(-2px);
+}
+
+.rule {
+    border-bottom: 2px solid #eee;
+    margin: 1em 0;
+}
+
+.form-footer {
+    display: flex;
+    justify-content: center;
+}
+
+#result-container {
+    margin-top: 1.5em;
+    text-align: center;
+}
+
+#result {
+    font-size: 20px;
+    color: #333;
+    font-weight: bold;
+}
diff --git a/Calculators/3D-Shapes-Calculator/index.html b/Calculators/3D-Shapes-Calculator/index.html
@@ -0,0 +1,30 @@
+<!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">
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
+    <title>3D Shapes Calculator</title>
+</head>
+
+<body>
+    <header class="main">
+        <h1 class="header">3D Shapes Calculator</h1>
+        <div class="selectCalculator">
+            <label for="calculator">Select Calculator: </label>
+            <select id="calculator" name="calculator">
+                <option value="None">--Select calculator type--</option>
+                <option value="3D-Shapes-Volume-Calculator">Volume Calculator</option>
+                <option value="Surface-Area-Calculator">Surface Area Calculator</option>
+            </select>
+        </div>
+        <button class="submit-button" onclick="navigateToCalculator()">Submit</button>
+    </header>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Calculators/3D-Shapes-Calculator/script.js b/Calculators/3D-Shapes-Calculator/script.js
@@ -0,0 +1,6 @@
+function navigateToCalculator() {
+    const select = document.getElementById('calculator');
+    if (select.value !== "None") {
+        window.location.href = `./${select.value}/index.html`;
+    }
+}