كيفية صنع آلة حاسبة باستخدام HTML و CSS و JavaScript

بواسطةبيشوي فهيم •
0

 

كيفية صنع آلة حاسبة باستخدام HTML و CSS و JavaScript
كيفية صنع آلة حاسبة باستخدام HTML و CSS و JavaScript

السلام عليكم متابعي وزوار موقع كل شئ. اليوم نقدم لكم كيف تصنع آلة حاسبة باستخدام HTML و CSS و JavaScript .

المقدمة

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

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

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

قبل أن تغوص في الخطوات الصحيحة ، ليس هذا ؛

  1. هذه مجرد آلة حاسبة أساسية مع عمليات أساسية مثل الجمع والطرح والقسمة والضرب.
  2. سوف تحتوي الحاسبة أيضًا على زر حذف أو مسح

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

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

كتابة كود HTML لصناعة الآلة الحاسبة

تمت كتابة كود HTML أدناه بطريقة تجعل الآلة الحاسبة لها عنوان أو لنفترض أنها طراز أو علامة تجارية ، والقسم الذي سيتم فيه عرض جميع عمليات الإدخال ، ومنطقة عرض الإجابة ، وأزرار الوظائف المختلفة ، بالإضافة إلى كل ما هو مختلف زر رقمي. يوجد أدناه نموذج كود HTML الذي يمكنك استخدامه وتخصيصه على النحو الذي تراه مناسبًا.

<div class="calc">
  <div class="calc-title">
    <span class="calc-title-span">
      HTMLCalc
    </span>
    <div class="calc-title-hr"></div>
  </div>
  <div class="calc-display">
    <div class="calc-display-span secondary-display" id="secondary-display">
    </div>
    <div class="calc-display-span primary-display" id="display">
    </div>
  </div>
  <div class="calc-display-hr"></div>
  <div class="calc-btn" id="btn">
    <button class="calc-btn-primary" id="seven">7</button>
    <button class="calc-btn-primary" id="eight">8</button>
    <button class="calc-btn-primary" id="nine">9</button>
    <button class="calc-btn-primary btn-bg" id="divide">/</button>
    <button class="calc-btn-primary" id="four">4</button>
    <button class="calc-btn-primary" id="five">5</button>
    <button class="calc-btn-primary" id="six">6</button>
    <button class="calc-btn-primary btn-bg" id="multiply">*</button>
    <button class="calc-btn-primary" id="one">1</button>
    <button class="calc-btn-primary" id="two">2</button>
    <button class="calc-btn-primary" id="three">3</button>
    <button class="calc-btn-primary btn-bg" id="add">+</button>
    <button class="calc-btn-primary btn-bg" id="decimal">.</button>
    <button class="calc-btn-primary" id="zero">0</button>
    <button class="calc-btn-primary btn-bg-equal" id="equals">=</button>
    <button class="calc-btn-primary btn-bg" id="subtract">-</button>
    <button class="calc-btn-clear" id="clear">clear</button>
  </div>
</div>

للآلة الحاسبة CSS كود  

لنلقِ نظرة الآن على الآلة الحاسبة بشكل يشبه الآلة الحاسبة الحقيقية. انسخ كود CSS أدناه. يمكنك تغيير اللون أو حتى فئات CSS المختلفة لتناسب ذوقك.
 @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700,900');
body {
  width : 100%;
  height : 750px;
  display: flex;
  flex-direction : column;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  background-color: #ebedef;
  padding: 0;
  margin: 0;
}

.calc {
  display: flex;
  flex-direction : column;
  width: 330px;
  height: 600px;
  margin : 10px;
  background-color: #080636;
  background-image: linear-gradient(315deg, #080636 0%, #414141 104%);
  border-radius: 20px;
  box-shadow : 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.calc-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 40px;
  align-items: center;
}

.calc-title-span {
  color: #fb7454;
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: 700;
  line-height: 20px;
}

.calc-title-hr {
  width: 200px;
  height: 10px;
  background-color: #fb7454;
  opacity: 0.8;
}

.calc-display {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100px;
  color: #fff; 
}


.secondary-display{
  font-size:20px;
  opacity : 0.8;
  overflow-x : hidden;
}
/* ScrollBar Style*/
.secondary-display::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}
.secondary-display::-webkit-scrollbar {
  height : 4px;
	background-color: #bdbdbd;
  opacity: 0.7;
}
.secondary-display::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #000000;
	  border: 3px solid #555555;
}

.primary-display::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}
.primary-display::-webkit-scrollbar {
  height : 4px;
	background-color: #bdbdbd;
  opacity: 0.7;
}
.primary-display::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #000000;
	  border: 3px solid #555555;
}

.calc-display-hr {
  width: 250px;
  height: 2px;
  margin-top: 10px;
  align-self: center;
  background-color: #bdbdbd;
  opacity: 0.4;
}

.calc-btn {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 20px;
}

.calc-btn-primary {
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  margin: 10px 5px;
  outline: none;
  border: none;
  background-color: transparent;
  color: #fff;
  font-size: 30px;
  width: 60px;
  height: 60px;
  border: 2px solid #616161;
  border-radius: 100%;
}

.btn-bg{
  background-color:#424242 !important;
  opacity : 0.9;
  border : none !important;
}
.btn-bg-equal{
  background-color:#ff7555 !important;
  border : none !important;
}
.calc-btn-primary:focus {
  outline:none
}
.calc-btn-primary:active {
  transform: scale(0.9);
}

.calc-btn-clear {
  margin: 20px 5px;
  outline: none;
  border: none;
  background-color: transparent;
  color: #fff;
  font-size: 30px;
  padding: 10px 90px;
  border: 3px solid #ff7555;
  border-radius: 10px;
}
.calc-btn-clear:active {
  transform: scale(0.9);
}

كود JavaScript لصناعة الآلة الحاسبة

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

 console.clear();
const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display");
let currentString = '';
let resultString = '';
let evalResult;
let lastOperator = false;
const primaryRender = (value) => {
  primaryDisplay.innerText = value;
}

const secondaryRender = (value) => {
  secondaryDisplay.innerText = value;
}
secondaryRender('0');
primaryRender('0');

const evaluate = (e) => {
  let width = secondaryDisplay.scrollWidth;
  if(width > 310){
    secondaryDisplay.style.overflowX = 'scroll';
    secondaryDisplay.scrollLeft = width;
  }
  else{
    secondaryDisplay.style.overflowX = 'hidden';
  }
  
  let value = e.target.innerText;
  if (value >= '0' && value <= '9') {
    let len = currentString.length;
    let lastOp = isOp(currentString[len - 1]);
    if (lastOperator) {
      currentString = currentString.concat(value);
      resultString = "".concat(value);
      secondaryRender(currentString);
      primaryRender(resultString);
      lastOperator = false;
    } else {
      currentString = currentString.concat(value);
      resultString = resultString.concat(value);
      secondaryRender(currentString);
      primaryRender(resultString);
    }

  } else if (isOp(value)) {
    if (currentString.length == 0 && (value == '/' || value == '*'));
    else {
      resultString = "";
      primaryRender(value);
      lastOperator = true;
      let len = currentString.length;
      let lastOp = isOp(currentString[len - 1]);
      if (lastOp) {
        currentString = currentString.substr(0, len - 1) + value;
        console.log(currentString);
        secondaryRender(currentString);
        decimal = false;
      } else {
        currentString = currentString.concat(value);
        secondaryRender(currentString);
      }
    }

  } else if (value == '.') {
    if (resultString.indexOf('.') < 0) {
      if (resultString.length == 0) {
        currentString = currentString.concat('0.');
        resultString = resultString.concat('0.');
        secondaryRender(currentString);
        primaryRender(resultString);
      } else {
        currentString = currentString.concat(value);
        resultString = resultString.concat(value);
        secondaryRender(currentString);
        primaryRender(resultString);
      }
    }
  } else if (value == '=') {
    secondaryDisplay.style.overflowX = 'hidden';
    
    if (currentString.length == 0);
    else {
      let result = eval(currentString);
      resultString = '';
      currentString = '';
      secondaryRender('0');
      primaryRender(result);
    }
  } else if (value == 'clear') {
    currentString = '';
    resultString = '';
    secondaryRender('0');
    primaryRender('0');
  }
    let width1 = primaryDisplay.scrollWidth;
    if(width1 > 310){
      primaryDisplay.style.overflowX = 'scroll';
    }
    else{
      primaryDisplay.style.overflowX = 'hidden';
    }
}


//Adding Event Listener to all buttons
for (let elem of btns.children) {
  elem.addEventListener('click', evaluate);
}

function isOp(value) {
  return (/\+|\-|\*|\//).test(value);
}

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

معاينة الآلة الحاسبة هذه 

يمكنك العثور على العرض التوضيحي المباشر لعنصر واجهة استخدام الآلة الحاسبة
 شكرا لكم هذا كان كل شئ بخصوص كيف تصنع آلة حاسبة باستخدام HTML و CSS و JavaScript.
 --------------------------------------------------------------------------------------------------------
 كلمات البحث: صنع الة حاسبة, صنع الة حاسبة بالفيجوال بيسك 2010, صنع الة حاسبة بالفيجوال بيسك, عمل آلة حاسبة بالجافا سكربت, عمل آلة حاسبة html, صنع الة الحاسبة, كيفية صنع الة حاسبة, كيفية صنع الة حاسبة على الكمبيوتر, طريقة عمل آلة حاسبة على الفيجوال بيسك 2015, طريقة عمل آلة حاسبة, كيفية برمجة آلة حاسبة, طريقة عمل آلة حاسبة بسيطة, تعلم عمل آلة حاسبة في الفيجوال بيسك, طريقة برمجة آلة حاسبة>
التسميات

إرسال تعليق

أحدث أقدم
close
Paste your AD Code here