Rakesh9100 · Rakesh9100 · Jun 11, 2024 · Jun 6, 2024 · Jun 8, 2024 · Jun 11, 2024
diff --git a/Calculators/Binary-Calculator/README.md b/Calculators/Binary-Calculator/README.md
@@ -0,0 +1,23 @@
+# <p align="center">Binary Calculator</p>
+
+## Description :-
+
+This web application allows you to perform various binary operations on given binary numbers. With this calculator, you can easily perform binary addition, binary subtraction, binary multiplication, left shift, right shift, and more.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## 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.
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/8a25411d-199c-47c8-9cd5-2e12d426ea58)
diff --git a/Calculators/Binary-Calculator/index.html b/Calculators/Binary-Calculator/index.html
@@ -0,0 +1,41 @@
+<!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">
+    <title>Binary Calculator</title>
+</head>
+
+<body>
+    <div class="container">
+        <h1>Binary Calculator</h1>
+        <form id="calculator-form">
+            <div class="input-group group1">
+                <label for="binary1">Binary 1:</label>
+                <input type="text" id="binary1" required>
+            </div>
+            <div class="input-group group2">
+                <label for="binary2">Binary 2:</label>
+                <input type="text" id="binary2" required>
+            </div>
+            <div class="input-group group3">
+                <label for="operation">Operation:</label>
+                <select id="operation" required>
+                    <option value="add">Addition</option>
+                    <option value="subtract">Subtraction</option>
+                    <option value="multiply">Multiplication</option>
+                    <option value="leftShift">Left Shift</option>
+                    <option value="rightShift">Right Shift</option>
+                </select>
+            </div>
+            <button type="button" onclick="calculate()">Calculate</button>
+        </form>
+        <div id="results">
+            <p id="result"></p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Binary-Calculator/script.js b/Calculators/Binary-Calculator/script.js
@@ -0,0 +1,42 @@
+function calculate() {
+    // Get the input values
+    const binary1 = document.getElementById('binary1').value;
+    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;
+    }
+
+    // Convert binary to decimal
+    const num1 = parseInt(binary1, 2);
+    const num2 = parseInt(binary2, 2);
+    let result;
+
+    // Perform the selected operation
+    switch (operation) {
+        case "add":
+            result = (num1 + num2).toString(2);
+            break;
+        case "subtract":
+            result = (num1 - num2).toString(2);
+            break;
+        case "multiply":
+            result = (num1 * num2).toString(2);
+            break;
+        case "leftShift":
+            result = (num1 << num2).toString(2);
+            break;
+        case "rightShift":
+            result = (num1 >> num2).toString(2);
+            break;
+        default:
+            alert("Invalid operation.");
+            return;
+    }
+
+    // Display the result
+    document.getElementById('result').innerText = `Result: ${result}`;
+}
diff --git a/Calculators/Binary-Calculator/style.css b/Calculators/Binary-Calculator/style.css
@@ -0,0 +1,84 @@
+body {
+    font-family: Arial, sans-serif;
+    background: linear-gradient(135deg, #ff9966, #ff5e62);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.container {
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s;
+    width: 500px;
+    height: 400px;
+}
+
+.container:hover {
+    transform: translateY(-5px);
+}
+
+h1 {
+    margin-bottom: 30px;
+    text-align: center;
+    color: #555;
+}
+
+.input-group {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 10px;
+}
+
+.group1, .group2{
+    margin-bottom: 20px;
+}
+
+.group3 {
+    margin-bottom: 30px;
+}
+
+label {
+    margin-bottom: 5px;
+    color: #333;
+}
+
+input[type="text"], select {
+    padding: 8px;
+    box-sizing: border-box;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    width: 100%;
+    transition: border-color 0.3s;
+}
+
+input[type="text"]:focus, select:focus {
+    border-color: #ff9966;
+    outline: none;
+}
+
+button {
+    display: block;
+    margin: 20px auto;
+    background: linear-gradient(135deg, #ff9966, #ff5e62);
+    color: white;
+    border: none;
+    padding: 10px 15px;
+    cursor: pointer;
+    border-radius: 4px;
+    font-size: 16px;
+    transition: transform 0.3s;
+}
+
+button:hover {
+    transform: translateY(-3px);
+}
+
+#results {
+    margin-top: 20px;
+    text-align: center;
+}
diff --git a/index.html b/index.html
@@ -428,6 +428,20 @@ <h3>Effortlessly split bills with our calculator. Simplify expense sharing now!<
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Binary Calculator</h2>
+                <h3>Calculates results of different binary operations based on inputs.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Binary-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Binary-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>Binomial Distribution Calculator</h2>