آلة حاسبة

1. الوصف العام:

تطبيق آلة حاسبة تفاعلي يدعم العمليات الحسابية الأساسية، تم تطويره باستخدام HTML, CSS, و JavaScript. يتميز التطبيق بتصميم بسيط وسهل الاستخدام، مع استجابة فورية للأوامر عبر واجهة نظيفة ومنظمة.

2. تفاصيل تنفيذ كل جزء:

1. الهيكل الأساسي (HTML - index.html)

الوصف:

يحتوي على هيكل الآلة الحاسبة، بما في ذلك الشاشة الرقمية، الأزرار، وأقسام التخطيط الأساسية.

يتم استخدام <input> لعرض الأرقام المدخلة والنتائج.

يتم وضع الأزرار داخل <div> منسقة بتخطيط شبكي (Grid Layout).

التنفيذ:

إنشاء عنصر <input> لعرض الإدخالات والنتائج.

إضافة أزرار الأرقام (0-9)، العمليات (+, -, *, /)، زر المسح (C)، وزر الحساب (=).

تنظيم الأزرار داخل <div class="buttons"> لتسهيل التعامل مع الأحداث.

2. تنسيق التصميم (CSS - style.css)

الوصف:

تحديد شكل وأبعاد الأزرار، الشاشة، والخلفية.

تحسين تجربة المستخدم من خلال ألوان متناسقة، تأثيرات عند الضغط، وتنسيق مرن لجميع الأجهزة.

التنفيذ:

استخدام grid-template-columns لتنسيق الأزرار في شبكة منظمة.

تنسيق حجم الأزرار بحيث تكون متناسقة وسهلة النقر.

إضافة تأثيرات عند تمرير الفأرة (hover) والضغط (active).

جعل التصميم متجاوبًا مع الأجهزة المختلفة باستخدام @media queries.

3. التفاعل ووظائف الحساب (JavaScript - script.js)

الوصف:

يتحكم في جميع العمليات الحسابية داخل التطبيق.

يتعامل مع إدخال المستخدم، تنفيذ العمليات الحسابية، وعرض النتائج في الشاشة.

يدير الأخطاء مثل القسمة على الصفر أو الإدخالات غير الصالحة.

التنفيذ:

ربط الأزرار بعناصر التحكم عبر document.querySelector().

استخدام addEventListener لتشغيل العمليات عند النقر على الأزرار.

تحديث الشاشة عند إدخال الأرقام أو الضغط على العمليات الحسابية.

عند النقر على =, يتم استخدام eval() أو Function() لحساب النتيجة وعرضها على الشاشة.

إضافة try-catch لمعالجة الأخطاء المحتملة أثناء الحساب.

3. المميزات:

تصميم بسيط وأنيق مع ألوان متناسقة.

دعم العمليات الحسابية الأساسية (+, -, *, /).

تفاعل فوري عند الضغط على الأزرار.

تصميم متجاوب مع مختلف الشاشات (كمبيوتر - موبايل - تابلت).

إمكانية مسح الإدخال (C) وإعادة الحساب بسهولة.