Spaces:

Baruka6
/

tom-svolt

Running

App Files Files Community

tom-svolt / index.html

Baruka6

Add 2 files

cddf00f verified 11 months ago

raw

history blame contribute delete

15.9 kB

	<!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>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.calculator {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	border-radius: 20px;
	overflow: hidden;
	transition: all 0.3s ease;
	}
	.calculator:hover {
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
	}
	.display {
	min-height: 100px;
	word-wrap: break-word;
	overflow: hidden;
	}
	.btn {
	transition: all 0.2s ease;
	transform: scale(1);
	}
	.btn:active {
	transform: scale(0.95);
	}
	.btn-operator {
	background-color: #f59e0b;
	}
	.btn-function {
	background-color: #4b5563;
	}
	.btn-equals {
	background-color: #10b981;
	}
	.btn-clear {
	background-color: #ef4444;
	}
	.btn-memory {
	background-color: #7c3aed;
	}
	.btn:hover {
	opacity: 0.9;
	}
	.history-panel {
	transition: all 0.3s ease;
	max-height: 0;
	overflow: hidden;
	}
	.history-panel.active {
	max-height: 200px;
	}
	@media (max-width: 640px) {
	.btn {
	padding: 0.5rem;
	font-size: 0.9rem;
	}
	}
	</style>
	</head>
	<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
	<div class="calculator bg-gray-800 w-full max-w-md">
	<!-- Display Area -->
	<div class="p-4">
	<div class="bg-gray-900 rounded-lg p-4 mb-2">
	<div class="history-panel bg-gray-800 text-gray-300 text-sm mb-2 overflow-y-auto" id="historyPanel"></div>
	<div class="display text-right text-white text-3xl font-semibold py-2 px-1" id="display">0</div>
	<div class="text-right text-gray-400 text-sm" id="operation"></div>
	</div>
	</div>

	<!-- Button Grid -->
	<div class="grid grid-cols-5 gap-2 p-4">
	<!-- Memory Functions -->
	<button class="btn btn-memory text-white rounded-lg p-3 col-span-1" onclick="memoryAdd()">M+</button>
	<button class="btn btn-memory text-white rounded-lg p-3 col-span-1" onclick="memorySubtract()">M-</button>
	<button class="btn btn-memory text-white rounded-lg p-3 col-span-1" onclick="memoryRecall()">MR</button>
	<button class="btn btn-memory text-white rounded-lg p-3 col-span-1" onclick="memoryClear()">MC</button>
	<button class="btn btn-clear text-white rounded-lg p-3 col-span-1" onclick="clearAll()">AC</button>

	<!-- First Row -->
	<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('(')">(</button>
	<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay(')')">)</button>
	<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('%')">%</button>
	<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.PI')">π</button>
	<button class="btn btn-clear text-white rounded-lg p-3 col-span-1" onclick="clearDisplay()">C</button>

	<!-- Second Row -->
	<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addFunction('Math.sin(')">sin</button>
	<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addFunction('Math.cos(')">cos</button>
	<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addFunction('Math.tan(')">tan</button>
	<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.log(')">ln</button>
	<button class="btn btn-operator text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('/')">/</button>

	<!-- Third Row -->
	<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addFunction('Math.asin(')">sin⁻¹</button>
	<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addFunction('Math.acos(')">cos⁻¹</button>
	<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addFunction('Math.atan(')">tan⁻¹</button>
	<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.log10(')">log</button>
	<button class="btn btn-operator text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('*')">×</button>

	<!-- Fourth Row -->
	<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.sqrt(')">√</button>
	<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.pow(')">x^y</button>
	<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.exp(')">e^x</button>
	<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="factorial()">x!</button>
	<button class="btn btn-operator text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('-')">-</button>

	<!-- Fifth Row -->
	<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.abs(')">\|x\|</button>
	<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.floor(')">floor</button>
	<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.ceil(')">ceil</button>
	<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.round(')">round</button>
	<button class="btn btn-operator text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('+')">+</button>

	<!-- Sixth Row -->
	<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.random()')">rand</button>
	<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.E')">e</button>
	<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('10^')">10^x</button>
	<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="toggleHistory()">
	<i class="fas fa-history"></i>
	</button>
	<button class="btn btn-equals text-white rounded-lg p-3 col-span-1" onclick="calculate()">=</button>

	<!-- Number Pad -->
	<button class="btn bg-gray-700 text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('7')">7</button>
	<button class="btn bg-gray-700 text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('8')">8</button>
	<button class="btn bg-gray-700 text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('9')">9</button>
	<button class="btn bg-gray-700 text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('4')">4</button>
	<button class="btn bg-gray-700 text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('5')">5</button>
	<button class="btn bg-gray-700 text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('6')">6</button>
	<button class="btn bg-gray-700 text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('1')">1</button>
	<button class="btn bg-gray-700 text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('2')">2</button>
	<button class="btn bg-gray-700 text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('3')">3</button>
	<button class="btn bg-gray-700 text-white rounded-lg p-3 col-span-2" onclick="addToDisplay('0')">0</button>
	<button class="btn bg-gray-700 text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('.')">.</button>
	<button class="btn bg-gray-700 text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.pow(10,')">EE</button>
	</div>
	</div>

	<script>
	// Calculator state
	let currentDisplay = '0';
	let operationDisplay = '';
	let memoryValue = 0;
	let history = [];
	let isHistoryVisible = false;

	// DOM elements
	const displayElement = document.getElementById('display');
	const operationElement = document.getElementById('operation');
	const historyPanel = document.getElementById('historyPanel');

	// Initialize display
	updateDisplay();

	// Function to update the display
	function updateDisplay() {
	displayElement.textContent = currentDisplay;
	operationElement.textContent = operationDisplay;
	}

	// Function to add content to the display
	function addToDisplay(value) {
	if (currentDisplay === '0' && value !== '.') {
	currentDisplay = value;
	} else {
	currentDisplay += value;
	}
	updateDisplay();
	}

	// Function to add functions with parentheses
	function addFunction(func) {
	currentDisplay += func;
	updateDisplay();
	}

	// Function to clear the display
	function clearDisplay() {
	currentDisplay = '0';
	operationDisplay = '';
	updateDisplay();
	}

	// Function to clear everything
	function clearAll() {
	currentDisplay = '0';
	operationDisplay = '';
	memoryValue = 0;
	updateDisplay();
	}

	// Function to calculate the result
	function calculate() {
	try {
	// Save the operation for history
	const operation = currentDisplay;

	// Evaluate the expression
	let result = eval(currentDisplay);

	// Handle very large or small numbers with scientific notation
	if (Math.abs(result) > 1e12 \|\| (Math.abs(result) < 1e-4 && result !== 0)) {
	result = result.toExponential(6);
	} else if (Number.isInteger(result)) {
	result = result.toString();
	} else {
	// Limit decimal places for regular numbers
	result = parseFloat(result.toFixed(10)).toString();
	}

	// Update displays
	operationDisplay = operation + ' =';
	currentDisplay = result;
	updateDisplay();

	// Add to history
	addToHistory(operation, result);
	} catch (error) {
	currentDisplay = 'Error';
	updateDisplay();
	}
	}

	// Function to add calculation to history
	function addToHistory(operation, result) {
	history.unshift({ operation, result });
	if (history.length > 5) {
	history.pop();
	}
	updateHistoryPanel();
	}

	// Function to update history panel
	function updateHistoryPanel() {
	historyPanel.innerHTML = history.map(item =>
	`<div class="py-1 border-b border-gray-700">
	<div class="text-gray-400">${item.operation} =</div>
	<div class="text-white">${item.result}</div>
	</div>`
	).join('');
	}

	// Function to toggle history panel visibility
	function toggleHistory() {
	isHistoryVisible = !isHistoryVisible;
	if (isHistoryVisible) {
	historyPanel.classList.add('active');
	historyPanel.classList.remove('max-h-0');
	historyPanel.classList.add('max-h-48');
	} else {
	historyPanel.classList.remove('active');
	historyPanel.classList.remove('max-h-48');
	historyPanel.classList.add('max-h-0');
	}
	}

	// Memory functions
	function memoryAdd() {
	try {
	memoryValue += parseFloat(eval(currentDisplay));
	} catch (error) {
	currentDisplay = 'Error';
	updateDisplay();
	}
	}

	function memorySubtract() {
	try {
	memoryValue -= parseFloat(eval(currentDisplay));
	} catch (error) {
	currentDisplay = 'Error';
	updateDisplay();
	}
	}

	function memoryRecall() {
	currentDisplay = memoryValue.toString();
	updateDisplay();
	}

	function memoryClear() {
	memoryValue = 0;
	}

	// Factorial function
	function factorial() {
	try {
	const num = parseInt(eval(currentDisplay));
	if (num < 0) {
	currentDisplay = 'Error';
	} else if (num === 0 \|\| num === 1) {
	currentDisplay = '1';
	} else {
	let result = 1;
	for (let i = 2; i <= num; i++) {
	result *= i;
	}
	currentDisplay = result.toString();
	}
	updateDisplay();
	} catch (error) {
	currentDisplay = 'Error';
	updateDisplay();
	}
	}

	// Keyboard support
	document.addEventListener('keydown', function(event) {
	const key = event.key;

	// Numbers
	if (/[0-9]/.test(key)) {
	addToDisplay(key);
	return;
	}

	// Operators
	if (['+', '-', '*', '/', '%', '(', ')', '.'].includes(key)) {
	addToDisplay(key);
	return;
	}

	// Special keys
	switch (key) {
	case 'Enter':
	calculate();
	break;
	case 'Escape':
	clearAll();
	break;
	case 'Backspace':
	currentDisplay = currentDisplay.slice(0, -1) \|\| '0';
	updateDisplay();
	break;
	case '^':
	addToDisplay('Math.pow(');
	break;
	case '!':
	factorial();
	break;
	}
	});
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Baruka6/tom-svolt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>