| 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">
<style>
/* Base styles for the calculator */
body {
font-family: 'Inter', sans-serif;
transition: all 0.3s ease;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #1a202c; /* Fixed dark background */
}
.calculator {
background: rgba(45, 55, 72, 0.95); /* A distinct dark gray for the calculator body */
transition: all 0.3s ease;
}
.calculator-title {
color: #ffffff;
}
/* Common display styles */
.display-container {
background-color: #4a5568; /* A lighter, more visible gray for the display */
color: #ffffff;
border-color: #a0aec0; /* Lighter border for dark theme */
transition: background-color 0.3s ease;
border: 1px solid; /* Add a border to the display */
}
.history-text {
color: #ffffff;
}
#display {
color: #ffffff;
}
/* Button styles */
.btn-op {
background-color: #4a5568;
color: #ffffff;
}
.btn-op:hover {
background-color: #6d7b93;
}
.btn-num {
background-color: #2d3748;
color: #ffffff;
}
.btn-num:hover {
background-color: #4a5568;
}
.btn-func {
background-color: #f6ad55;
color: #ffffff;
}
.btn-func:hover {
background-color: #ed8936;
}
.btn-equals {
background-color: #48bb78;
color: #ffffff;
}
.btn-equals:hover {
background-color: #38a169;
transform: scale(1.05);
}
/* General button styles */
button {
transition: all 0.2s ease-in-out;
}
/* Mobile-first approach: Media query for screens up to 700px */
@media (max-width: 700px) {
body {
padding: 0;
}
.calculator {
width: 100%;
max-width: 100%;
min-height: 100vh;
border-radius: 0;
padding: 1rem;
}
}
</style>
</head>
<body class="flex items-center justify-center min-h-screen p-4"style="width:100%;max-height:100vh;">
<div id="calculator-container" class="calculator p-6 rounded-3xl shadow-2xl w-full max-w-sm mx-auto" style="width:100%;background:transparent;">
<!-- New calculator name -->
<h1 class="calculator-title text-3xl font-bold text-center mb-4">CB Calculator</h1>
<!-- Display Screens -->
<div class="display-container rounded-xl p-4 mb-4 shadow-inner" style="width:100%;">
<div id="history" class="history-text text-right h-8 overflow-hidden"></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 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 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 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 rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('/')">/</button>
<!-- Second Row -->
<button class="btn-num rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('7')">7</button>
<button class="btn-num rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('8')">8</button>
<button class="btn-num rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('9')">9</button>
<button class="btn-op rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('*')">*</button>
<!-- Third Row -->
<button class="btn-num rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('4')">4</button>
<button class="btn-num rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('5')">5</button>
<button class="btn-num rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('6')">6</button>
<button class="btn-op rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('-')">-</button>
<!-- Fourth Row -->
<button class="btn-num rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('1')">1</button>
<button class="btn-num rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('2')">2</button>
<button class="btn-num rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('3')">3</button>
<button class="btn-op rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('+')">+</button>
<!-- Fifth Row -->
<button class="btn-num rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('0')">0</button>
<button class="btn-num rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="appendToDisplay('.')">.</button>
<button class="btn-equals rounded-lg p-5 text-2xl font-bold transition-all duration-200 shadow-md" onclick="calculateResult()">=</button>
<button class="btn-op rounded-lg p-5 text-2xl font-bold transition-colors duration-200 shadow-md" onclick="backspace()">⌫</button>
</div>
<!-- Custom Background Button -->
<div class="flex flex-wrap justify-center mt-4 gap-2">
<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;
/**
* 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'; // Ensure a dark background 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;
const currentMainValue = mainDisplay.value;
const isNewCharOperator = ['+', '-', '*', '/'].includes(character);
// If a calculation was just completed
if (shouldResetDisplay) {
if (isNewCharOperator) {
historyDisplay.textContent = currentMainValue + character;
mainDisplay.value = '';
} else {
historyDisplay.textContent = character;
mainDisplay.value = '';
}
shouldResetDisplay = false; // Reset the flag after handling the first input
return; // Stop execution here to prevent a double append
}
// Handle consecutive operators by replacing the last one
const isLastCharOperator = ['+', '-', '*', '/'].includes(currentValue.slice(-1));
// Logic to prevent multiple decimal points in a single number
if (character === '.') {
if (currentValue === '') {
historyDisplay.textContent = '0.';
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;
} 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() {
let expression = historyDisplay.textContent;
// Do nothing if the display is empty
if (expression.trim() === '') {
return;
}
let regex = /(-?\d*\.?\d+)$/; // Regex to find the last number (positive or negative, integer or float)
let match = expression.match(regex);
if (match) {
let lastNumber = parseFloat(match[0]);
let toggledNumber = lastNumber * -1;
historyDisplay.textContent = expression.slice(0, match.index) + toggledNumber;
} else {
// If no number is found, and the display is not empty, assume it's a single operator or an invalid expression.
// In this case, we do nothing to prevent adding a '-' sign in front of an operator.
return;
}
shouldResetDisplay = false;
}
/**
* Calculates the square root of the number on the display.
*/
function calculateSquareRoot() {
const currentValue = historyDisplay.textContent;
if (!currentValue.trim()) {
return; // Do nothing if the display is empty
}
try {
// Check if the current value is a valid number or a simple expression
if (!/\d/.test(currentValue)) {
mainDisplay.value = 'Error';
shouldResetDisplay = true;
return;
}
const result = Math.sqrt(Function(`"use strict"; return (${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() {
let expression = historyDisplay.textContent.trim();
// Check if the last character is already an equals sign. If so, do nothing.
if (expression.endsWith('=')) {
return;
}
// Do not proceed if the expression is empty, ends with an operator, or has no numbers
if (expression === '' || ['+', '-', '*', '/', '.'].includes(expression.slice(-1)) || !(/\d/.test(expression))) {
return;
}
try {
let result = Function(`"use strict"; return (${expression})`)();
// Handle floating-point precision
if (typeof result === 'number' && !Number.isInteger(result)) {
result = parseFloat(result.toFixed(10));
}
historyDisplay.textContent = expression + ' =';
mainDisplay.value = result;
shouldResetDisplay = true;
} catch (error) {
// If a valid-looking expression still causes an error (e.g., division by zero)
historyDisplay.textContent = expression + ' =';
mainDisplay.value = 'Error';
shouldResetDisplay = true;
}
}
</script>
</body>
</html>