كيفية عمل هذا البرنامج فى الجافا سكريبت؟

الفكره هيه ان اتسوي وفيها onclick للfunction معينه بحيث كل ما يضغط علىيها يشغل الفنكشين كتالي :

<button onclick="work()" id="click">Click here</button>
  <script>
   function work() {
   }
 </script>

بعدها تقوم بأنشاء اماكن للوضع المخرجات من الفنكشن عن طريق P و SPAN بHTML كتالي

<p>الرقم الحالي : <span id="countnumber"></span></p>
<p>وصلت الى عدد سبعه <span id="timesyoureached7">0</span> مرات</p>
<p>تحتاج الى <span id="five_seven">0</span> مرات لكي تصلت الى 5 سبعات </p>
<p><span id="goal"> 0 </span>اعلى نقطه لليوم هيه </p>

الان نتقل الى جافا سكريبت ببدايه نعرف المتغيرات الي عدنا

var goal = 0; //يقوم بحساب اعلى درجه
var count =0; //يقوم بحساب كم مره ضغطت على زر
var reached_seven = 0; //يقوم بحساب كم مره وصلت الى 7
var five_seven = 0; // يقوم بحساب كم مره تحتاج لكي تصل الى 7

بعدها نعرف كل ال HTML tagsالى عدنا كتالي

var countnumber = document.getElementById("countnumber");
var reached_seven_node = document.getElementById("timesyoureached7");
var goal_node = document.getElementById("goal");
var five_seven_node = document.getElementById("five_seven");

الان نقوم بعمل داخل function work() هنا كل ما يضغط على زر يقوم الكود بزايدت المتغير count ب1 كتالي

function work() {
  count++
  countnumber.innerHTML = count;

الان نقوم بنضر اذا كان رقم وصل 7 واعطائه رقم عشوائي الى وصل 7 كتالي

    if(count===7) {
    count = Math.floor(Math.random() * 6) + 1;
    reached_seven++;
    reached_seven_node.innerHTML = reached_seven;
  }

هنا نقوم بحساب كم نحتاج لكي نصل الى 5 سبعات

 five_seven = 5-reached_seven;
 five_seven_node.innerHTML = five_seven;

وهنا نسجل اعلى نقطه

  if(five_seven === 0){
    goal++;
    goal_node.innerHTML = goal;
    count = reached_seven = 0;
  }

الكود الكامل تجه بهذا الرابط ويمكنك تجربته اتمنى لك بتوفيق