Kalkulator naukowy

Kalkulator naukowy jest przydatnym narzędziem do wykonywania skomplikowanych obliczeń matematycznych. Może być używany do wykonywania zadań związanych z algebra, geometrią, trygonometrią i innymi dziedzinami matematyki.
Używany jest do wykonywania obliczeń szybciej i dokładniej niż tradycyjne metody ręcznego liczenia.
Dodane są stałe fizyczne oraz matematyczne. Oraz przelicznik miar
Poniżej znajdziecie kody do wstawienia takiego kalkulatora na własną stronę.
🔬 Kalkulator Naukowy

📐 Stopnie (DEG) 💾 Pamięć
Oto krótki przegląd jego funkcji i zastosowań:
1. Edukacja: Kalkulatory naukowe są nieodłącznym narzędziem dla studentów studiujących nauki ścisłe. Pomagają w rozwiązywaniu skomplikowanych problemów matematycznych, fizycznych czy chemicznych.
2. Inżynieria: W dziedzinie inżynierii kalkulatory naukowe są niezbędne do wykonywania skomplikowanych obliczeń. Służą do projektowania struktur, obliczania wytrzymałości materiałów czy analizy danych technicznych.
3. Fizyka: Kalkulatory naukowe umożliwiają wykonywanie obliczeń związanych z fizyką, takich jak prawa ruchu, dynamika czy elektromagnetyzm.
4. Matematyka: W matematyce kalkulatory naukowe pomagają w rozwiązywaniu równań, obliczaniu pierwiastków, funkcji trygonometrycznych, logarytmów i innych skomplikowanych operacji.
Warto zaznaczyć, że kalkulatory naukowe oferują wiele funkcji, takich jak obliczenia matematyczne, funkcje trygonometryczne, konwersje jednostek i operacje statystyczne.
Jak wstawić gadżet na własną stronę?

Można to zrobić ręcznie lub pobrać gotowca i go edytować jak dusza zapragnie.
Samodzielnie:

Tworzymy nowy folder a w nim odpowiedni plik: index.html.
I wklejamy poniższy kod źródłowy.
Konwerter niestety trzeba samemu pobrać i zapisać jako index2.html. Jest tutaj: Konwerter.
index.html

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalkulator Naukowy</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --accent-color: #e74c3c;
            --background-color: #ecf0f1;
            --button-bg: #34495e;
            --button-hover: #3498db;
            --modal-bg: #fff;
            --text-color: #333;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background: #fafafa;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--text-color);
            padding: 20px;
        }

        .calculator {
            width: 100%;
            max-width: 700px;
            background-color: var(--background-color);
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .heading {
            text-align: center;
            color: var(--primary-color);
            font-weight: 700;
            font-size: 28px;
            margin-bottom: 20px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }

        #screen {
            width: 100%;
            height: 60px;
            border-radius: 8px;
            border: 2px solid #bdc3c7;
            font-size: 24px;
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 0 15px;
            margin-bottom: 20px;
            text-align: right;
            font-weight: 500;
            box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
        }

        .calc-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 10px;
        }

        .functions-one, .functions-two {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            min-width: 300px;
        }

        .button {
            flex: 1 0 calc(25% - 8px);
            min-width: 60px;
            border: none;
            height: 50px;
            border-radius: 6px;
            color: white;
            cursor: pointer;
            font-size: 18px;
            font-weight: 500;
            transition: all 0.2s ease;
            box-shadow: 0 3px 5px rgba(0,0,0,0.2);
        }

        .button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 8px rgba(0,0,0,0.3);
        }

        .button:active {
            transform: translateY(1px);
            box-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }

        .triggers {
            background-color: #e74c3c;
        }

        .numbers {
            background-color: #7f8c8d;
        }

        .basic-stuff {
            background-color: #3498db;
        }

        .complex-stuff {
            background-color: #9b59b6;
        }

        .complex-stuff:hover {
            background-color: #8e44ad;
        }

        .operator {
            font-size: 24px !important;
            font-weight: 700;
        }

        .accent-button {
            background-color: #e74c3c !important;
            border: 2px solid #c0392b !important;
            font-weight: 700;
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 50px;
            margin-top: 10px;
        }

        .accent-button::after {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: left 0.5s;
        }

        .accent-button:hover::after {
            left: 100%;
        }

        .modal-button {
            background-color: #e67e22;
            border: 2px solid #d35400;
            font-weight: 700;
            position: relative;
            overflow: hidden;
            flex: 1 0 calc(50% - 8px) !important;
        }

        .modal-button::after {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: left 0.5s;
        }

        .modal-button:hover::after {
            left: 100%;
        }

        .history-section {
            width: 100%;
            color: white;
            background-color: #2c3e50;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0px 5px 10px rgba(0,0,0,0.2) inset;
            margin-top: 10px;
        }

        .history-title {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 10px;
        }

        #history {
            width: 100%;
            min-height: 100px;
            max-height: 150px;
            overflow-y: auto;
            padding: 10px;
            background-color: rgba(0,0,0,0.2);
            border-radius: 5px;
            font-family: monospace;
        }

        .history-action {
            color: #3498db;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.7);
            animation: fadeIn 0.3s;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .modal-content {
            background-color: var(--modal-bg);
            margin: 2% auto;
            padding: 30px;
            border-radius: 10px;
            width: 95%;
            max-width: 1200px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            animation: slideIn 0.3s;
            max-height: 90vh;
            overflow-y: auto;
        }

        @keyframes slideIn {
            from { transform: translateY(-50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 32px;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.2s;
        }

        .close:hover, .close:focus {
            color: var(--accent-color);
        }

        .modal-title {
            font-size: 26px;
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #eee;
        }

        .constants-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .constants-section {
            margin-bottom: 20px;
        }

        .section-title {
            font-size: 22px;
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 1px solid #eee;
        }

        .constant-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            padding: 10px;
            border-radius: 5px;
            transition: background-color 0.2s;
            font-size: 18px;
        }

        .constant-item:hover {
            background-color: #f5f5f5;
        }

        .constant-name {
            flex: 1;
        }

        .constant-value {
            color: #2c3e50;
            font-weight: 500;
            min-width: 250px;
            text-align: right;
            font-size: 18px;
            margin-right: 15px;
        }

        .copy-button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.2s;
        }

        .copy-button:hover {
            background-color: #2980b9;
        }

        .copy-button.copied {
            background-color: #27ae60;
        }

        #konwersjeIframe {
            width: 100%;
            height: 700px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        @media only screen and (max-width: 768px) {
            .calculator {
                padding: 15px;
            }
            
            .functions-one, .functions-two {
                min-width: 100%;
            }
            
            .button {
                flex: 1 0 calc(33.333% - 8px);
                font-size: 16px;
            }
            
            .operator {
                font-size: 20px !important;
            }
            
            .modal-button {
                flex: 1 0 calc(50% - 8px) !important;
            }
            
            .modal-content {
                width: 98%;
                padding: 20px;
            }
            
            .constant-item {
                font-size: 16px;
                flex-direction: column;
                align-items: flex-start;
            }
            
            .constant-value {
                font-size: 16px;
                min-width: 100%;
                text-align: left;
                margin: 5px 0;
            }
            
            .copy-button {
                align-self: flex-end;
                margin-top: 5px;
            }
        }

        @media only screen and (max-width: 480px) {
            .calculator {
                padding: 10px;
            }
            
            .heading {
                font-size: 22px;
            }
            
            #screen {
                height: 50px;
                font-size: 20px;
            }
            
            .button {
                flex: 1 0 calc(50% - 8px);
                height: 45px;
                font-size: 16px;
            }
            
            .operator {
                font-size: 18px !important;
            }
            
            .modal-button {
                flex: 1 0 calc(50% - 8px) !important;
            }
            
            .history-section {
                padding: 10px;
            }
            
            .modal-content {
                padding: 15px;
            }
            
            .constant-item {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <div class="calculator">
        <h1 class="heading">Kalkulator Naukowy</h1>
        <input type="text" id="screen" maxlength="30" placeholder="0">
        
        <div class="calc-buttons">
            <div class="functions-one">
                <button class="button basic-stuff">(</button>
                <button class="button basic-stuff">)</button>
                <button class="button triggers">DEL</button>
                <button class="button triggers">AC</button>
                <button class="button numbers">7</button>
                <button class="button numbers">8</button>
                <button class="button numbers">9</button>
                <button class="button basic-stuff operator">/</button>
                <button class="button numbers">4</button>
                <button class="button numbers">5</button>
                <button class="button numbers">6</button>
                <button class="button basic-stuff operator">*</button>
                <button class="button numbers">3</button>
                <button class="button numbers">2</button>
                <button class="button numbers">1</button>
                <button class="button basic-stuff operator">-</button>
                <button class="button basic-stuff">.</button>
                <button class="button numbers">0</button>
                <button class="button basic-stuff operator">+</button>
                <button class="button triggers operator" onclick="calculate()">=</button>
            </div>
            
            <div class="functions-two">
                <button class="button complex-stuff modal-button" id="przyciskKonwersje">Konwersje</button>
                <button class="button complex-stuff modal-button" id="przyciskStale">Stałe</button>
                <button class="button complex-stuff">%</button>
                <button class="button complex-stuff">rad</button>
                <button class="button complex-stuff">x!</button>
                <button class="button complex-stuff">x^</button>
                <button class="button complex-stuff">x²</button>
                <button class="button complex-stuff">log</button>
                <button class="button complex-stuff">ln</button>
                <button class="button complex-stuff">e</button>
                <button class="button complex-stuff">√</button>
                <button class="button complex-stuff">sin</button>
                <button class="button complex-stuff">cos</button>
                <button class="button complex-stuff">tan</button>
                <button class="button complex-stuff">*</button>
                <button class="button complex-stuff">±</button>
                <button class="button complex-stuff">π</button>
                <button class="button complex-stuff">∘</button>
            </div>
        </div>
        
        <button class="button accent-button" id="clear">Cofnij</button>
        
        <div class="history-section">
            <p class="history-title">Historia obliczeń</p>
            <div id="history"></div>
        </div>
    </div>

    <!-- Modal dla stałych -->
    <div id="modalStale" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <div class="modal-title">Stałe Fizyczne i Matematyczne</div>
            
            <div class="constants-container">
                <div class="constants-section">
                    <h3 class="section-title">Stałe Fizyczne</h3>
                    
                    <div class="constant-item">
                        <span class="constant-name">Prędkość światła</span>
                        <span class="constant-value">299792458</span>
                        <button class="copy-button" data-value="299792458">Kopiuj</button>
                    </div>
                    
                    <div class="constant-item">
                        <span class="constant-name">Kwant przewodnictwa</span>
                        <span class="constant-value">7.748091731 × 10<sup>-5</sup></span>
                        <button class="copy-button" data-value="7.748091731e-5">Kopiuj</button>
                    </div>
                    
                    <div class="constant-item">
                        <span class="constant-name">Stała grawitacji (G)</span>
                        <span class="constant-value">6.673 × 10<sup>-11</sup></span>
                        <button class="copy-button" data-value="6.673e-11">Kopiuj</button>
                    </div>
                    
                    <div class="constant-item">
                        <span class="constant-name">Stała elektryczna</span>
                        <span class="constant-value">8.854187817 × 10<sup>-12</sup></span>
                        <button class="copy-button" data-value="8.854187817e-12">Kopiuj</button>
                    </div>
                    
                    <div class="constant-item">
                        <span class="constant-name">Stała Plancka</span>
                        <span class="constant-value">6.62607015 × 10<sup>-34</sup></span>
                        <button class="copy-button" data-value="6.62607015e-34">Kopiuj</button>
                    </div>
                    
                    <div class="constant-item">
                        <span class="constant-name">Długość Plancka</span>
                        <span class="constant-value">1.616255 × 10<sup>-35</sup></span>
                        <button class="copy-button" data-value="1.616255e-35">Kopiuj</button>
                    </div>
                    
                    <div class="constant-item">
                        <span class="constant-name">Stała grawitacji Newtona</span>
                        <span class="constant-value">6.67430 × 10<sup>-11</sup></span>
                        <button class="copy-button" data-value="6.67430e-11">Kopiuj</button>
                    </div>
                </div>
                
                <div class="constants-section">
                    <h3 class="section-title">Stałe Matematyczne</h3>
                    
                    <div class="constant-item">
                        <span class="constant-name">Złoty podział (φ)</span>
                        <span class="constant-value">1.618033988749895</span>
                        <button class="copy-button" data-value="1.618033988749895">Kopiuj</button>
                    </div>
                    
                    <div class="constant-item">
                        <span class="constant-name">Stała Eulera-Mascheroniego (γ)</span>
                        <span class="constant-value">0.5772156649015329</span>
                        <button class="copy-button" data-value="0.5772156649015329">Kopiuj</button>
                    </div>
                    
                    <div class="constant-item">
                        <span class="constant-name">Stała Meissela-Mertensa</span>
                        <span class="constant-value">0.2614972128476428</span>
                        <button class="copy-button" data-value="0.2614972128476428">Kopiuj</button>
                    </div>
                    
                    <div class="constant-item">
                        <span class="constant-name">Stała Omega</span>
                        <span class="constant-value">0.5671432904097839</span>
                        <button class="copy-button" data-value="0.5671432904097839">Kopiuj</button>
                    </div>
                    
                    <div class="constant-item">
                        <span class="constant-name">Stała Cahena</span>
                        <span class="constant-value">0.6434105462883381</span>
                        <button class="copy-button" data-value="0.6434105462883381">Kopiuj</button>
                    </div>
                    
                    <div class="constant-item">
                        <span class="constant-name">Stała Landau-Ramanujana</span>
                        <span class="constant-value">0.7642236535892207</span>
                        <button class="copy-button" data-value="0.7642236535892207">Kopiuj</button>
                    </div>
                    
                    <div class="constant-item">
                        <span class="constant-name">Stała Alladiego-Grinsteada</span>
                        <span class="constant-value">0.8093940205406391</span>
                        <button class="copy-button" data-value="0.8093940205406391">Kopiuj</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal dla konwersji -->
    <div id="modalKonwersje" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <div class="modal-title">Konwersje Jednostek</div>
            <iframe id="konwersjeIframe" src="index2.html"></iframe>
        </div>
    </div>

    <script>
        // Zmienne globalne
        const display = document.getElementById("screen");
        const historyElement = document.getElementById("history");
        const buttons = document.querySelectorAll(".button");
        let currentExpression = "";
        let history = [];
        let errorDisplayed = false;

        // Inicjalizacja kalkulatora
        function initCalculator() {
            // Obsługa przycisków numerycznych i operacji
            buttons.forEach(button => {
                button.addEventListener("click", function() {
                    // Jeśli wyświetlany jest błąd, resetuj wyświetlacz przy wprowadzaniu nowej liczby
                    if (errorDisplayed && !this.classList.contains('modal-button') && !this.classList.contains('accent-button')) {
                        if (this.textContent.match(/[0-9]/) || this.textContent === '.') {
                            clearDisplay();
                            errorDisplayed = false;
                        }
                    }
                    
                    // Sprawdzamy czy przycisk nie jest modal-button ani accent-button
                    if (this.classList.contains('modal-button') || this.classList.contains('accent-button')) {
                        return;
                    }
                    
                    const value = this.textContent;
                    
                    if (value === "=") {
                        calculate();
                    } else if (value === "AC") {
                        clearDisplay();
                    } else if (value === "DEL") {
                        deleteLast();
                    } else if (value === "±") {
                        toggleSign();
                    } else if (["sin", "cos", "tan", "log", "ln", "x!", "x²", "√", "π", "e", "rad", "∘"].includes(value)) {
                        handleScientificFunction(value);
                    } else if (value === "%") {
                        handlePercentage();
                    } else {
                        appendToDisplay(value);
                    }
                });
            });

            // Obsługa przycisku "Cofnij" - osobny event listener
            document.getElementById("clear").addEventListener("click", function() {
                deleteLast();
                addToHistory("Cofnij", "action");
            });

            // Obsługa modali
            const modalStale = document.getElementById("modalStale");
            const modalKonwersje = document.getElementById("modalKonwersje");
            const przyciskStale = document.getElementById("przyciskStale");
            const przyciskKonwersje = document.getElementById("przyciskKonwersje");
            const closeButtons = document.querySelectorAll(".close");

            // Otwieranie modali
            przyciskStale.addEventListener("click", () => {
                modalStale.style.display = "block";
                addToHistory("Otworzono stałe", "action");
            });

            przyciskKonwersje.addEventListener("click", () => {
                modalKonwersje.style.display = "block";
                addToHistory("Otworzono konwersje", "action");
            });

            // Zamykanie modali
            closeButtons.forEach(button => {
                button.addEventListener("click", () => {
                    modalStale.style.display = "none";
                    modalKonwersje.style.display = "none";
                });
            });

            // Zamykanie modali po kliknięciu poza nimi
            window.addEventListener("click", (event) => {
                if (event.target === modalStale) {
                    modalStale.style.display = "none";
                }
                if (event.target === modalKonwersje) {
                    modalKonwersje.style.display = "none";
                }
            });

            // Obsługa przycisków kopiowania
            document.querySelectorAll('.copy-button').forEach(button => {
                button.addEventListener('click', function() {
                    const value = this.getAttribute('data-value');
                    copyToClipboard(value);
                    
                    // Zmiana wyglądu przycisku na chwilę
                    const originalText = this.textContent;
                    this.textContent = 'Skopiowano!';
                    this.classList.add('copied');
                    
                    setTimeout(() => {
                        this.textContent = originalText;
                        this.classList.remove('copied');
                    }, 1500);
                });
            });

            // Obsługa klawiatury
            document.addEventListener("keydown", handleKeyboardInput);
        }

        // Funkcja kopiowania do schowka
        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(() => {
                console.log('Skopiowano do schowka: ' + text);
            }).catch(err => {
                console.error('Błąd podczas kopiowania: ', err);
                // Fallback dla starszych przeglądarek
                const textArea = document.createElement("textarea");
                textArea.value = text;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand("copy");
                document.body.removeChild(textArea);
            });
        }

        // Funkcje kalkulatora
        function appendToDisplay(value) {
            display.value += value;
            currentExpression += value;
        }

        function clearDisplay() {
            display.value = "";
            currentExpression = "";
            errorDisplayed = false;
        }

        function deleteLast() {
            display.value = display.value.slice(0, -1);
            currentExpression = currentExpression.slice(0, -1);
        }

        function toggleSign() {
            if (display.value && display.value !== "0" && display.value !== "Błąd") {
                if (display.value.charAt(0) === "-") {
                    display.value = display.value.substring(1);
                } else {
                    display.value = "-" + display.value;
                }
            }
        }

        function calculate() {
            try {
                let expression = display.value;
                
                // Zamiana symboli matematycznych na format zrozumiały dla eval
                expression = expression.replace(/×/g, "*").replace(/÷/g, "/");
                
                // Obsługa potęgowania
                expression = expression.replace(/(\d+)\^(\d+)/g, "Math.pow($1,$2)");
                
                // Obsługa pierwiastka kwadratowego
                expression = expression.replace(/√(\d+)/g, "Math.sqrt($1)");
                
                // Obliczenie wyrażenia
                const result = eval(expression);
                
                // Dodanie do historii
                addToHistory(`${display.value} = ${result}`);
                
                // Wyświetlenie wyniku
                display.value = result;
                currentExpression = result.toString();
                errorDisplayed = false;
            } catch (error) {
                display.value = "Błąd";
                currentExpression = "";
                errorDisplayed = true;
            }
        }

        function handlePercentage() {
            try {
                let expression = display.value;
                
                // Jeśli wyrażenie zawiera operator, oblicz procent z poprzedniej wartości
                if (expression.match(/[\+\-\*\/]/)) {
                    // Podziel wyrażenie na części
                    const parts = expression.split(/([\+\-\*\/])/);
                    const lastNumber = parseFloat(parts[parts.length - 1]);
                    const operator = parts[parts.length - 2];
                    const baseValue = parseFloat(parts[parts.length - 3]);
                    
                    let result;
                    switch(operator) {
                        case '+':
                            result = baseValue + (baseValue * lastNumber / 100);
                            break;
                        case '-':
                            result = baseValue - (baseValue * lastNumber / 100);
                            break;
                        case '*':
                            result = baseValue * (lastNumber / 100);
                            break;
                        case '/':
                            result = baseValue / (lastNumber / 100);
                            break;
                        default:
                            result = lastNumber / 100;
                    }
                    
                    // Zaktualizuj wyświetlacz
                    display.value = result;
                    currentExpression = result.toString();
                    addToHistory(`${expression}% = ${result}`);
                } else {
                    // Proste obliczenie procentu
                    const value = parseFloat(expression) / 100;
                    display.value = value;
                    currentExpression = value.toString();
                    addToHistory(`${expression}% = ${value}`);
                }
                errorDisplayed = false;
            } catch (error) {
                display.value = "Błąd";
                currentExpression = "";
                errorDisplayed = true;
            }
        }

        function handleScientificFunction(func) {
            try {
                let value = parseFloat(display.value);
                let result;
                
                switch(func) {
                    case "sin":
                        result = Math.sin(value);
                        break;
                    case "cos":
                        result = Math.cos(value);
                        break;
                    case "tan":
                        result = Math.tan(value);
                        break;
                    case "log":
                        result = Math.log10(value);
                        break;
                    case "ln":
                        result = Math.log(value);
                        break;
                    case "x!":
                        result = factorial(value);
                        break;
                    case "x²":
                        result = Math.pow(value, 2);
                        break;
                    case "√":
                        result = Math.sqrt(value);
                        break;
                    case "π":
                        result = Math.PI;
                        break;
                    case "e":
                        result = Math.E;
                        break;
                    case "rad":
                        result = value * (Math.PI / 180);
                        break;
                    case "∘":
                        result = value * (180 / Math.PI);
                        break;
                    default:
                        result = "Błąd";
                }
                
                addToHistory(`${func}(${value}) = ${result}`);
                display.value = result;
                currentExpression = result.toString();
                errorDisplayed = false;
            } catch (error) {
                display.value = "Błąd";
                currentExpression = "";
                errorDisplayed = true;
            }
        }

        function factorial(n) {
            if (n === 0 || n === 1) return 1;
            if (n < 0) return "Błąd";
            
            let result = 1;
            for (let i = 2; i <= n; i++) {
                result *= i;
            }
            return result;
        }

        function addToHistory(entry, type = "calculation") {
            history.unshift({entry, type});
            if (history.length > 10) {
                history.pop();
            }
            
            historyElement.innerHTML = history.map(item => {
                if (item.type === "action") {
                    return `<div class="history-action">${item.entry}</div>`;
                } else {
                    return `<div>${item.entry}</div>`;
                }
            }).join("");
        }

        function handleKeyboardInput(event) {
            const key = event.key;
            
            if (key >= '0' && key <= '9' || key === '.') {
                if (errorDisplayed) {
                    clearDisplay();
                    errorDisplayed = false;
                }
                appendToDisplay(key);
            } else if (key === '+' || key === '-' || key === '*' || key === '/') {
                appendToDisplay(key);
            } else if (key === 'Enter' || key === '=') {
                event.preventDefault();
                calculate();
            } else if (key === 'Escape' || key === 'c' || key === 'C') {
                clearDisplay();
            } else if (key === 'Backspace') {
                deleteLast();
            }
        }

        // Inicjalizacja kalkulatora po załadowaniu strony
        document.addEventListener("DOMContentLoaded", initCalculator);
    </script>
</body>
</html>
Pliki źródłowe

Lub można pobrać gotowe pliki kalkulatora i je edytować.
Top Stories

Video Propt Generator dla AI do tworzenia wideo

Generator Promptów Web AI do tworzenia stron dla laików

Generator Promptów AI do tworzenia grafik

Rozbudowany kalkulator naukowy na stronę www

Kalkulator naukowy jest przydatnym narzędziem do wykonywania skomplikowanych obliczeń matematycznych.

Kalkulator naukowy
