diff --git a/Calculators/3D-Shapes-Volume-Calculator/assets/background.jpg b/Calculators/3D-Shapes-Calculator/3D-Shapes-Volume-Calculator/assets/background.jpg similarity index 100% rename from Calculators/3D-Shapes-Volume-Calculator/assets/background.jpg rename to Calculators/3D-Shapes-Calculator/3D-Shapes-Volume-Calculator/assets/background.jpg diff --git a/Calculators/3D-Shapes-Volume-Calculator/index.html b/Calculators/3D-Shapes-Calculator/3D-Shapes-Volume-Calculator/index.html similarity index 100% rename from Calculators/3D-Shapes-Volume-Calculator/index.html rename to Calculators/3D-Shapes-Calculator/3D-Shapes-Volume-Calculator/index.html diff --git a/Calculators/3D-Shapes-Volume-Calculator/script.js b/Calculators/3D-Shapes-Calculator/3D-Shapes-Volume-Calculator/script.js similarity index 100% rename from Calculators/3D-Shapes-Volume-Calculator/script.js rename to Calculators/3D-Shapes-Calculator/3D-Shapes-Volume-Calculator/script.js diff --git a/Calculators/3D-Shapes-Volume-Calculator/style.css b/Calculators/3D-Shapes-Calculator/3D-Shapes-Volume-Calculator/style.css similarity index 100% rename from Calculators/3D-Shapes-Volume-Calculator/style.css rename to Calculators/3D-Shapes-Calculator/3D-Shapes-Volume-Calculator/style.css diff --git a/Calculators/3D-Shapes-Calculator/README.md b/Calculators/3D-Shapes-Calculator/README.md new file mode 100644 index 000000000..c83281379 --- /dev/null +++ b/Calculators/3D-Shapes-Calculator/README.md @@ -0,0 +1,13 @@ +#

3D Shapes Calculator

+ +## 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 new file mode 100644 index 000000000..31bcba8f8 --- /dev/null +++ b/Calculators/3D-Shapes-Calculator/Surface-Area-Calculator/index.html @@ -0,0 +1,100 @@ + + + + + + + + + + + 3D Shapes Surface Area Calculator + + + +
+
+ S + U + R + F + A + C + E +   + A + R + E + A +   + C + A + L + C + U + L + A + T + O + R +
+

+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+

+
+
+ + + + diff --git a/Calculators/3D-Shapes-Calculator/Surface-Area-Calculator/script.js b/Calculators/3D-Shapes-Calculator/Surface-Area-Calculator/script.js new file mode 100644 index 000000000..93332bf09 --- /dev/null +++ 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 new file mode 100644 index 000000000..a23e759a5 --- /dev/null +++ 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 new file mode 100644 index 000000000..7d98d5fea --- /dev/null +++ b/Calculators/3D-Shapes-Calculator/index.html @@ -0,0 +1,30 @@ + + + + + + + + + + 3D Shapes Calculator + + + +
+

3D Shapes Calculator

+
+ + +
+ +
+ + + + + diff --git a/Calculators/3D-Shapes-Calculator/script.js b/Calculators/3D-Shapes-Calculator/script.js new file mode 100644 index 000000000..ca692f32f --- /dev/null +++ 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`; + } +} diff --git a/Calculators/3D-Shapes-Calculator/style.css b/Calculators/3D-Shapes-Calculator/style.css new file mode 100644 index 000000000..94521d0bd --- /dev/null +++ b/Calculators/3D-Shapes-Calculator/style.css @@ -0,0 +1,104 @@ +body { + font-family: 'Roboto', sans-serif; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-image: url('assets/background.jpg'); /* Replace 'background.jpg' with the path to your background image */ + background-size: cover; + background-position: center; + background-repeat: no-repeat; + flex-direction: column; + min-height: 100vh; +} + + +.header { + color: white; + text-shadow: 0.5px 0.5px 1px #302f2f; + animation: fadeInScale 2s ease-in-out; +} + +@keyframes fadeInScale { + 0% { + opacity: 0; + transform: scale(0.8); + } + 100% { + opacity: 1; + transform: scale(1); + } +} + +.selectCalculator { + text-align: center; + margin: 20px 0; +} + +.submit-button { + display: block; + margin: 20px auto; + padding: 10px 20px; + background-color: #5d13d4; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; +} + +.submit-button:hover { + background-color: #45a049; +} + +.main { + text-align: center; + background: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.header { + margin-bottom: 20px; + font-size: 30px; + color: #333; +} + +.selectCalculator { + margin-bottom: 20px; +} + +label { + font-size: 18px; + color: #555; +} + +select { + padding: 10px; + font-size: 16px; + border: 1px solid #ddd; + border-radius: 4px; + background-color: #fff; + transition: border-color 0.3s ease; +} + +select:focus { + border-color: #007bff; + outline: none; +} +.calculator-container { + background-color: rgba(255, 255, 255, 0.8); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + border-radius: 10px; + padding: 20px; + text-align: center; + width: 300px; + height: 300px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 20px; +} diff --git a/Calculators/3D-Shapes-Volume-Calculator/README.md b/Calculators/3D-Shapes-Volume-Calculator/README.md deleted file mode 100644 index 7ac690b2b..000000000 --- a/Calculators/3D-Shapes-Volume-Calculator/README.md +++ /dev/null @@ -1,15 +0,0 @@ -#

3D Shapes Volume Calculator

- -## Description :- - -Calculates the volume of different important and useful 3D shapes. - -## Tech Stacks :- - -- HTML -- CSS -- JavaScript - -## Screenshots :- - -![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/64203d2f-a9b8-49e3-9b86-be3a00368190) diff --git a/index.html b/index.html index c41065384..8530b8335 100644 --- a/index.html +++ b/index.html @@ -120,13 +120,13 @@

Calculates the area and perimeter of different useful 2D shapes.

-

3D Shapes Volume Calculator

-

Calculates the volume of different important and useful 3D shapes.

+

3D Shapes Calculator

+

Calculates the volume and surface area of different important and useful 3D shapes.

- + - + Source Code