-
Notifications
You must be signed in to change notification settings - Fork 398
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
3D shapes calculator added which includes both surface area and volum…
…e calculator; Surface area calculator functionality added newly
- Loading branch information
Showing
13 changed files
with
479 additions
and
4 deletions.
There are no files selected for viewing
File renamed without changes.
File renamed without changes
File renamed without changes.
File renamed without changes.
File renamed without changes.
Binary file added
BIN
+1.51 MB
Calculators/3D-Shapes-Calculator/Surface-Area-Calculator/imgbackground.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
100 changes: 100 additions & 0 deletions
100
Calculators/3D-Shapes-Calculator/Surface-Area-Calculator/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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>Surface Area of 3D Shapes 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"> </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"> </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> |
123 changes: 123 additions & 0 deletions
123
Calculators/3D-Shapes-Calculator/Surface-Area-Calculator/script.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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)}`; | ||
| } |
106 changes: 106 additions & 0 deletions
106
Calculators/3D-Shapes-Calculator/Surface-Area-Calculator/style.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| body { | ||
| font-family: 'Inconsolata', monospace; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; | ||
| background-image: url(imgbackground.png); | ||
| 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; | ||
| } |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| <!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">3D Shape Volume Calculator</option> | ||
| <option value="Surface-Area-Calculator">3D Shape Surface Area Calculator</option> | ||
| </select> | ||
| </div> | ||
| <button class="submit-button" onclick="navigateToCalculator()">Submit</button> | ||
| </header> | ||
|
|
||
| <script> | ||
| function navigateToCalculator() { | ||
| const select = document.getElementById('calculator'); | ||
| if (select.value !== "None") { | ||
| window.location.href = `./${select.value}/index.html`; | ||
| } | ||
| } | ||
| </script> | ||
| </body> | ||
|
|
||
| </html> |
Oops, something went wrong.