31 Ekim 2024 Perşembe

 <!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Constable</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            margin: 0;

            padding: 0;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: flex-start;

            height: 100vh;

            background-color: #f4f4f4;

        }


        .header {

            margin-top: 20px;

            font-size: 24px;

            font-weight: bold;

            text-align: center;

        }


        .input-container {

            margin-top: 50px;

            display: flex;

            align-items: center;

        }


        input[type="number"] {

            padding: 10px;

            font-size: 16px;

            width: 200px;

            border: 2px solid #ccc;

            border-radius: 4px;

        }


        .enter-button {

            background-color: #ccc;

            border: none;

            padding: 10px;

            cursor: pointer;

            margin-left: 10px;

            border-radius: 4px;

        }


        .results-container {

            margin-top: 20px;

            display: flex;

            flex-direction: column;

            width: 100%;

            max-width: 600px;

        }


        .result-row {

            display: flex;

            justify-content: space-between;

            padding: 10px;

            color: white;

        }


        /* Renkler ve fonksiyon isimleri için CSS sınıfları */

        .x2 { background-color: #ffb26b; }

        .x3 { background-color: #ffb26b; }

        .sqrt { background-color: #ffb26b; }

        .cbrt { background-color: #ffb26b; }

        .sin { background-color: #8cffff; }

        .cos { background-color: #8cffff; }

        .tan { background-color: #8cffff; }

        .cot { background-color: #8cffff; }

        .sec { background-color: #8cffff; }

        .csc { background-color: #8cffff; }

        .sinh { background-color: #a3d1ff; }

        .cosh { background-color: #a3d1ff; }

        .tanh { background-color: #a3d1ff; }

        .coth { background-color: #a3d1ff; }

        .sech { background-color: #a3d1ff; }

        .csch { background-color: #a3d1ff; }

        .arctan { background-color: #abc1f4; }

        .arcsin { background-color: #abc1f4; }

        .arccos { background-color: #abc1f4; }

        .arcsinh { background-color: #abc1f4; }

        .arccosh { background-color: #abc1f4; }

        .arctanh { background-color: #abc1f4; }

        .circumference { background-color: #dab7ff; }

        .area { background-color: #dab7ff; }

        .P0 { background-color: #ffb7b7; }

        .P1 { background-color: #ffb7b7; }

        .exp { background-color: #ffb26b; }

        .Li { background-color: #ffb7b7; }

        .Ei { background-color: #ffb7b7; }

        .log { background-color: #ffb7b7; }

        .abs { background-color: #ffffff; }

        .x5 { background-color: #ffb26b; }

        .x7 { background-color: #ffb26b; }

        .x11 { background-color: #ffb26b; }

        .x13 { background-color: #ffb26b; }

        .x17 { background-color: #ffb26b; }

        .x19 { background-color: #ffb26b; }

        .gamma { background-color: #ffff00; }

        .beta { background-color: #00ff00; }

        .zeta { background-color: #d2a8ff; }

        .haversin { background-color: #afffff; }

        .sgn { background-color: #ffa8a8; }

        .phi { background-color: #ffd389; }

        .J0 { background-color: #b1ddd9; }

        .J1 { background-color: #b1ddd9; }

        .Y0 { background-color: #b1ddd9; }

        .Y1 { background-color: #b1ddd9; }

        .lambda { background-color: #b3bfb5; }

        .erf { background-color: #bde3f9; }

        .D { background-color: #a8d7ea; }

        .delta { background-color: #ff9696; }

        .Q { background-color: #ffeb8c; }

        .P { background-color: #ffeb8c; }

        .H { background-color: #cc9386; }

        .Ai { background-color: #8bd3cd; }

        .Bi { background-color: #8bd3cd; }

    </style>

</head>

<body>


    <div class="header">co(n)sTable</div>


    <div class="input-container">

        <input type="number" id="inputNumber" placeholder="Bir sayı girin" />

        <button class="enter-button" id="enterButton">↵</button>

    </div>


    <div class="results-container" id="resultsContainer">

        <!-- Sonuçlar buraya eklenecek -->

    </div>


    <script>

        const functions = [

            { name: 'x^2', description: 'x\'in karesi', fn: x => Math.pow(x, 2), className: 'x2' },

            { name: 'x^3', description: 'x\'in küpü', fn: x => Math.pow(x, 3), className: 'x3' },

            { name: '√x', description: 'Karekök', fn: x => Math.sqrt(x), className: 'sqrt' },

            { name: '∛x', description: 'Küpkök', fn: x => Math.cbrt(x), className: 'cbrt' },

            { name: 'sin(x)', description: 'Sinüs', fn: x => Math.sin(x), className: 'sin' },

            { name: 'cos(x)', description: 'Kosinüs', fn: x => Math.cos(x), className: 'cos' },

            { name: 'tan(x)', description: 'Tanjant', fn: x => Math.tan(x), className: 'tan' },

            { name: 'cot(x)', description: 'Kotanjant', fn: x => 1 / Math.tan(x), className: 'cot' },

            { name: 'sec(x)', description: 'Sekant', fn: x => 1 / Math.cos(x), className: 'sec' },

            { name: 'csc(x)', description: 'Kosekant', fn: x => 1 / Math.sin(x), className: 'csc' },

            { name: 'sinh(x)', description: 'Hiperbolik Sinüs', fn: x => Math.sinh(x), className: 'sinh' },

            { name: 'cosh(x)', description: 'Hiperbolik Kosinüs', fn: x => Math.cosh(x), className: 'cosh' },

            { name: 'tanh(x)', description: 'Hiperbolik Tanjant', fn: x => Math.tanh(x), className: 'tanh' },

            { name: 'coth(x)', description: 'Hiperbolik Kotanjant', fn: x => 1 / Math.tanh(x), className: 'coth' },

            { name: 'sech(x)', description: 'Hiperbolik Sekant', fn: x => 1 / Math.cosh(x), className: 'sech' },

            { name: 'csch(x)', description: 'Hiperbolik Kosekant', fn: x => 1 / Math.sinh(x), className: 'csch' },

            { name: 'arctan(x)', description: 'Ters Tanjant', fn: x => Math.atan(x), className: 'arctan' },

            { name: 'arcsin(x)', description: 'Ters Sinüs', fn: x => Math.asin(x), className: 'arcsin' },

            { name: 'arccos(x)', description: 'Ters Kosinüs', fn: x => Math.acos(x), className: 'arccos' },

            { name: 'arcsinh(x)', description: 'Ters Hiperbolik Sinüs', fn: x => Math.asinh(x), className: 'arcsinh' },

            { name: 'arccosh(x)', description: 'Ters Hiperbolik Kosinüs', fn: x => Math.acosh(x), className: 'arccosh' },

            { name: 'arctanh(x)', description: 'Ters Hiperbolik Tanjant', fn: x => Math.atanh(x), className: 'arctanh' },

            { name: 'Çemberin Çevresi', description: '2πr', fn: r => 2 * Math.PI * r, className: 'circumference' },

            { name: 'Çemberin Alanı', description: 'πr²', fn: r => Math.PI * Math.pow(r, 2), className: 'area' },

            { name: 'P0', description: 'Yüksek Olasılık', fn: (x) => /* P0 hesaplama fonksiyonu burada */ 0, className: 'P0' },

            { name: 'P1', description: 'Düşük Olasılık', fn: (x) => /* P1 hesaplama fonksiyonu burada */ 0, className: 'P1' },

            { name: 'exp(x)', description: 'e^x', fn: x => Math.exp(x), className: 'exp' },

            { name: 'Li', description: 'Logaritmik Integral', fn: x => /* Li hesaplama fonksiyonu burada */ 0, className: 'Li' },

            { name: 'Ei', description: 'Exponential Integral', fn: x => /* Ei hesaplama fonksiyonu burada */ 0, className: 'Ei' },

            { name: 'log(x)', description: 'Logaritma', fn: x => Math.log(x), className: 'log' },

            { name: '|x|', description: 'Mutlak Değer', fn: x => Math.abs(x), className: 'abs' },

            { name: 'x^5', description: 'x\'in beşinci kuvveti', fn: x => Math.pow(x, 5), className: 'x5' },

            { name: 'x^7', description: 'x\'in yedinci kuvveti', fn: x => Math.pow(x, 7), className: 'x7' },

            { name: 'x^11', description: 'x\'in onbirinci kuvveti', fn: x => Math.pow(x, 11), className: 'x11' },

            { name: 'x^13', description: 'x\'in onüçüncü kuvveti', fn: x => Math.pow(x, 13), className: 'x13' },

            { name: 'x^17', description: 'x\'in onyedinci kuvveti', fn: x => Math.pow(x, 17), className: 'x17' },

            { name: 'x^19', description: 'x\'in ondokuzuncu kuvveti', fn: x => Math.pow(x, 19), className: 'x19' },

            { name: 'Γ(x)', description: 'Gamma Fonksiyonu', fn: x => /* Gamma hesaplama fonksiyonu burada */ 0, className: 'gamma' },

            { name: 'β(x)', description: 'Beta Fonksiyonu', fn: (x, y) => /* Beta hesaplama fonksiyonu burada */ 0, className: 'beta' },

            { name: 'ζ(x)', description: 'Zeta Fonksiyonu', fn: x => /* Zeta hesaplama fonksiyonu burada */ 0, className: 'zeta' },

            { name: 'Haversin', description: 'Haversine', fn: (lat1, lon1, lat2, lon2) => /* Haversin hesaplama fonksiyonu burada */ 0, className: 'haversin' },

            { name: 'sgn(x)', description: 'Sinyal Fonksiyonu', fn: x => Math.sign(x), className: 'sgn' },

            { name: 'φ(x)', description: 'Altın Oran', fn: x => /* Altın oran hesaplama fonksiyonu burada */ 0, className: 'phi' },

            { name: 'J0(x)', description: 'Bessel J0 Fonksiyonu', fn: x => /* J0 hesaplama fonksiyonu burada */ 0, className: 'J0' },

            { name: 'J1(x)', description: 'Bessel J1 Fonksiyonu', fn: x => /* J1 hesaplama fonksiyonu burada */ 0, className: 'J1' },

            { name: 'Y0(x)', description: 'Bessel Y0 Fonksiyonu', fn: x => /* Y0 hesaplama fonksiyonu burada */ 0, className: 'Y0' },

            { name: 'Y1(x)', description: 'Bessel Y1 Fonksiyonu', fn: x => /* Y1 hesaplama fonksiyonu burada */ 0, className: 'Y1' },

            { name: 'λ(x)', description: 'Dalga Fonksiyonu', fn: (x) => /* Dalga fonksiyonu burada */ 0, className: 'lambda' },

            { name: 'erf(x)', description: 'Hata Fonksiyonu', fn: x => /* Hata hesaplama fonksiyonu burada */ 0, className: 'erf' },

            { name: 'D(x)', description: 'D Fonksiyonu', fn: x => /* D hesaplama fonksiyonu burada */ 0, className: 'D' },

            { name: 'δ(x)', description: 'Delta Fonksiyonu', fn: x => /* Delta hesaplama fonksiyonu burada */ 0, className: 'delta' },

            { name: 'Q(x)', description: 'Q Fonksiyonu', fn: (x) => /* Q hesaplama fonksiyonu burada */ 0, className: 'Q' },

            { name: 'P(x)', description: 'P Fonksiyonu', fn: (x) => /* P hesaplama fonksiyonu burada */ 0, className: 'P' },

            { name: 'H(x)', description: 'H Fonksiyonu', fn: (x) => /* H hesaplama fonksiyonu burada */ 0, className: 'H' },

            { name: 'Ai(x)', description: 'Airy Fonksiyonu', fn: (x) => /* Ai hesaplama fonksiyonu burada */ 0, className: 'Ai' },

            { name: 'Bi(x)', description: 'Bi Fonksiyonu', fn: (x) => /* Bi hesaplama fonksiyonu burada */ 0, className: 'Bi' },

        ];


        document.getElementById('enterButton').addEventListener('click', () => {

            const inputNumber = parseFloat(document.getElementById('inputNumber').value);

            const resultsContainer = document.getElementById('resultsContainer');


            resultsContainer.innerHTML = ''; // Önceki sonuçları temizle


            if (!isNaN(inputNumber)) {

                functions.forEach(func => {

                    const resultValue = func.fn(inputNumber);

                    const resultDiv = document.createElement('div');

                    resultDiv.classList.add('result-row', func.className);

                    resultDiv.textContent = `${func.name}: ${resultValue}`;

                    resultsContainer.appendChild(resultDiv);

                });

            } else {

                alert('Lütfen geçerli bir sayı girin.');

            }

        });

    </script>

</body>

</html>


Hiç yorum yok:

Yorum Gönder