Added Octal Calculator (#1766)

Rakesh9100 · Aug 3, 2024 · 62d8ca7 · 62d8ca7
1 parent 681855b
commit 62d8ca7
Show file tree

Hide file tree

Showing 5 changed files with 240 additions and 0 deletions.
diff --git a/Calculators/Octal-Calculator/README.md b/Calculators/Octal-Calculator/README.md
@@ -0,0 +1,22 @@
+# <p align="center">Octal Calculator</p>
+
+## 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
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="style.css">
+    <title>Octal Calculator</title>
+</head>
+
+<body>
+    <div class="calculator">
+        <h3>Octal Calculator</h3>
+        <form id="calculatorForm">
+            <div class="form-group">
+                <label for="octalInput1">Octal Number 1:</label>
+                <input type="text" class="form-control" id="octalInput1" placeholder="Enter octal number">
+            </div>
+            <div class="form-group">
+                <label for="operation">Operation:</label>
+                <select class="form-control" id="operation">
+                    <option value="add">Addition (+)</option>
+                    <option value="subtract">Subtraction (-)</option>
+                    <option value="multiply">Multiplication (*)</option>
+                    <option value="divide">Division (/)</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="octalInput2">Octal Number 2:</label>
+                <input type="text" class="form-control" id="octalInput2" placeholder="Enter octal number">
+            </div>
+            <div class="form-group">
+                <label for="result">Result:</label>
+                <input type="text" class="form-control" id="result" disabled>
+            </div>
+            <button type="button" class="button-85" onclick="calculate()">Calculate</button>
+            <button type="button" class="button-85" onclick="clearInput()">Clear</button>
+        </form>
+    </div>
+    <!-- Bootstrap JS and jQuery -->
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Calculators/Octal-Calculator/script.js 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
@@ -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
@@ -3417,6 +3417,20 @@ <h3>Calculator to assess the risk of web vulnerabilities based on OWASP Risk Ass
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Octal Calculator</h2>
+                <h3>Performs the arithmetic operations on octal numbers.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Octal-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Octal-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
         <div class="box">
             <div class="content">
                 <h2>Ohms Law Calculator</h2>