في هذا الدليل، سنقوم ببناء آلة حاسبة بسيطة من البداية. سنتعلم كيفية إعداد واجهة المستخدم باستخدام HTML، تصميم الحاسبة باستخدام CSS، وإضافة العمليات الحسابية والتفاعل باستخدام JavaScript. هذه الآلة الحاسبة ستكون قادرة على إجراء عمليات الجمع، الطرح، الضرب، والقسمة، بالإضافة إلى القدرة على مسح المدخلات وإعادة تعيين الشاشة.

المتطلبات الأساسية

محرر نصوص مثل Visual Studio Code أو Sublime Text.
معرفة أساسية بـ HTML، CSS، وJavaScript.
متصفح ويب حديث لاختبار الآلة الحاسبة.

الخطوة 1: إعداد هيكل HTML للآلة الحاسبة

افتح محرر النصوص وأنشئ ملفًا جديدًا باسم <index.html>، وأضف الكود التالي:


<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="تعلم كيفية إنشاء آلة حاسبة بسيطة باستخدام HTML، CSS، وJavaScript.">
    <title>آلة حاسبة بسيطة</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <input type="text" id="display" disabled>
        <div class="buttons">
            <button class="btn" onclick="clearDisplay()">C</button>
            <button class="btn" onclick="deleteDigit()">DEL</button>
            <button class="btn" onclick="appendOperator('/')">/</button>
            <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>
            <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>
            <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>
            <button class="btn zero" onclick="appendNumber(0)">0</button>
            <button class="btn" onclick="appendNumber('.')">.</button>
            <button class="btn" onclick="calculate()">=</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

الخطوة 2: تصميم الآلة الحاسبة باستخدام CSS

قم بإنشاء ملف جديد باسم styles.css بجانب index.html، وأضف الكود التالي لتصميم الآلة الحاسبة:


/* تنسيق الحاوية العامة */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
}

/* تنسيق الآلة الحاسبة */
.calculator {
    width: 400px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* تنسيق الشاشة */
#display {
    width: 100%;
    height: 60px;
    font-size: 24px;
    border: none;
    background-color: #f4f4f4;
    text-align: right;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
}

/* تنسيق الأزرار */
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.btn {
    padding: 20px;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    background-color: #333;
    color: #fff;
    cursor: pointer;
}

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

.zero {
    grid-column: span 2; /* الزر صفر يأخذ عمودين */
}

الخطوة 3: إضافة العمليات الحسابية باستخدام JavaScript

قم بإنشاء ملف جديد باسم script.js بجانب الملفات الأخرى، وأضف الكود التالي:


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

// إضافة رقم إلى الشاشة
function appendNumber(number) {
    display.value += number;
}

// إضافة عملية حسابية إلى الشاشة
function appendOperator(operator) {
    display.value += ' ' + operator + ' ';
}

// تنفيذ العملية الحسابية
function calculate() {
    try {
        display.value = eval(display.value);
    } catch (error) {
        display.value = 'خطأ';
    }
}

// مسح الشاشة بالكامل
function clearDisplay() {
    display.value = '';
}

// حذف آخر رقم أو رمز
function deleteDigit() {
    display.value = display.value.slice(0, -1);
}

الخطوة 4: اختبار الآلة الحاسبة

افتح الملف index.html في متصفحك، وجرب الآلة الحاسبة. يمكنك إدخال الأرقام، إجراء العمليات الحسابية، ومسح المدخلات.

الخطوة 5: تحسين تجربة المستخدم وإضافة تأثيرات CSS

يمكنك تحسين تجربة المستخدم بإضافة تأثيرات حركية على الأزرار باستخدام transition:


.btn {
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn:active {
    transform: scale(0.95);
}

خاتمة

تهانينا! لقد قمت بإنشاء آلة حاسبة بسيطة باستخدام HTML، CSS، وJavaScript. يمكنك الآن استخدامها لإجراء عمليات حسابية أساسية. جرب تعديل التصميم أو إضافة ميزات إضافية مثل القدرة على إجراء عمليات حسابية أكثر تعقيدًا، أو تغيير مظهر الأزرار لجعل الآلة الحاسبة أكثر احترافية.

إذا كان لديك أي سؤال أو اقتراح، فلا تتردد في ترك تعليق في الأسفل، وشارك هذا المقال إذا وجدته مفيدًا!

القائمة

التصنيفات

إنشاء آلة حاسبة باستخدام HTML، CSS، و JavaScript: دليل خطوة بخطوة