انشاء آلة حاسبة بسيطة بإستخدام html , css و javascript

HTML | آلة حاسبة

- هنا سيتم تشكيل الحاسبة باستخدام كود HTML. عنوان الحاسبة: هذا هو العنوان في الجزء العلوي من تطبيقنا ، "calc".

- شاشة الإخراج: ستكون هذه شاشة الإخراج الخاصة بنا ، حيث سيتم عرض جميع النصوص. مثل المدخلات التي سيكتبها المستخدم والإجابة المحسوبة من إدخال المستخدم. لذلك ، سنقوم بتقسيم الشاشة الى جزئين الجزء العلوي للمدخلات و السفلي للنتيجة النهائية كما هو موضح أدناه:

- لتصميم هذه الحاسبة سوف نستعمل هيكل الجداول في لغة اتش تي ام ال او ما يسمى ب."Table Structure".

يتم تعريف جدول HTML بالعلامة <table>, كل صف جدول بالعلامة <tr> و يتم تعريف رأس الجدول بالعلامة <th>. تبعًا للإعدادات الافتراضية ، تكون عناوين الجدول غامقة ومركزة , يتم تعريف جدول / خلية الجدول بالعلامة <td>.

كود HTML

<html>
    <head>
        <title>Calc</title>
    </head>
    <body><center>
             
        <table class="calc">
<tr>
                <td id="actions" colspan="4"></td>
            </tr>
<tr>
                <td id="screen" colspan="4">0</td>
            </tr>
<tr>
                <td><button id="10" onclick="display(10)">(</button></td>
                <td><button id="11" onclick="display(11)">)</button></td>
                <td><button id="12" onclick="clean()">C</button></td>
                <td><button id="13" onclick="display(13)">/</button></td>
            </tr>
<tr>
                <td><button id="9" onclick="display(9)">7</button></td>
                <td><button id="8" onclick="display(8)">8</button></td>
                <td><button id="7" onclick="display(7)">9</button></td>
                <td><button id="14" onclick="display(14)">*</button></td>
            </tr>
<tr>
                <td><button id="6" onclick="display(6)">4</button></td>
                <td><button id="5" onclick="display(5)">5</button></td>
                <td><button id="4" onclick="display(4)">6</button></td>
                <td><button id="15" onclick="display(15)">-</button></td>
            </tr>
<tr>
                <td><button id="3" onclick="display(3)">1</button></td>
                <td><button id="2" onclick="display(2)">2</button></td>
                <td><button id="1" onclick="display(1)">3</button></td>
                <td><button id="16" onclick="display(16)">+</button></td>
            </tr>
<tr>
                <td><button id="0" onclick="display(0)">0</button></td>
                <td><button id="18" onclick="display(18)">.</button></td>
                <td class="eq" colspan="2"><button id="19" class="eqq" onclick="calc()">=</button></td>
            </tr>
</table>
</center>
</body>
</html>

ِCSS | آلة حاسبة

يقوم كود ال CSS التالي بتعيين لون خلفية الجسم وتعيين الطول والعرض ونصف قطر الحدود عرض لون الخلفية والعرض والارتفاع والموقف للفئات .

CSS كود

table {
                border: 10px solid gray ;
                background: lightyellow ;
                border-radius: 10px ;
            }
            table td{
                height: 100px ;
                width: 100px ;
            }
            .eqq {
                width: 200px ;
            }
            button {
               height: 100px ;
               width: 100px ;
                font-size: 70px ;
                grid-row-gap :200px;
                background: rgba(59,173,227,1);
                background: linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
                color: black;
            }
            #screen {
                border: 2px solid gray ;
                width:  400px;
                height: 50px ;
                border-top: none    ;
                text-align: right;
                font-size: 40px ;
                font-weight: bold ;
            }
            #actions {
                border: 2px solid gray ;
                width: 400px ;
                height: 30px;
                border-bottom: none ;
                font-size: 20px ;
                font-weight: bold ;
            }

JavaScript | آلة حاسبة

بالنسية ل جافاسكربت سوف نحتاج الى 3 دوال او "functions" :

1- Display Function تقوم هذه الدالة بعرض محتى اي زر يتم النقر عليه في الجزء العلوي لشاشة العرض.

2- Clean Function (تشغيل الشاشة النظيفة و العودة الى الوضع الافتراضي) وذالك بتنظيف الشاشة و حذف حميع المتغيرات.

3- Calc Function تقوم هذه الدالة اتسخراج المحتوى الموجود في الفئة .actions و اجراء العملية الحسابية بإستخدام الدالة eval.

JavaScript كود

بقلم وديع منجاالوفي للمعلوميات

الوفي للمعلوميات: مدونة تضم عدد كبير من الدروس المكتوبة و الفيديوهات المصورة عن طريق حلقات متسلسلة نتطرق فيها إلى مختلف المواضيع التقنية و التعليمية بشكل عام القريبة من الشباب العربي ، .،