Calcolatrice iOS

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

14 September 2024

la nuova calcolatrice di mikey

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

Calcolatrice iOS

Consigliato

Calcolatrice Semplice

Calcolatrice di data

la nuova calcolatrice di mikey

HTML

CSS

JS

Consigliato

Calcolatrice Semplice

Calcolatrice di data

la nuova calcolatrice di mikey

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS