Added new Logica MicroOperations Calculator

Rakesh9100 · Aug 9, 2024 · c2ad514 · c2ad514
1 parent 9bb22f7
commit c2ad514
Show file tree

Hide file tree

Showing 7 changed files with 280 additions and 0 deletions.
diff --git a/Calculators/Logical-MicroOperations-Calculator/README.md b/Calculators/Logical-MicroOperations-Calculator/README.md
@@ -0,0 +1,17 @@
+# <p align="center">Logical MicroOperations Calculator</p>
+
+## Description :-
+
+- Solves logical micro-operations of Computer Architecture
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image](../Logical-MicroOperations-Calculator/screenshot1.png)
+![image](../Logical-MicroOperations-Calculator/screenshot2.png)
+![image](../Logical-MicroOperations-Calculator/screenshot3.png)
diff --git a/Calculators/Logical-MicroOperations-Calculator/index.html b/Calculators/Logical-MicroOperations-Calculator/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="robots" content="index, follow">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="language" content="English">
+    <title>Logical Micro-Options Calculator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="calculator">
+        <h1>Logical Micro-Options Calculator</h1>
+        <input type="text" id="binary1" placeholder="Enter Binary 1 (A)" required>
+        <input type="text" id="binary2" placeholder="Enter Binary 2 (B)" required>
+
+        <div class="button-group">
+
+            <button onclick="selectiveSet()" title="If a bit in B is set to 1, that same position in A gets set to 1, otherwise that bit in A keeps its previous value">Selective-set</button>
+
+            <button onclick="selectiveComplement()" title="If a bit in B is set to 1, that same position in A gets complemented from its original value, otherwise it is unchanged">Selective-complement</button>
+
+            <button onclick="selectiveClear()" title="If a bit in B is set to 1, that same position in A gets set to 0, otherwise it is unchanged">Selective-clear</button>
+
+            <button onclick="clearBits()" title="if the bits in the same position in A and B are the same, they are cleared in A,">Clear</button>
+
+            <button onclick="maskDelete()" title="If a bit in B is set to 0, that same position in A gets set to 0, otherwise it is unchanged">Mask (Delete)</button>
+
+            <button onclick="insert()" title="Insert a specific bit pattern into the first binary input, while preserving other bits">Insert</button>
+
+            <button onclick="compare()" title="Compare the two binary inputs and highlight the differences between them">Compare</button>
+
+            <button onclick="clearInputs()" title="Clear both binary input fields to start fresh">Clear Inputs</button>
+
+        </div>
+
+        <div class="result">
+            <h2>Result: <span id="result"></span></h2>
+            <p id="error" style="color: red;"></p>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Logical-MicroOperations-Calculator/screenshot1.png b/Calculators/Logical-MicroOperations-Calculator/screenshot1.png
diff --git a/Calculators/Logical-MicroOperations-Calculator/screenshot2.png b/Calculators/Logical-MicroOperations-Calculator/screenshot2.png
diff --git a/Calculators/Logical-MicroOperations-Calculator/screenshot3.png b/Calculators/Logical-MicroOperations-Calculator/screenshot3.png
diff --git a/Calculators/Logical-MicroOperations-Calculator/script.js b/Calculators/Logical-MicroOperations-Calculator/script.js
@@ -0,0 +1,117 @@
+function validateInputs() {             // Function to check if the input is valid or not
+    const binary1 = document.getElementById('binary1').value;
+    const binary2 = document.getElementById('binary2').value;
+    const errorElement = document.getElementById('error');
+    errorElement.innerText = '';
+
+    const binaryPattern = /^[01]+$/;    // regex to verify binary number
+
+    if (!binary1 || !binary2) {
+        errorElement.innerText = 'Both fields must be filled in.';
+        return false;
+    }
+
+    if (!binaryPattern.test(binary1) || !binaryPattern.test(binary2)) {
+        document.getElementById('result').innerText = '';
+        errorElement.innerText = 'Please enter valid binary numbers (0 or 1).';
+        return false;
+    }
+
+    return true;
+}
+
+function selectiveSet() {       // selective set operation logic
+    if (!validateInputs()) return;
+
+    const binary1 = document.getElementById('binary1').value;
+    const binary2 = document.getElementById('binary2').value;
+    const result = (parseInt(binary1, 2) | parseInt(binary2, 2)).toString(2).padStart(binary1.length, '0');
+    document.getElementById('result').innerText = result;
+}
+
+function selectiveComplement() {        // selective complement operation logic
+    if (!validateInputs()) return;
+
+    const binary1 = document.getElementById('binary1').value;
+    const binary2 = document.getElementById('binary2').value;
+    const result = (parseInt(binary1, 2) ^ parseInt(binary2, 2)).toString(2).padStart(binary1.length, '0');
+    document.getElementById('result').innerText = result;
+}
+
+function selectiveClear() {         // selective clear operation logic
+    if (!validateInputs()) return;
+
+    const binary1 = document.getElementById('binary1').value;
+    const binary2 = document.getElementById('binary2').value;
+    const result = (parseInt(binary1, 2) & ~parseInt(binary2, 2)).toString(2).padStart(binary1.length, '0');
+    document.getElementById('result').innerText = result;
+}
+
+function maskDelete() {         // mask operation logic
+    if (!validateInputs()) return;
+
+    const binary1 = document.getElementById('binary1').value;
+    const binary2 = document.getElementById('binary2').value;
+
+    let result = '';
+    for (let i = 0; i < binary1.length; i++) {
+        if (binary2[i] === '0') {
+            result += '0';
+        } else {
+            result += binary1[i];
+        }
+    }
+
+    document.getElementById('result').innerText = result;
+}
+
+function clearBits() {      // Clear bits operation logic
+    if (!validateInputs()) return;
+
+    const binary1 = document.getElementById('binary1').value;
+    const binary2 = document.getElementById('binary2').value;
+
+    let result = '';
+    for (let i = 0; i < binary1.length; i++) {
+        if (binary1[i] === binary2[i]) {
+            result += '0';
+        } else {
+            result += '1';
+        }
+    }
+
+    document.getElementById('result').innerText = result;
+}
+
+function insert() {     // insert operations logic
+    if (!validateInputs()) return;
+
+    const binary1 = document.getElementById('binary1').value;
+    const binary2 = document.getElementById('binary2').value;
+
+    // Create a mask to clear the desired bit positions in binary1
+    const mask = parseInt('1'.repeat(binary1.length - binary2.length) + '0'.repeat(binary2.length), 2);
+    const maskedBinary1 = (parseInt(binary1, 2) & mask).toString(2).padStart(binary1.length, '0');
+
+    // Perform an OR operation to introduce the new bits from binary2
+    const result = (parseInt(maskedBinary1, 2) | parseInt(binary2, 2)).toString(2).padStart(binary1.length, '0');
+
+    document.getElementById('result').innerText = result;
+}
+
+
+function compare() {        // compare operations logic
+    if (!validateInputs()) return;
+
+    const binary1 = document.getElementById('binary1').value;
+    const binary2 = document.getElementById('binary2').value;
+    const result = binary1 === binary2 ? 'Equal' : 'Not Equal';
+    document.getElementById('result').innerText = result;
+}
+
+function clearInputs() {        // clearing all input fields
+    document.getElementById('binary1').value = '';
+    document.getElementById('binary2').value = '';
+    document.getElementById('result').innerText = '';
+    document.getElementById('error').innerText = '';
+}
diff --git a/Calculators/Logical-MicroOperations-Calculator/style.css b/Calculators/Logical-MicroOperations-Calculator/style.css
@@ -0,0 +1,100 @@
+body {
+    font-family: 'Roboto', Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background: linear-gradient(135deg, #89f7fe, #66a6ff);
+}
+
+.calculator {
+    background-color: #ffffff;
+    padding: 25px;
+    border-radius: 12px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    width: 100%;
+    max-width: 500px;
+    transition: transform 0.3s ease-in-out;
+}
+
+.calculator:hover {
+    transform: scale(1.02);
+}
+
+input {
+    width: 100%;
+    padding: 12px 15px;
+    margin: 10px 0;
+    border-radius: 8px;
+    border: 1px solid #ccc;
+    font-size: 1em;
+    box-sizing: border-box;
+    transition: border-color 0.3s ease-in-out;
+}
+
+input:focus {
+    outline: none;
+    border-color: #007bff;
+}
+
+.button-group {
+    margin-top: 15px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.button-group button {
+    flex: 1 1 calc(50% - 10px);
+    margin: 5px;
+    padding: 12px 10px;
+    border-radius: 8px;
+    border: none;
+    background-color: #007bff;
+    color: white;
+    font-size: 1em;
+    cursor: pointer;
+    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
+    box-sizing: border-box;
+}
+
+.button-group button:hover {
+    background-color: #0057b3e0;
+    transform: translateY(-2px);
+}
+
+.button-group button:nth-child(8):hover{
+    background-color: rgba(246, 66, 66, 0.904);
+    transform: translateY(-2px);
+}
+
+.result {
+    margin-top: 25px;
+    font-size: 1.3em;
+    font-weight: bold;
+    color: #333;
+}
+
+#error {
+    margin-top: 15px;
+    color: #ff4d4f;
+    font-weight: bold;
+}
+
+/* Responsiveness */
+@media (max-width: 500px) {
+    .calculator {
+        padding: 20px;
+    }
+
+    .button-group button {
+        padding: 10px 8px;
+        font-size: 0.9em;
+    }
+
+    .result {
+        font-size: 1.2em;
+    }
+}