diff --git a/Calculators/Octal-Calculator/README.md b/Calculators/Octal-Calculator/README.md new file mode 100644 index 000000000..6855c653f --- /dev/null +++ b/Calculators/Octal-Calculator/README.md @@ -0,0 +1,22 @@ +#

Octal Calculator

+ +## Description :- + +This is a simple web-based octal calculator that performs basic arithmetic operations (addition, subtraction, multiplication, and division) on octal numbers. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Features :- + +- Performs addition, subtraction, multiplication, and division on octal numbers. +- User-friendly interface with an attractive, responsive design. +- Input validation for octal numbers. +- Clear input fields with a single click. + +## Screenshots :- + +![image](https://github.com/user-attachments/assets/57b1d230-197f-46f8-aff8-160198a67dfd) diff --git a/Calculators/Octal-Calculator/index.html b/Calculators/Octal-Calculator/index.html new file mode 100644 index 000000000..3031edc63 --- /dev/null +++ b/Calculators/Octal-Calculator/index.html @@ -0,0 +1,50 @@ + + + + + + + + + + + Octal Calculator + + + +
+

Octal Calculator

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + +
+
+ + + + + + + + diff --git a/Calculators/Octal-Calculator/script.js b/Calculators/Octal-Calculator/script.js new file mode 100644 index 000000000..dac78159e --- /dev/null +++ b/Calculators/Octal-Calculator/script.js @@ -0,0 +1,45 @@ +function calculate() { + var octalInput1 = document.getElementById('octalInput1').value; + var octalInput2 = document.getElementById('octalInput2').value; + var operation = document.getElementById('operation').value; + + // Validate octal inputs + if (!octalInput1.match(/^[0-7]+$/) || !octalInput2.match(/^[0-7]+$/)) { + alert('Invalid octal input!'); + return; + } + + var decimal1 = parseInt(octalInput1, 8); + var decimal2 = parseInt(octalInput2, 8); + var result; + + switch (operation) { + case 'add': + result = decimal1 + decimal2; + break; + case 'subtract': + result = decimal1 - decimal2; + break; + case 'multiply': + result = decimal1 * decimal2; + break; + case 'divide': + if (decimal2 === 0) { + alert('Division by zero is not allowed!'); + return; + } + result = decimal1 / decimal2; + break; + default: + alert('Invalid operation!'); + return; + } + + document.getElementById('result').value = result.toString(8); // Convert decimal result to octal +} + +function clearInput() { + document.getElementById('octalInput1').value = ''; + document.getElementById('octalInput2').value = ''; + document.getElementById('result').value = ''; +} diff --git a/Calculators/Octal-Calculator/style.css b/Calculators/Octal-Calculator/style.css new file mode 100644 index 000000000..e4fdacaf9 --- /dev/null +++ b/Calculators/Octal-Calculator/style.css @@ -0,0 +1,109 @@ +body { + background: linear-gradient(135deg, #f06, #ffdd00, #00ff99, #00aaff, #a400ff); + background-size: 400% 400%; + animation: gradient 15s ease infinite; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + font-family: Arial, sans-serif; + margin: 0; +} + +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +.calculator { + max-width: 400px; + width: 100%; + background-color: #ffffff; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + padding: 30px; + border-radius: 20px; + text-align: center; +} + +h3 { + padding-bottom: 20px; + margin: auto; + font-weight: 300; + color: #333333; +} + +.button-85 { + padding: 0.6em 2em; + border: none; + outline: none; + color: #ffffff; + background: #007bff; + cursor: pointer; + position: relative; + z-index: 0; + border-radius: 10px; + user-select: none; + margin: 10px; + transition: background-color 0.3s ease; +} + +.button-85:hover { + background-color: #0056b3; +} + +.button-85:active { + background-color: #003f7f; +} + +.button-85:before, +.button-85:after { + content: ""; + position: absolute; + width: calc(100% + 4px); + height: calc(100% + 4px); + border-radius: 10px; + z-index: -1; +} + +.button-85:before { + top: -2px; + left: -2px; + background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); + background-size: 400%; + filter: blur(5px); + animation: glowing-button-85 20s linear infinite; +} + +@keyframes glowing-button-85 { + 0% { + background-position: 0 0; + } + 50% { + background-position: 400% 0; + } + 100% { + background-position: 0 0; + } +} + +.button-85:after { + background: #222222; + top: 0; + left: 0; +} + +.form-group { + text-align: left; + margin-bottom: 20px; +} + +.form-control { + border-radius: 10px; +} diff --git a/index.html b/index.html index 5ed112a79..efaec80d5 100644 --- a/index.html +++ b/index.html @@ -3417,6 +3417,20 @@

Calculator to assess the risk of web vulnerabilities based on OWASP Risk Ass +
+
+

Octal Calculator

+

Performs the arithmetic operations on octal numbers.

+
+ + + + + Source Code + +
+
+

Ohms Law Calculator