Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added surface area to 3D Shapes Calculator #817

Merged
merged 10 commits into from
May 24, 2024
Merged

Added surface area to 3D Shapes Calculator #817

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9dd900f
3D shapes calculator added which includes both surface area and volum…
debangi29 May 24, 2024
dfba0d1
Delete Calculators/3D-Shapes-Calculator/back2.webp
Rakesh9100 May 24, 2024
fdc6a3b
Update index.html
Rakesh9100 May 24, 2024
475a4c1
Create script.js
Rakesh9100 May 24, 2024
82fa8df
Update style.css
Rakesh9100 May 24, 2024
5a78146
Create README.md
Rakesh9100 May 24, 2024
5c9d3e3
Delete Calculators/3D-Shapes-Calculator/3D-Shapes-Volume-Calculator/R…
Rakesh9100 May 24, 2024
380d234
Delete Calculators/3D-Shapes-Calculator/Surface-Area-Calculator/imgba…
Rakesh9100 May 24, 2024
d4e08ae
Update index.html
Rakesh9100 May 24, 2024
37af600
Update style.css
Rakesh9100 May 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 ...ors/3D-Shapes-Volume-Calculator/README.md → ...tor/3D-Shapes-Volume-Calculator/README.md
View file
Open in desktop
File renamed without changes.
0 ...s-Volume-Calculator/assets/background.jpg → ...s-Volume-Calculator/assets/background.jpg
View file
Open in desktop
File renamed without changes
0 ...rs/3D-Shapes-Volume-Calculator/index.html → ...or/3D-Shapes-Volume-Calculator/index.html
View file
Open in desktop
File renamed without changes.
0 ...ors/3D-Shapes-Volume-Calculator/script.js → ...tor/3D-Shapes-Volume-Calculator/script.js
View file
Open in desktop
File renamed without changes.
0 ...ors/3D-Shapes-Volume-Calculator/style.css → ...tor/3D-Shapes-Volume-Calculator/style.css
View file
Open in desktop
File renamed without changes.
Binary file added Calculators/3D-Shapes-Calculator/Surface-Area-Calculator/imgbackground.png
View file
Open in desktop
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 Calculators/3D-Shapes-Calculator/Surface-Area-Calculator/index.html
View file
Open in desktop
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">&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>
123 changes: 123 additions & 0 deletions Calculators/3D-Shapes-Calculator/Surface-Area-Calculator/script.js
View file
Open in desktop
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 Calculators/3D-Shapes-Calculator/Surface-Area-Calculator/style.css
View file
Open in desktop
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 added Calculators/3D-Shapes-Calculator/back2.webp
View file
Open in desktop
Binary file not shown.
37 changes: 37 additions & 0 deletions Calculators/3D-Shapes-Calculator/index.html
View file
Open in desktop
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>
Loading