A user script that adds a powerful calculator to any webpage with buttons for all arithmetic operations, fractions, roots, various mathematical symbols, and supports multiple languages (English, Russian, Uzbek).
// ==UserScript==
// @name Powerful Calculator
// @namespace http://example.com
// @version 1.6
// @description A user script that adds a powerful calculator to any webpage with buttons for all arithmetic operations, fractions, roots, various mathematical symbols, and supports multiple languages (English, Russian, Uzbek).
// @author Bytecraft
// @match *://*/*
// @grant none
// @license MIT
// ==/UserScript==
(() => {
const calculatorContainer = document.createElement('div');
calculatorContainer.style.position = 'fixed';
calculatorContainer.style.bottom = '20px';
calculatorContainer.style.right = '20px';
calculatorContainer.style.padding = '20px';
calculatorContainer.style.backgroundColor = '#f9f9f9';
calculatorContainer.style.border = '2px solid #007BFF';
calculatorContainer.style.borderRadius = '10px';
calculatorContainer.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.2)';
calculatorContainer.style.zIndex = 1000;
calculatorContainer.style.cursor = 'move'; // Allow dragging
// Language selection
const languageSelector = document.createElement('select');
languageSelector.id = 'language-selector';
languageSelector.innerHTML = `
<option value="en">English</option>
<option value="ru">Русский</option>
<option value="uz">O'zbekcha</option>
`;
calculatorContainer.innerHTML = `
<h3 style="text-align: center;">Calculator</h3>
${languageSelector.outerHTML}
<input type='text' id='expression' placeholder='Enter expression' style='width: 100%; padding: 5px; margin-bottom: 10px;'>
<div id='buttons' style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;">
<button class='calc-btn'>1</button>
<button class='calc-btn'>2</button>
<button class='calc-btn'>3</button>
<button class='calc-btn'>+</button>
<button class='calc-btn'>4</button>
<button class='calc-btn'>5</button>
<button class='calc-btn'>6</button>
<button class='calc-btn'>-</button>
<button class='calc-btn'>7</button>
<button class='calc-btn'>8</button>
<button class='calc-btn'>9</button>
<button class='calc-btn'>*</button>
<button class='calc-btn'>0</button>
<button class='calc-btn'>C</button>
<button class='calc-btn'>=</button>
<button class='calc-btn'>/</button>
<button class='calc-btn'>(</button>
<button class='calc-btn'>)</button>
<button class='calc-btn'>√</button>
<button class='calc-btn'>=</button> <!-- Equals -->
<button class='calc-btn'>≠</button> <!-- Not equal -->
<button class='calc-btn'>≈</button> <!-- Approximately equal -->
<button class='calc-btn'>></button> <!-- Greater than -->
<button class='calc-btn'><</button> <!-- Less than -->
<button class='calc-btn'>≥</button> <!-- Greater than or equal to -->
<button class='calc-btn'>≤</button> <!-- Less than or equal to -->
<button class='calc-btn'>±</button> <!-- Plus-minus -->
<button class='calc-btn'>mod</button> <!-- Modulus -->
<button class='calc-btn'>%</button> <!-- Percent -->
<button class='calc-btn'>ab</button> <!-- Power -->
<button class='calc-btn'>n√</button> <!-- n-th root -->
</div>
<div id='result' style="margin-top: 10px; font-weight: bold; border: 1px solid #007BFF; padding: 10px; border-radius: 5px;"></div>
`;
document.body.appendChild(calculatorContainer);
// Draggable functionality
let isDragging = false;
let offsetX, offsetY;
calculatorContainer.addEventListener('mousedown', (e) => {
isDragging = true;
offsetX = e.clientX - calculatorContainer.getBoundingClientRect().left;
offsetY = e.clientY - calculatorContainer.getBoundingClientRect().top;
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
document.addEventListener('mousemove', (e) => {
if (isDragging) {
calculatorContainer.style.left = `${e.clientX - offsetX}px`;
calculatorContainer.style.top = `${e.clientY - offsetY}px`;
}
});
const buttons = document.querySelectorAll('.calc-btn');
buttons.forEach(button => {
button.addEventListener('click', () => {
const value = button.textContent;
if (value === 'C') {
document.getElementById('expression').value = '';
document.getElementById('result').innerText = '';
} else if (value === '=') {
const expression = document.getElementById('expression').value;
try {
// Replace mod with % for JavaScript evaluation
const evaluatedExpression = expression.replace(/mod/g, '%');
const result = eval(evaluatedExpression);
document.getElementById('result').innerText = 'Result: ' + result;
} catch (e) {
document.getElementById('result').innerText = 'Error: ' + e.message;
}
} else {
document.getElementById('expression').value += value;
}
});
});
languageSelector.addEventListener('change', () => {
updateLanguage(languageSelector.value);
});
function getMessage(key) {
const messages = {
en: {
result: 'Result',
error: 'Error',
calculator: 'Calculator',
enter_expression: 'Enter expression'
},
ru: {
result: 'Результат',
error: 'Ошибка',
calculator: 'Калькулятор',
enter_expression: 'Введите выражение'
},
uz: {
result: 'Natija',
error: 'Xato',
calculator: 'Kalkulyator',
enter_expression: 'Ishlatiladigan ifodani kiriting'
}
};
return messages[languageSelector.value][key];
}
function updateLanguage(lang) {
document.querySelector('h3').textContent = getMessage('calculator');
document.getElementById('expression').placeholder = getMessage('enter_expression');
document.getElementById('result').innerText = '';
}
})();