| Server IP : 127.0.0.1 / Your IP : 216.73.216.48 Web Server : Apache/2.4.58 (Win64) OpenSSL/3.1.3 PHP/8.2.12 System : Windows NT DESKTOP-3H4FHQJ 10.0 build 19045 (Windows 10) AMD64 User : win 10 ( 0) PHP Version : 8.2.12 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : D:/xampp/htdocs-coblaa/CB_calculator/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scientific Calculator</title>
<!-- Use Tailwind CSS for a modern, responsive design -->
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body class="flex items-center justify-center min-h-screen p-4">
<div id="calculator-container" class="calculator bg-slate-800 p-6 rounded-3xl shadow-2xl w-full max-w-sm mx-auto">
<!-- Display Screens -->
<div class="bg-slate-700 text-white rounded-xl p-4 mb-4 shadow-inner">
<div id="history" class="text-xl text-right h-8 overflow-hidden text-gray-400"></div>
<input type="text" id="display" class="w-full text-5xl text-right bg-transparent border-none font-light overflow-hidden focus:outline-none" value="" disabled>
</div>
<!-- Buttons Grid -->
<div class="grid grid-cols-4 gap-3">
<!-- First Row -->
<button class="btn-func text-white rounded-lg p-5 text-2xl font-bold hover:bg-gray-600 transition-colors duration-200 shadow-md" onclick="clearDisplay()">C</button>
<button class="btn-func text-white rounded-lg p-5 text-2xl font-bold hover:bg-gray-600 transition-colors duration-200 shadow-md" onclick="toggleSign()">+/-</button>
<button class="btn-func text-white rounded-lg p-5 text-2xl font-bold hover:bg-gray-600 transition-colors duration-200 shadow-md" onclick="calculateSquareRoot()">√</button>
<button class="btn-op text-white rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('/')">/</button>
<!-- Second Row -->
<button class="btn-num text-white rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('7')">7</button>
<button class="btn-num text-white rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('8')">8</button>
<button class="btn-num text-white rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('9')">9</button>
<button class="btn-op text-white rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('*')">*</button>
<!-- Third Row -->
<button class="btn-num text-white rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('4')">4</button>
<button class="btn-num text-white rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('5')">5</button>
<button class="btn-num text-white rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('6')">6</button>
<button class="btn-op text-white rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('-')">-</button>
<!-- Fourth Row -->
<button class="btn-num text-white rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('1')">1</button>
<button class="btn-num text-white rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('2')">2</button>
<button class="btn-num text-white rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('3')">3</button>
<button class="btn-op text-white rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('+')">+</button>
<!-- Fifth Row -->
<button class="btn-num text-white rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('0')">0</button>
<button class="btn-num text-white rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('.')">.</button>
<button class="btn-equals text-white rounded-lg p-5 text-2xl font-bold transition-all duration-200 shadow-md" onclick="calculateResult()">=</button>
<button class="btn-op text-white rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="backspace()">⌫</button>
</div>
<!-- Theme and Custom Background Buttons -->
<div class="flex flex-wrap justify-between mt-4 gap-2">
<button class="bg-slate-700 text-white p-2 rounded-lg font-bold text-sm hover:bg-slate-600 transition-colors" onclick="setTheme('dark')">Dark Theme</button>
<button class="bg-gray-200 text-gray-800 p-2 rounded-lg font-bold text-sm hover:bg-gray-300 transition-colors" onclick="setTheme('light')">Light Theme</button>
<label for="bg-image-upload" class="bg-slate-500 text-white p-2 rounded-lg font-bold text-sm cursor-pointer hover:bg-slate-400 transition-colors">
Custom BG
<input type="file" id="bg-image-upload" class="hidden" accept="image/*" onchange="setBackgroundImage(this)">
</label>
</div>
</div>
<script>
// Get the display elements and calculator container
const historyDisplay = document.getElementById('history');
const mainDisplay = document.getElementById('display');
const calculatorContainer = document.getElementById('calculator-container');
const bodyElement = document.body;
let shouldResetDisplay = false;
// Register the service worker for offline support
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('service-worker.js').then(registration => {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, err => {
console.log('ServiceWorker registration failed: ', err);
});
});
}
/**
* Sets the theme of the calculator by changing the CSS class.
* @param {string} themeName The name of the theme ('dark' or 'light').
*/
function setTheme(themeName) {
bodyElement.style.backgroundImage = ''; // Clear custom background
bodyElement.style.backgroundColor = '#f1f5f9'; // Set default body background
if (themeName === 'light') {
calculatorContainer.classList.remove('dark');
calculatorContainer.classList.add('light');
} else {
calculatorContainer.classList.remove('light');
calculatorContainer.classList.add('dark');
}
}
/**
* Sets the background image of the body element from a user-selected file.
* @param {HTMLInputElement} input The file input element.
*/
function setBackgroundImage(input) {
const file = input.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
bodyElement.style.backgroundImage = `url(${e.target.result})`;
bodyElement.style.backgroundSize = 'cover';
bodyElement.style.backgroundPosition = 'center';
bodyElement.style.backgroundRepeat = 'no-repeat';
bodyElement.style.backgroundColor = '#1a202c'; // Darken the background color for contrast
};
reader.readAsDataURL(file);
}
}
/**
* Appends a character to the history display.
* @param {string} character The character to append.
*/
function appendToDisplay(character) {
let currentValue = historyDisplay.textContent;
// Reset history display if a new number is being entered after a calculation
if (shouldResetDisplay && (!isNaN(parseInt(character)) || character === '.')) {
currentValue = '';
mainDisplay.value = ''; // Also clear the main display
shouldResetDisplay = false;
}
// Handle consecutive operators by replacing the last one
const isLastCharOperator = ['+', '-', '*', '/'].includes(currentValue.slice(-1));
const isNewCharOperator = ['+', '-', '*', '/', '%'].includes(character);
// Logic to prevent multiple decimal points in a single number
if (character === '.') {
if (currentValue === '') {
historyDisplay.textContent = '0.';
shouldResetDisplay = false;
return;
}
const lastNumberRegex = /[\d.]+$/;
const lastNumberMatch = currentValue.match(lastNumberRegex);
if (lastNumberMatch && lastNumberMatch[0].includes('.')) {
return;
}
}
if (isLastCharOperator && isNewCharOperator) {
historyDisplay.textContent = currentValue.slice(0, -1) + character;
} else if (currentValue === 'Error' || currentValue === 'NaN') {
historyDisplay.textContent = character;
mainDisplay.value = '';
} else {
historyDisplay.textContent += character;
}
}
/**
* Clears both displays entirely.
*/
function clearDisplay() {
historyDisplay.textContent = '';
mainDisplay.value = '';
shouldResetDisplay = false;
}
/**
* Deletes the last character from the history display.
*/
function backspace() {
historyDisplay.textContent = historyDisplay.textContent.slice(0, -1);
shouldResetDisplay = false;
}
/**
* Toggles the sign of the number currently on the display.
*/
function toggleSign() {
const currentValue = historyDisplay.textContent;
if (!isNaN(parseFloat(currentValue)) && isFinite(currentValue)) {
historyDisplay.textContent = parseFloat(currentValue) * -1;
shouldResetDisplay = true;
}
}
/**
* Calculates the square root of the number on the display.
*/
function calculateSquareRoot() {
const currentValue = historyDisplay.textContent;
try {
const result = Math.sqrt(eval(currentValue));
if (typeof result === 'number' && !Number.isInteger(result)) {
mainDisplay.value = parseFloat(result.toFixed(10));
} else {
mainDisplay.value = result;
}
historyDisplay.textContent = '√(' + currentValue + ')';
shouldResetDisplay = true;
} catch (error) {
mainDisplay.value = 'Error';
shouldResetDisplay = true;
}
}
/**
* Calculates and displays the result of the expression.
*/
function calculateResult() {
try {
let result = Function(`"use strict"; return (${historyDisplay.textContent})`)();
// Round the result to a reasonable number of decimal places to fix floating-point errors
if (typeof result === 'number' && !Number.isInteger(result)) {
result = parseFloat(result.toFixed(10));
}
historyDisplay.textContent = historyDisplay.textContent + ' =';
mainDisplay.value = result;
shouldResetDisplay = true;
} catch (error) {
mainDisplay.value = 'Error';
shouldResetDisplay = true;
}
}
</script>
</body>
</html>