كود HTML لآلة حاسبة علمية

يونيو 19, 2024

7٬960 2 دقائق

لإعداد كود HTML لآلة حاسبة علمية يكون متوافقًا مع الأجهزة اللوحية، سنستخدم HTML وCSS وJavaScript. إليك نموذجًا أساسيًا يمكن أن تبني عليه:

كود HTML لآلة حاسبة

كود لآلة حاسبة HTML:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>آلة حاسبة علمية</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <div class="display">
            <input type="text" id="result" readonly>
        </div>
        <div class="buttons">
            <!-- Row 1 -->
            <button class="btn" onclick="clearDisplay()">C</button>
            <button class="btn" onclick="deleteLast()">⌫</button>
            <button class="btn" onclick="appendOperator('(')">(</button>
            <button class="btn" onclick="appendOperator(')')">)</button>
            <!-- Row 2 -->
            <button class="btn" onclick="appendNumber('7')">7</button>
            <button class="btn" onclick="appendNumber('8')">8</button>
            <button class="btn" onclick="appendNumber('9')">9</button>
            <button class="btn" onclick="appendOperator('/')">÷</button>
            <!-- Row 3 -->
            <button class="btn" onclick="appendNumber('4')">4</button>
            <button class="btn" onclick="appendNumber('5')">5</button>
            <button class="btn" onclick="appendNumber('6')">6</button>
            <button class="btn" onclick="appendOperator('*')">×</button>
            <!-- Row 4 -->
            <button class="btn" onclick="appendNumber('1')">1</button>
            <button class="btn" onclick="appendNumber('2')">2</button>
            <button class="btn" onclick="appendNumber('3')">3</button>
            <button class="btn" onclick="appendOperator('-')">-</button>
            <!-- Row 5 -->
            <button class="btn" onclick="appendNumber('0')">0</button>
            <button class="btn" onclick="appendOperator('.')">.</button>
            <button class="btn" onclick="calculateResult()">=</button>
            <button class="btn" onclick="appendOperator('+')">+</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css) كود لآلة حاسبة:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
}

.calculator {
    width: 320px;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.display {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 20px;
    background-color: #222;
    color: #fff;
}

.display input {
    width: 100%;
    border: none;
    background: none;
    color: #fff;
    font-size: 2em;
    text-align: right;
    outline: none;
}

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

.btn {
    background-color: #f0f0f0;
    border: none;
    padding: 20px;
    font-size: 1.2em;
    cursor: pointer;
    outline: none;
}

.btn:hover {
    background-color: #e0e0e0;
}

.btn:active {
    background-color: #d0d0d0;
}

كود لآلة حاسبة JavaScript (script.js):

function clearDisplay() {
    document.getElementById("result").value = "";
}

function deleteLast() {
    var display = document.getElementById("result");
    display.value = display.value.slice(0, -1);
}

function appendNumber(number) {
    var display = document.getElementById("result");
    display.value += number;
}

function appendOperator(operator) {
    var display = document.getElementById("result");
    display.value += operator;
}

function calculateResult() {
    var display = document.getElementById("result");
    try {
        display.value = eval(display.value);
    } catch (error) {
        display.value = "خطأ";
    }
}

هذه هي الأساسيات لإنشاء آلة حاسبة علمية بواجهة متوافقة مع الأجهزة اللوحية. يمكنك توسيع هذه الكودات بإضافة المزيد من الوظائف العلمية مثل الدوال اللوغاريتمية، الأسس، والجذور عن طريق إضافة أزرار إضافية في HTML وتوسيع دالة calculateResult في JavaScript..

يمكنك اضافة المزيد من الدوال الوغاريتمية للكود

<button class="btn" onclick="appendFunction('log')">log</button>
<button class="btn" onclick="appendFunction('ln')">ln</button>

JavaScript (script.js):

حدّث دالة calculateResult ودوال أخرى للتعامل مع الدوال اللوغاريتمية:

function clearDisplay() {
    document.getElementById("result").value = "";
}

function deleteLast() {
    var display = document.getElementById("result");
    display.value = display.value.slice(0, -1);
}

function appendNumber(number) {
    var display = document.getElementById("result");
    display.value += number;
}

function appendOperator(operator) {
    var display = document.getElementById("result");
    display.value += operator;
}

function appendFunction(func) {
    var display = document.getElementById("result");
    display.value += func + '(';
}

function calculateResult() {
    var display = document.getElementById("result");
    var expression = display.value;

    // معالجة الدوال اللوغاريتمية
    expression = expression.replace(/log\(/g, "Math.log10(");
    expression = expression.replace(/ln\(/g, "Math.log(");

    try {
        display.value = eval(expression);
    } catch (error) {
        display.value = "خطأ";
    }
}

بإضافة هذه التعديلات، ستتمكن الآن من استخدام الدوال اللوغاريتمية log و ln في الآلة الحاسبة العلمية. يمكنك توسيعها أكثر بإضافة المزيد من الدوال العلمية حسب الحاجة.