iOS Calculator

Open In Editor Publish Your Code

<!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);
}

iOS Calculator

Recommended

Robux Tax Calculator HTML CSS

Robux Tax Calculator

Scientific Calculator

HTML

CSS

JS

Recommended

Robux Tax Calculator HTML CSS

Robux Tax Calculator

Scientific Calculator

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS