---
id: bd7158d8c442eddfaeb5bd17
title: بناء آلة حاسبة باستخدام JavaScript
challengeType: 3
forumTopicId: 301371
dashedName: build-a-javascript-calculator
---

# --description--

**متطلبات:** أنشئ تطبيق يشبه وظيفيا إلي <a href="https://javascript-calculator.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://javascript-calculator.freecodecamp.rocks/</a>.

أكمل قصص المستخدم بالأسفل وأجتاز جميع الاختبارات للنجاح. استخدم أي libraries أو APIs تحتاج إليها. أعطيها أسلوبك الشخصي الخاص.

يمكنك استخدام أي مزيج من HTML و JavaScript و CSS و Bootstrap و SASS و React و Redux و jQuery لإكمال هذا المشروع. يجب عليك استخدام frontend framework (مثل React على سبيل المثال) لأن هذا القسم يدور حول تعلم frontend framework. لا ينصح باستخدام التكنولوجيات الإضافية غير المدرجة أعلاه و استخدامها على مسؤوليتك الخاصة. ونحن ننظر في دعم frontend frameworks أخرى، مثل Angular و Vue، ولكنها غير مدعومة حاليا. سنقبل ونحاول إصلاح جميع تقارير المشكلات التي تستخدم حُزْمَة التكنولوجيات المقترحة لهذا المشروع. برمجة سعيدة!

**قصة المستخدم #1:** آلة حاسبة يجب أن تحتوي على عنصر قابل للنقر يحتوي على `=` (علامة متساوية) مع ما يقابلها `id="equals"`.

**قصة المستخدم #2:** آلة حاسبة الخاصة بي يجب أن تحتوي على 10 عناصر قابلة للنقر تحتوي على أرقام تبدأ من 0 ألى 9 مع المعرف المقابل التالي: `id="zero"`، و`id="one"`, و`id="two"`, و`id="three"`, و`id="four"`, و`id="five"`, و`id="six"`، و`id="seven"`, و`id="eight"`، و`id="nine"`.

**قصة المستخدم #3:** آلة حاسبة الخاصة بي يجب أن تحتوي على 4 عناصر قابلة للنقر يحتوي كل منها على واحد من أربع عمليات رياضية أساسية لهم المعرفات المطابقة التالية: `id="add"`، و`id="subtract"`، و`id="multiply"`، و`id="divide"`.

**قصة المستخدم #4:** آلة حاسبة يجب أن تحتوي على عنصر قابل للنقر يحتوي على `.` رمز (النقطة العشرية) مع ما مطابقه `id="decimal"`.

**قصة المستخدم #5:** آلة حاسبة الخاصة بي يجب أن تحتوي على عنصر قابل للنقر مع `id="clear"`.

**قصة المستخدم #6:** آلة حاسبة الخاصة بي يجب أن تحتوي على عنصر لعرض القيم مع مطابقه `id="display"`.

**قصة المستخدم #7:** في أي وقت، الضغط على زر `clear` يؤدي إلى مسح قيم الإدخال (input) والإخراج (output)، ويعيد الآلة الحاسبة إلى state المبدئية الخاصة بها؛ 0 يجب أن يظهر في العنصر بمعرف `display`.

**قصة المستخدم #8:** مع إدخال الأرقام، يجب أن أكون قادراً على رؤية مدخلاتي في العنصر مع معرف `display`.

**قصة المستخدم #9:** في أي ترتيب، يجب أن أكون قادرا على الإضافة، طرح ضرب وقسم سلسلة من الأعداد من أي كَمَيَّة، وعندما ضغط على `=`، النتيجة الصحيحة يجب أن تظهر في العنصر مع معرف `display`.

**قصة المستخدم #10:** عند إدخال الأرقام، يجب ألا تسمح آلة الحاسبة الخاصة بي لعدد أن يبدأ بعدة أصفار.

**قصة المستخدم #11:** عند النقر على العنصر العشري، `.` يجب إلحاق القيمة المعروضة حالياً؛ اثنان `.` في رَقْم واحد يجب عدم قبوله.

**قصة المستخدم #12:** يجب أن أكون قادرا على تنفيذ أي عملية (`+`، و`-`, و`*`, و`/`) على الأرقام التي تحتوي على النُّقَط العشرية.

**قصة المستخدم #13:** إذا تم إدخال عملتين اثنين أو أكثر على التوالي، يجب أن تكون العملية المنفذة هي آخر عملية أُدخلت (باستثناء علامة السالب (`-`). على سبيل المثال، إذا تم إدخال `5 + * 7 =`، يجب أن تكون النتيجة `35` (بمعنى `5 * 7`)؛ إذا تم إدخال `5 * - 5 =`، ينبغي أن تكون النتيجة `-25` (مثل `5 * (-5)`).

**قصة المستخدم #14:** الضغط على المشغل مباشرة بعد `=` يجب أن يبدأ حساب جديد يعمل بناء على نتيجة التقييم السابق.

**قصة المستخدم #15:** آلة حاسبة الخاصة بي يجب أن تكون دقيقة بالنسبة لعدد أرقام عشرية عندما يتعلق الأمر بالتقريب (لاحظ أنه لا يوجد معيار دقيق، ولكن يجب أن تكون قادراً على التعامل مع حسابات مثل `2 / 7` بدقة معقولة إلى 4 أرقام عشرية في الأقل).

**ملاحظة على منطق الحاسبة:** لاحظ إلى أن هناك مدرستين فكريتين رئيستين على منطق إدخال الحاسبة: <dfn>منطق التنفيذ الفوري (immediate execution logic)</dfn> و <dfn>منطق الصيغة (formula logic)</dfn>. ويستخدم مثالنا منطق الصيغة ويراعي ترتيب الأسبقية في العمليات، ولا يطبق التنفيذ الفوري. أحدهما مقبول، ولكن يرجى ملاحظة ذلك اعتمادا على أختيارك، الحاسبة الخاصة بك قد تنتج نتائج مختلفة عن النتائج الخاصة بنا في معادلات معينة (انظر أدناه على سبيل المثال). مادام أنه يمكن التحقق من حساباتك بواسطة آلة حاسبة إنتاج أخرى، يرجى عدم اعتبار هذا خطأ.

**مثال:** `3 + 5 x 6 - 2 / 4 =`

-   **منطق التنفيذ الفوري:** `11.5`
-   **الصيغة/منطق التعبير:** `32.5`

يمكنك بناء مشروعك عن طريق <a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">استخدام هذا نموذج CodePen</a> والنقر على `Save` لإنشاء طبقيك الخاص بك. أو يمكنك استخدام رابط الـ CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`

بمجرد أن تنتهي، ارسل عنوان URL لمشروع العمل الخاص بك مع اجتياز جميع الاختبارات.

# --solutions--

```js
// solution required
```
