Calcolatrice iOS

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

17 September 2024

la nuova calcolatrice di mikey

29 May 2025

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

Calcolatrice iOS

Consigliato

Calcolatrice di data

la nuova calcolatrice di mikey

curiosità (modello)

HTML

CSS

JS

Consigliato

Calcolatrice di data

la nuova calcolatrice di mikey

curiosità (modello)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS