Modern Calculator Website with Dark Mode

Features:
Dark Mode: The entire website has a dark theme.
Animated Background: A gradient background with smooth animation.
Modern Buttons: Buttons are styled with hover and active effects.
Header: "Arrow Calculator" is displayed in the top-left corner.
Footer: Includes a copyright notice.
SEO Meta Tags: Added meta description and keywords for better search engine visibility.


HTML. CSS, JAVA Code
-----------------------------------------------------------------

<html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
    <meta content=" Calculator - A modern, sleek, and user-friendly online calculator with dark mode and animated background. Perfect for quick and accurate calculations." name="description"></meta>
    <meta content="calculator, online calculator, dark mode calculator, modern calculator,  Calculator" name="keywords"></meta>
    <meta content="Arrow Calculator" name="author"></meta>
    <title>Arrow Calculator</title>
    <style>
        /* General Styles */
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(-45deg, #1a1a1a, #2c3e50, #34495e, #1a1a1a);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }

        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Header Styles */
        header {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 24px;
            font-weight: bold;
            color: #fff;
        }

        /* Calculator Container */
        .calculator {
            background: rgba(0, 0, 0, 0.8);
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
            width: 320px;
            text-align: center;
        }

        /* Display Screen */
        .display {
            background: #ffffff;
            color: #fff;
            font-size: 2em;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            text-align: right;
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
        }

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

        .buttons button {
            background: #444;
            color: #fff;
            border: none;
            padding: 20px;
            font-size: 1.2em;
            border-radius: 10px;
            cursor: pointer;
            transition: background 0.3s, transform 0.2s;
        }

        .buttons button:hover {
            background: #555;
            transform: scale(1.05);
        }

        .buttons button:active {
            background: #666;
            transform: scale(0.95);
        }

        .buttons button.operator {
            background: #ff9500;
        }

        .buttons button.operator:hover {
            background: #ffaa33;
        }

        .buttons button.operator:active {
            background: #cc7700;
        }

        .buttons button.clear {
            background: #ff3b30;
        }

        .buttons button.clear:hover {
            background: #ff5c52;
        }

        .buttons button.clear:active {
            background: #cc2c24;
        }

        /* Footer Styles */
        footer {
            position: absolute;
            bottom: 20px;
            width: 100%;
            text-align: center;
            font-size: 14px;
            color: #aaa;
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header>Calculator</header>

    <!-- Calculator -->
    <div class="calculator">
        <div class="display" id="display">0</div>
        <div class="buttons">
            <button class="clear" onclick="clearDisplay()">C</button>
            <button class="operator" onclick="appendOperator('/')">/</button>
            <button class="operator" onclick="appendOperator('*')">*</button>
            <button class="operator" onclick="appendOperator('-')">-</button>
            <button onclick="appendNumber('7')">7</button>
            <button onclick="appendNumber('8')">8</button>
            <button onclick="appendNumber('9')">9</button>
            <button class="operator" onclick="appendOperator('+')">+</button>
            <button onclick="appendNumber('4')">4</button>
            <button onclick="appendNumber('5')">5</button>
            <button onclick="appendNumber('6')">6</button>
            <button onclick="calculateResult()" style="background: #34c759; grid-row: span 2;">=</button>
            <button onclick="appendNumber('1')">1</button>
            <button onclick="appendNumber('2')">2</button>
            <button onclick="appendNumber('3')">3</button>
            <button onclick="appendNumber('0')" style="grid-column: span 2;">0</button>
            <button onclick="appendNumber('.')">.</button>
        </div>
    </div>

    <!-- Footer -->
    <footer>
        © 2025 Calculator. All rights reserved.
    </footer>

    <!-- JavaScript -->
    <script>
        let display = document.getElementById('display');
        let currentInput = '';
        let operator = null;
        let previousInput = '';

        function appendNumber(number) {
            if (currentInput.includes('.') && number === '.') return;
            currentInput += number;
            updateDisplay();
        }

        function appendOperator(op) {
            if (currentInput === '') return;
            if (previousInput !== '') {
                calculateResult();
            }
            operator = op;
            previousInput = currentInput;
            currentInput = '';
        }

        function calculateResult() {
            if (operator === null || currentInput === '') return;
            let result;
            const prev = parseFloat(previousInput);
            const current = parseFloat(currentInput);

            switch (operator) {
                case '+':
                    result = prev + current;
                    break;
                case '-':
                    result = prev - current;
                    break;
                case '*':
                    result = prev * current;
                    break;
                case '/':
                    result = prev / current;
                    break;
                default:
                    return;
            }

            currentInput = result.toString();
            operator = null;
            previousInput = '';
            updateDisplay();
        }

        function clearDisplay() {
            currentInput = '';
            operator = null;
            previousInput = '';
            updateDisplay();
        }

        function updateDisplay() {
            display.innerText = currentInput || '0';
        }
    </script>
</body>
</html>












Comments