Calculadora iOS

1016 Anes_unk

Abrir en el editor Publica tu código

Recomendado

17 September 2024

Calculadora de fecha

27 December 2024

Una página de inicio creada con directorios.

22 August 2025

Servicios de Diseño Web, Marketing Digital y Vídeo

HTML

<!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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator" id="calculator">
        <div class="header">
            <div class="time" id="time">12:45</div>
        </div>
        <div class="display" id="display">0</div>
        <div class="buttons">
            <button class="button operator" onclick="clearDisplay()">C</button>
            <button class="button operator" onclick="appendToDisplay('(')">(</button>
            <button class="button operator" onclick="appendToDisplay(')')">)</button>
            <button class="button operator" onclick="appendToDisplay('%')">%</button>
            <button class="button operator" onclick="appendToDisplay('/')">/</button>
            <button class="button operator" onclick="appendToDisplay('*')">*</button>
            <button class="button operator" onclick="appendToDisplay('-')">-</button>
            <button class="button operator" onclick="appendToDisplay('+')">+</button>
            <button class="button" onclick="appendToDisplay('Math.sqrt(')">√</button>
            <button class="button" onclick="appendToDisplay('Math.pow(')">x²</button>
            <button class="button" onclick="appendToDisplay('Math.abs(')">|x|</button>
            <button class="button" onclick="appendToDisplay('Math.log(')">log</button>
            <button class="button" onclick="appendToDisplay('Math.sin(')">sin</button>
            <button class="button" onclick="appendToDisplay('Math.cos(')">cos</button>
            <button class="button" onclick="appendToDisplay('Math.tan(')">tan</button>
            <button class="button" onclick="appendToDisplay('Math.exp(')">e^x</button>
            <button class="button" onclick="appendToDisplay('7')">7</button>
            <button class="button" onclick="appendToDisplay('8')">8</button>
            <button class="button" onclick="appendToDisplay('9')">9</button>
            <button class="button" onclick="appendToDisplay('4')">4</button>
            <button class="button" onclick="appendToDisplay('5')">5</button>
            <button class="button" onclick="appendToDisplay('6')">6</button>
            <button class="button" onclick="appendToDisplay('1')">1</button>
            <button class="button" onclick="appendToDisplay('2')">2</button>
            <button class="button" onclick="appendToDisplay('3')">3</button>
            <button class="button zero" onclick="appendToDisplay('0')">0</button>
            <button class="button equal" onclick="calculate()">=</button>
        </div>
        <div class="info">Swipe to rotate!</div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(135deg, #1c1c1c, #333);
    font-family: 'Arial', sans-serif;
    margin: 0;
}

.calculator {
    background: #282828;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    width: 400px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    font-size: 1.2em;
    padding: 10px 0;
}

.display {
    background: #1e1e1e;
    border-radius: 10px;
    padding: 20px;
    font-size: 2.5em;
    text-align: right;
    height: 60px;
    line-height: 60px;
    color: #ffffff;
    overflow: hidden;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.button {
    padding: 20px;
    font-size: 1.5em;
    border: none;
    background: #3a3a3a;
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

.button:hover {
    background: #4a4a4a;
    transform: scale(1.05);
}

.operator {
    background: #f39c12;
}

.operator:hover {
    background: #e67e22;
}

.equal {
    background: #2ecc71;
    grid-column: span 4;
}

.equal:hover {
    background: #27ae60;
}

.zero {
    grid-column: span 2;
}

.info {
    font-size: 0.8em;
    color: #ffffff;
    text-align: center;
    margin-top: 10px;
}

JS

let display = document.getElementById('display');
let timeElement = document.getElementById('time');

setInterval(updateTime, 1000);
updateTime();

function appendToDisplay(value) {
    if (display.innerText === '0' || display.innerText === 'Error') {
        display.innerText = '';
    }
    display.innerText += value;
    playSound();
}

function clearDisplay() {
    display.innerText = '0';
    playSound();
}

function playSound() {
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    const oscillator = audioContext.createOscillator();
    oscillator.type = 'sine';
    oscillator.frequency.setValueAtTime(440, audioContext.currentTime);
    oscillator.connect(audioContext.destination);
    oscillator.start();
    oscillator.stop(audioContext.currentTime + 0.1);
}

Recomendado

Calculadora de fecha

Una página de inicio creada con directorios.

Servicios de Diseño Web, Marketing Digital y Vídeo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS