Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Logical Micro Operations Calculator #1840

Merged
merged 2 commits into from
Aug 10, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions Calculators/Logical-MicroOperations-Calculator/README.md
Original file line number Diff line number Diff line change
@@ -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)
46 changes: 46 additions & 0 deletions Calculators/Logical-MicroOperations-Calculator/index.html
Original file line number Diff line number Diff line change
@@ -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>
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
117 changes: 117 additions & 0 deletions Calculators/Logical-MicroOperations-Calculator/script.js
Original file line number Diff line number Diff line change
@@ -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 = '';
}
100 changes: 100 additions & 0 deletions Calculators/Logical-MicroOperations-Calculator/style.css
Original file line number Diff line number Diff line change
@@ -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;
}
}
28 changes: 28 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2971,6 +2971,20 @@ <h3>Calculates the log of the given number to any base.</h3>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Logical Micro-Operations Calculator</h2>
<h3>Solves logical micro-operations of Computer Architecture</h3>
<div class="card-footer">
<a href="./Calculators/Logical-MicroOperations-Calculator/index.html" target="_blank">
<button>Try Now</button>
</a>
<a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Logical-MicroOperations-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>Lorentz Force Calculator</h2>
Expand Down Expand Up @@ -4637,6 +4651,20 @@ <h3>Checks whether a number is a strong number or not.</h3>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Sudoku Calculator</h2>
<h3>Generates and solves sudoku</h3>
<div class="card-footer">
<a href="./Calculators/Sudoku-Calculator/index.html" target="_blank">
<button>Try Now</button>
</a>
<a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Sudoku-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>Sugar Intake Calculator</h2>
Expand Down