10/08/2025
```html
Calculadora Científica - INTERSERVITEC®
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, 0%, 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #333;
touch-action: manipulation;
}
.splash-screen {
background: white;
width: 95%;
max-width: 600px;
border-radius: 20px;
padding: 25px;
text-align: center;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
animation: fadeIn 1s ease-out;
position: relative;
overflow: hidden;
}
fadeIn {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.logo {
font-size: 2.2rem;
font-weight: 700;
color: ;
margin-bottom: 15px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.developer-info {
margin: 20px 0;
line-height: 1.6;
color: #555;
font-size: 1rem;
}
.contact-info {
margin: 20px 0;
padding: 15px;
background: ;
border-radius: 12px;
border: 1px solid ;
}
.contact-info a {
color: ;
text-decoration: none;
font-weight: 600;
}
.contact-info a:hover {
text-decoration: underline;
}
.copyright {
margin-top: 20px;
font-size: 0.85rem;
color: #888;
font-style: italic;
}
.btn-start {
background: linear-gradient(135deg, 0%, 100%);
color: white;
border: none;
padding: 14px 35px;
font-size: 1.1rem;
border-radius: 50px;
cursor: pointer;
margin-top: 25px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
font-weight: 600;
}
.btn-start:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}
.btn-start:active {
transform: translateY(0);
}
.calculator {
display: none;
background: white;
width: 95%;
max-width: 400px;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0,0,0,0.25);
animation: slideUp 0.8s ease-out;
touch-action: manipulation;
}
slideUp {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}
.mode-toggle {
display: flex;
background: ;
border-bottom: 1px solid ;
}
.mode-btn {
flex: 1;
padding: 14px;
text-align: center;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
border-bottom: 3px solid transparent;
font-size: 0.95rem;
}
.mode-btn.active {
background: ;
color: white;
border-bottom: 3px solid ;
}
.display {
padding: 20px;
background: ;
color: white;
text-align: right;
font-size: 1.8rem;
font-weight: 300;
min-height: 90px;
display: flex;
flex-direction: column;
justify-content: center;
border-bottom: 2px solid ;
}
.previous-operand {
font-size: 0.9rem;
color: rgba(255,255,255,0.7);
height: 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.current-operand {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-height: 30px;
font-size: 2rem;
font-weight: 400;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: ;
}
.scientific-buttons {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1px;
background: ;
}
button {
padding: 16px 10px;
font-size: 1.1rem;
border: none;
outline: none;
cursor: pointer;
background: white;
transition: all 0.2s ease;
touch-action: manipulation;
font-weight: 500;
height: 60px;
}
button:active {
background: ;
transform: scale(0.95);
}
.operator {
background: ;
color: white;
font-weight: 600;
}
.equals {
background: ;
color: white;
font-weight: 600;
}
.function {
background: ;
color: white;
font-size: 0.95rem;
}
.clear, .delete {
background: ;
color: white;
font-weight: 600;
}
.span-2 {
grid-column: span 2;
}
.hidden {
display: none;
}
.calculator-header {
padding: 12px;
background: ;
color: white;
text-align: center;
font-weight: 600;
font-size: 1rem;
border-bottom: 1px solid ;
}
/* Ajustes para móviles */
(max-width: 480px) {
.splash-screen {
padding: 20px;
}
.logo {
font-size: 1.8rem;
}
.developer-info {
font-size: 0.95rem;
}
.contact-info {
padding: 12px;
}
.btn-start {
padding: 12px 30px;
font-size: 1rem;
}
.display {
font-size: 1.6rem;
padding: 18px;
min-height: 80px;
}
.current-operand {
font-size: 1.8rem;
}
button {
padding: 15px 8px;
font-size: 1rem;
height: 55px;
}
.function {
font-size: 0.85rem;
}
}
/* Para pantallas muy pequeñas */
(max-width: 360px) {
.splash-screen {
width: 98%;
padding: 15px;
}
.logo {
font-size: 1.6rem;
}
.developer-info, .contact-info {
font-size: 0.9rem;
}
.btn-start {
padding: 10px 25px;
font-size: 0.95rem;
}
.display {
font-size: 1.4rem;
min-height: 70px;
padding: 15px;
}
.current-operand {
font-size: 1.6rem;
}
button {
padding: 14px 6px;
font-size: 0.95rem;
height: 50px;
}
}
INTERSERVITEC®
Calculadora Científica Digital
Desarrollada por:
Jesús Manrique Pedraza
Cargo: CEO de INTERSERVITEC®
Contacto:
WhatsApp: +57 312 341 1660
Email: [email protected]
© 2025 INTERSERVITEC®. Todos los derechos reservados y protegidos a nivel internacional.
Iniciar Calculadora
Calculadora Científica
Básica
Científica
0
AC
DEL
%
÷
7
8
9
×
4
5
6
-
1
2
3
+
0
.
=
sin
cos
tan
log
ln
√
x²
x³
x^y
exp
π
e
x!
|x|
AC
7
8
9
÷
DEL
4
5
6
×
mod
1
2
3
-
±
0
.
=
+
// Variables globales
let currentOperand = '0';
let previousOperand = '';
let operation = undefined;
let waitingForSecondOperand = false;
let scientificMode = false;
let tempValue = null;
let isCalculatingPower = false;
// Elementos del DOM
const currentOperandDisplay = document.getElementById('currentOperand');
const previousOperandDisplay = document.getElementById('previousOperand');
const basicButtons = document.getElementById('basicButtons');
const scientificButtons = document.getElementById('scientificButtons');
const basicModeBtn = document.getElementById('basicMode');
const scientificModeBtn = document.getElementById('scientificMode');
const splashScreen = document.getElementById('splashScreen');
const calculator = document.getElementById('calculator');
const startBtn = document.getElementById('startBtn');
// Mostrar calculadora después del splash
startBtn.addEventListener('click', () => {
splashScreen.style.display = 'none';
calculator.style.display = 'block';
document.activeElement.blur();
});
// Alternar entre modos
basicModeBtn.addEventListener('click', () => {
basicModeBtn.classList.add('active');
scientificModeBtn.classList.remove('active');
basicButtons.classList.remove('hidden');
scientificButtons.classList.add('hidden');
scientificMode = false;
isCalculatingPower = false;
});
scientificModeBtn.addEventListener('click', () => {
scientificModeBtn.classList.add('active');
basicModeBtn.classList.remove('active');
scientificButtons.classList.remove('hidden');
basicButtons.classList.add('hidden');
scientificMode = true;
isCalculatingPower = false;
});
// Función para actualizar la pantalla
function updateDisplay() {
// Limitar la longitud del número para pantallas pequeñas
let displayNumber = currentOperand;
// Si el número es demasiado largo, usar notación científica
if (displayNumber.length > 12 && !displayNumber.includes('.')) {
try {
const num = parseFloat(displayNumber);
if (Math.abs(num) >= 1e10 || (Math.abs(num) < 1e-5 && num !== 0)) {
displayNumber = num.toExponential(6);
}
} catch (e) {
displayNumber = displayNumber.substring(0, 12) + '...';
}
} else if (displayNumber.length > 14) {
displayNumber = displayNumber.substring(0, 14) + '...';
}
currentOperandDisplay.textContent = displayNumber;
previousOperandDisplay.textContent = previousOperand ? `${previousOperand} ${operation}` : '';
}
// Añadir dígito
function appendNumber(number) {
if (currentOperand === 'Error') {
currentOperand = '0';
}
if (waitingForSecondOperand) {
currentOperand = number;
waitingForSecondOperand = false;
} else {
if (currentOperand === '0' && number !== '.') {
currentOperand = number;
} else if (currentOperand === '0' && number === '.') {
currentOperand = '0.';
} else {
// Limitar longitud para evitar desbordamiento
if (currentOperand.length < 15) {
currentOperand += number;
}
}
}
updateDisplay();
}
// Añadir punto decimal
function appendDecimal() {
if (currentOperand === 'Error') {
currentOperand = '0';
updateDisplay();
}
if (waitingForSecondOperand) {
currentOperand = '0.';
waitingForSecondOperand = false;
} else {
if (!currentOperand.includes('.')) {
currentOperand += '.';
}
}
updateDisplay();
}
// Seleccionar operación
function chooseOperation(op) {
if (currentOperand === '' || currentOperand === 'Error') return;
if (previousOperand !== '' && !waitingForSecondOperand) {
calculate();
}
operation = op;
previousOperand = currentOperand;
waitingForSecondOperand = true;
isCalculatingPower = false;
updateDisplay();
}
// Calcular resultado
function calculate() {
if (currentOperand === 'Error') return;
let computation;
const prev = parseFloat(previousOperand);
const current = parseFloat(currentOperand);
if (isNaN(prev) || isNaN(current)) return;
switch (operation) {
case '+':
computation = prev + current;
break;
case '-':
computation = prev - current;
break;
case '×':
computation = prev * current;
break;
case '÷':
if (Math.abs(current) < 1e-10) {
showError('División por cero');
return;
}
computation = prev / current;
break;
case 'mod':
computation = prev % current;
break;
default:
return;
}
// Manejar resultados muy grandes o pequeños
if (!isFinite(computation)) {
showError('Resultado demasiado grande');
return;
}
// Formatear resultado
if (Math.abs(computation) >= 1e10 || (Math.abs(computation) < 1e-5 && computation !== 0)) {
currentOperand = computation.toExponential(6);
} else {
currentOperand = computation.toString();
}
operation = undefined;
previousOperand = '';
waitingForSecondOperand = false;
isCalculatingPower = false;
updateDisplay();
}
// Borrar todo
function clear() {
currentOperand = '0';
previousOperand = '';
operation = undefined;
waitingForSecondOperand = false;
tempValue = null;
isCalculatingPower = false;
updateDisplay();
}
// Borrar último dígito
function deleteNumber() {
if (currentOperand === 'Error') {
currentOperand = '0';
updateDisplay();
return;
}
if (currentOperand.length === 1) {
currentOperand = '0';
} else {
currentOperand = currentOperand.slice(0, -1);
}
updateDisplay();
}
// Mostrar error
function showError(message) {
const temp = currentOperand;
currentOperand = 'Error';
updateDisplay();
setTimeout(() => {
currentOperand = temp;
updateDisplay();
}, 1500);
}
// Funciones matemáticas científicas
function calculateScientific(functionName) {
try {
if (currentOperand === 'Error') {
currentOperand = '0';
}
const num = parseFloat(currentOperand);
if (isNaN(num)) {
showError('Entrada inválida');
return;
}
let result;
switch(functionName) {
case 'sin':
result = Math.sin(num * Math.PI / 180);
break;
case 'cos':
result = Math.cos(num * Math.PI / 180);
break;
case 'tan':
const angleMod = (num % 180 + 180) % 180;
if (Math.abs(angleMod - 90) < 1e-10) {
showError('tan indefinido');
return;
}
result = Math.tan(num * Math.PI / 180);
break;
case 'log':
if (num {
button.addEventListener('click', () => {
appendNumber(button.getAttribute('data-number'));
});
});
document.querySelectorAll('[data-operation]').forEach(button => {
button.addEventListener('click', () => {
chooseOperation(button.dataset.operation);
});
});
document.querySelector('[data-equals]').addEventListener('click', () => {
if (isCalculatingPower && tempValue !== null) {
// Calcular potencia x^y
const base = tempValue;
const exponent = parseFloat(currentOperand);
const result = Math.pow(base, exponent);
if (!isFinite(result)) {
showError('Resultado inválido');
return;
}
currentOperand = result.toString();
operation = undefined;
previousOperand = '';
waitingForSecondOperand = false;
isCalculatingPower = false;
tempValue = null;
} else {
calculate();
}
updateDisplay();
});
// Botón AC (All Clear)
document.querySelectorAll('[data-all-clear]').forEach(button => {
button.addEventListener('click', () => {
clear();
});
});
// Botón DEL (Delete)
document.querySelectorAll('[data-delete]').forEach(button => {
button.addEventListener('click', () => {
deleteNumber();
});
});
// Funciones científicas
document.querySelectorAll('[data-function]').forEach(button => {
button.addEventListener('click', () => {
const func = button.dataset.function;
if (func === 'powx') {
tempValue = parseFloat(currentOperand);
if (isNaN(tempValue)) {
showError('Entrada inválida');
return;
}
isCalculatingPower = true;
previousOperand = `${currentOperand} ^`;
waitingForSecondOperand = true;
updateDisplay();
} else {
calculateScientific(func);
}
});
});
// Prevenir comportamientos no deseados en móviles
document.addEventListener('touchstart', function(event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, { passive: false });
// Inicializar display
updateDisplay();
```
