Preview:
<!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> 
    <style> 
        body { 
            font-family: Arial, sans-serif; 
            background-color: #f4f4f9; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            height: 100vh; 
            margin: 0; 
        } 
        .calculator { 
            width: 300px; 
            background: #fff; 
            padding: 20px; 
            border-radius: 10px; 
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); 
        } 
        .display { 
            width: 100%; 
            height: 50px; 
            margin-bottom: 10px; 
            font-size: 1.5rem; 
            text-align: right; 
            border: 1px solid #ddd; 
            border-radius: 5px; 
            padding: 5px; 
        } 
        .buttons { 
            display: grid; 
            grid-template-columns: repeat(4, 1fr); 
            gap: 10px; 
        } 
        .button { 
            height: 50px; 
            background: #2196f3; 
            color: white; 
            font-size: 1.2rem; 
            border: none; 
            border-radius: 5px; 
            cursor: pointer; 
            transition: background 0.3s; 
        } 
        .button:hover { 
            background: #1976d2; 
        } 
        .button.clear { 
            background: #f44336; 
        } 
        .button.clear:hover { 
            background: #d32f2f; 
        } 
    </style> 
</head> 
<body> 
    <div class="calculator"> 
        <input type="text" id="display" class="display" disabled> 
        <div class="buttons"> 
            <button class="button" onclick="append('7')">7</button> 
            <button class="button" onclick="append('8')">8</button> 
            <button class="button" onclick="append('9')">9</button> 
            <button class="button" onclick="append('/')">/</button> 
             
            <button class="button" onclick="append('4')">4</button> 
            <button class="button" onclick="append('5')">5</button> 
            <button class="button" onclick="append('6')">6</button> 
            <button class="button" onclick="append('*')">*</button> 
             
            <button class="button" onclick="append('1')">1</button> 
            <button class="button" onclick="append('2')">2</button> 
            <button class="button" onclick="append('3')">3</button> 
            <button class="button" onclick="append('-')">-</button> 
             
            <button class="button" onclick="append('0')">0</button> 
            <button class="button" onclick="append('.')">.</button> 
            <button class="button" onclick="calculate()">=</button> 
            <button class="button" onclick="append('+')">+</button> 
             
            <button class="button clear" onclick="clearDisplay()">C</button> 
             
            <button class="button" onclick="append('%')">%</button> 
        </div> 
    </div> 
    <script> 
        const display = document.getElementById('display'); 
         
        function append(value) { 
            display.value += value; 
        } 
         
        function calculate() { 
            try { 
                display.value = eval(display.value); 
            } catch (error) { 
                display.value = "Error"; 
            } 
        } 
         
        function clearDisplay() { 
            display.value = ''; 
        } 
    </script> 
</body> 
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter