Added more options in Binary Calculator (#1934)

Calculators/Binary-Calculator/README.md

@@ -12,12 +12,27 @@ This web application allows you to perform various binary operations on given bi
 
 ## Features :-
 
-- Binary Addition: Add two binary numbers together.
-- Binary Subtraction: Subtract one binary number from another.
-- Binary Multiplication: Multiply two binary numbers.
-- Left Shift: Shift the bits of a binary number to the left.
-- Right Shift: Shift the bits of a binary number to the right.
+- **Binary Addition**: Add two binary numbers together to get the sum.
+- **Binary Subtraction**: Subtract one binary number from another to get the difference.
+- **Binary Multiplication**: Multiply two binary numbers to get the product.
+- **Left Shift**: Shift the bits of a binary number to the left, filling with zeroes.
+- **Right Shift**: Shift the bits of a binary number to the right, filling with zeroes or the sign bit.
+- **Addition**: Add two numbers together.
+- **Subtraction**: Subtract one number from another.
+- **Multiplication**: Multiply two numbers together.
+- **Division**: Divide one number by another to get the quotient.
+- **Left Shift**: Shift the bits of a number to the left, discarding bits.
+- **Right Shift**: Shift the bits of a number to the right, discarding bits.
+- **AND Operator**: Perform a bitwise AND operation between two binary numbers.
+- **OR Operator**: Perform a bitwise OR operation between two binary numbers.
+- **XOR Operator**: Perform a bitwise XOR operation between two binary numbers.
+- **XNOR Operator**: Perform a bitwise XNOR operation between two binary numbers.
+- **NAND Operator**: Perform a bitwise NAND operation between two binary numbers.
+- **NOT Operator**: Perform a bitwise NOT operation to invert the bits of a binary number.
+- **Binary To Gray Operator**: Convert a binary number to its corresponding Gray code.
 
 ## Screenshots :-
 
-![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/8a25411d-199c-47c8-9cd5-2e12d426ea58)
+![image](https://github.com/user-attachments/assets/a78d6cfd-87ee-4c3f-8a2b-ad25486c7e1d)
+
+![image](https://github.com/user-attachments/assets/397168f3-15c3-46e7-9316-470b79dbaff6)

Calculators/Binary-Calculator/index.html

@@ -32,6 +32,10 @@ <h1>Binary Calculator</h1>
                     <option value="and">AND Operator</option>
                     <option value="or">OR Operator</option>
                     <option value="xor">XOR Operator</option>
+                    <option value="xnor">XNOR Operator</option>
+                    <option value="nand">NAND Operator</option>
+                    <option value="not">NOT Operator</option>
+                    <option value="binaryToGray">Binary To Gray Operator</option>
                 </select>
             </div>
             <button type="button" onclick="calculate()">Calculate</button>
@@ -44,4 +48,5 @@ <h1>Binary Calculator</h1>
     </div>
     <script src="script.js"></script>
 </body>
-</html>
+
+</html>

Calculators/Binary-Calculator/script.js

@@ -4,17 +4,26 @@ function calculate() {
     const binary2 = document.getElementById('binary2').value;
     const operation = document.getElementById('operation').value;
 
-    // Validate binary input
-    if (!/^[01]+$/.test(binary1) || !/^[01]+$/.test(binary2)) {
-        alert("Please enter valid binary numbers.");
-        return;
+    // Validate the binary inputs based on selected operation
+    if (operation !== "not" && operation !== "binaryToGray") {
+        if (!/^[01]+$/.test(binary1) || !/^[01]+$/.test(binary2)) {
+            alert("Please enter valid binary numbers.");
+            return;
+        }
+    } else {
+        // Validate binary input for operations that require only one input (e.g., NOT, Binary to Gray)
+        if (!/^[01]+$/.test(binary1)) {
+            alert("Please enter a valid binary number.");
+            return;
+        }
     }
 
     // Convert binary to decimal
     const num1 = parseInt(binary1, 2);
     const num2 = parseInt(binary2, 2);
     let result;
     let decimal;
+
     // Perform the selected operation
     switch (operation) {
         case "add":
@@ -42,17 +51,39 @@ function calculate() {
             decimal = (num1 / num2);
             break;
         case "and":
-            result = (num1 && num2).toString(2);
-            decimal = (num1 && num2);
+            result = (num1 & num2).toString(2);
+            decimal = (num1 & num2);
             break;
         case "or":
-            result = (num1 || num2).toString(2);
-            decimal = (num1 || num2);
+            result = (num1 | num2).toString(2);
+            decimal = (num1 | num2);
             break;
         case "xor":
             result = (num1 ^ num2).toString(2);
             decimal = (num1 ^ num2);
             break;
+        case "xnor":
+            let xorResult = num1 ^ num2;
+            let xnorResult = (~xorResult & ((1 << Math.max(num1.toString(2).length, num2.toString(2).length)) - 1));
+            result = xnorResult.toString(2);
+            decimal = xnorResult;
+            break;
+        case "nand":
+            let andResult = num1 & num2;
+            let nandResult = (~andResult & ((1 << Math.max(num1.toString(2).length, num2.toString(2).length)) - 1));
+            result = nandResult.toString(2);
+            decimal = nandResult;
+            break;
+        case "not":
+            let notResult = (~num1 & ((1 << num1.toString(2).length) - 1));
+            result = notResult.toString(2);
+            decimal = notResult;
+            break;
+        case "binaryToGray":
+            let grayCode = (num1 ^ (num1 >> 1)); // Binary to Gray Code conversion formula
+            result = grayCode.toString(2);
+            decimal = grayCode;
+            break;
         default:
             alert("Invalid operation.");
             return;
@@ -62,3 +93,24 @@ function calculate() {
     document.getElementById('result').innerText = `Result: ${result}`;
     document.getElementById('decimal').innerText = `Decimal Value: ${decimal}`;
 }
+
+// Function to toggle input fields based on operation selection
+function toggleInputFields() {
+    const operation = document.getElementById('operation').value;
+    const binary2Group = document.querySelector('.group2');
+    const binary2Input = document.getElementById('binary2');
+
+    if (operation === "binaryToGray" || operation === "not") {
+        // Hide second input field for Binary to Gray and NOT operation
+        binary2Group.style.display = 'none';
+    } else {
+        // Show second input field for other operations
+        binary2Group.style.display = 'block';
+    }
+}
+
+// Event listener to handle changes in the operation selection
+document.getElementById('operation').addEventListener('change', toggleInputFields);
+
+// Call toggleInputFields initially to ensure proper state
+toggleInputFields();

Calculators/Binary-Calculator/style.css

@@ -1,6 +1,9 @@
 body {
     font-family: Arial, sans-serif;
-    background: linear-gradient(135deg, #ff9966, #ff5e62);
+    background-image: url('assets/background.jpg');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -9,13 +12,14 @@ body {
 }
 
 .container {
-    background-color: white;
+    background: linear-gradient(135deg, #ff9966, #ff5e62);
     padding: 20px;
     border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    transition: transform 0.3s;
-    width: 500px;
-    height: 450px;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    max-width: 450px;
+    height: auto;
+    min-height: 450px;
 }
 
 .container:hover {
@@ -25,16 +29,18 @@ body {
 h1 {
     margin-bottom: 30px;
     text-align: center;
-    color: #555;
+    color: #fff;
+    font-size: 24px;
 }
 
 .input-group {
     display: flex;
     flex-direction: column;
-    margin-bottom: 10px;
+    margin-bottom: 15px;
 }
 
-.group1, .group2{
+.group1,
+.group2 {
     margin-bottom: 20px;
 }
 
@@ -44,34 +50,37 @@ h1 {
 
 label {
     margin-bottom: 5px;
-    color: #333;
+    color: #fff;
 }
 
-input[type="text"], select {
-    padding: 8px;
+input[type="text"],
+select {
+    padding: 10px;
     box-sizing: border-box;
     border: 1px solid #ccc;
     border-radius: 4px;
     width: 100%;
     transition: border-color 0.3s;
 }
 
-input[type="text"]:focus, select:focus {
+input[type="text"]:focus,
+select:focus {
     border-color: #ff9966;
     outline: none;
 }
 
 button {
     display: block;
     margin: 20px auto;
-    background: linear-gradient(135deg, #ff9966, #ff5e62);
+    background: linear-gradient(135deg, #1c81ec, #fd29cb);
     color: white;
     border: none;
-    padding: 10px 15px;
+    padding: 12px 20px;
     cursor: pointer;
     border-radius: 4px;
-    font-size: 16px;
+    font-size: 18px;
     transition: transform 0.3s;
+    width: 100%;
 }
 
 button:hover {
@@ -81,4 +90,44 @@ button:hover {
 #results {
     margin-top: 20px;
     text-align: center;
+    color: #fff;
+}
+
+#result,
+#decimal {
+    font-weight: bold;
+    font-size: 20px;
 }
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .container {
+        width: 90%;
+        padding: 15px;
+    }
+
+    h1 {
+        font-size: 20px;
+    }
+
+    button {
+        font-size: 16px;
+        padding: 10px;
+    }
+}
+
+@media (max-width: 480px) {
+    .container {
+        width: 95%;
+        height: auto;
+    }
+
+    h1 {
+        font-size: 18px;
+    }
+
+    button {
+        font-size: 14px;
+        padding: 8px;
+    }
+}