چگونه با استفاده از HTML، CSS و جاوا اسکریپت یک ماشین حساب ساده بسازیم

کد ساده و موثر راهی است که هنگام برنامه نویسی باید طی شود. نحوه ساخت ماشین حساب خود را در HTML، CSS و JS بررسی کنید.

بهترین راه برای یادگیری جاوا اسکریپت ساختن پروژه است. اگر می خواهید به یک توسعه دهنده وب خوب تبدیل شوید، باید هر چه زودتر شروع به ایجاد پروژه کنید. می توانید با ساختن پروژه های سطح مبتدی مانند یک ماشین حساب ساده، ساعت دیجیتال یا کرونومتر شروع کنید.

شما می توانید یک ماشین حساب ساده فقط با استفاده از فناوری های اصلی وب بسازید: HTML، CSS، و جاوا اسکریپت. این ماشین حساب می تواند عملیات پایه ریاضی مانند جمع، تفریق، ضرب و تقسیم را انجام دهد.

ویژگی های ماشین حساب

در این پروژه شما قصد دارید ماشین حسابی را توسعه دهید که دارای ویژگی های زیر باشد:

عملیات حسابی اساسی مانند جمع، تفریق، تقسیم و ضرب را انجام خواهد داد.
عملیات اعشاری را انجام خواهد داد.
اگر بخواهید هر عددی را بر صفر تقسیم کنید، ماشین حساب Infinity را نمایش می دهد.
در صورت نامعتبر بودن عبارت، هیچ نتیجه ای را نمایش نمی دهد. برای مثال 5++9 چیزی را نمایش نمی دهد.
ویژگی پاک کردن صفحه نمایش برای پاک کردن صفحه نمایش در هر زمان که بخواهید.

کد مورد استفاده در این پروژه در a موجود است
مخزن GitHub
و استفاده از آن تحت مجوز MIT برای شما رایگان است. اگر می خواهید نگاهی به نسخه زنده این پروژه بیندازید، می توانید این را بررسی کنید
نسخه ی نمایشی
.

اجزای ماشین حساب

ماشین حساب از اجزای زیر تشکیل شده است:

عملگرهای ریاضی: جمع (+)، تفریق (-)، ضرب (*) و تقسیم (/).
اعداد و دکمه اعشاری: 0، 1، 2، 3، 4، 5، 6، 7، 8، 9، .
صفحه نمایش: عبارت ریاضی و نتیجه را نمایش می دهد.
دکمه پاک کردن صفحه: تمام مقادیر ریاضی را پاک می کند.
دکمه محاسبه (=): عبارت ریاضی را ارزیابی می کند و نتیجه را برمی گرداند.

ساختار پوشه پروژه ماشین حساب

یک پوشه ریشه ایجاد کنید که حاوی فایل های HTML، CSS و جاوا اسکریپت باشد. شما می توانید نام فایل ها را هر چیزی که می خواهید نام گذاری کنید. در اینجا نام پوشه ریشه Calculator است. طبق قرارداد استاندارد نام‌گذاری، فایل‌های HTML، CSS و JavaScript به ترتیب index.html، styles.css و script.js نام‌گذاری می‌شوند. به عنوان یک توسعه دهنده، پیروی از قراردادهای نامگذاری جاوا اسکریپت و قراردادهای نامگذاری HTML/CSS، تمرین خوبی است.

اضافه کردن ساختار به ماشین حساب با استفاده از HTML

فایل index.html را باز کنید و کد HTML زیر را برای ماشین حساب قرار دهید:

<!DOCTYPE html>
<html lang="en" dir="ltr">
 
<head>
  <meta charset="utf-8">
  <title>Simple Calculator using HTML, CSS and JavaScript</title>
  <link rel="stylesheet" href="styles.css">
</head>
 
<body>
 
<table class="calculator" >
  <tr>
    <td colspan="3"> <input class="display-box" type="text" id="result" disabled /> </td>
 
    <!-- clearScreen() function clears all the values -->
    <td> <input type="button" value="C" onclick="clearScreen()" id="btn" /> </td>
  </tr>
  <tr>
    <!-- display() function displays the value of clicked button -->
    <td> <input type="button" value="1" onclick="display('1')" /> </td>
    <td> <input type="button" value="2" onclick="display('2')" /> </td>
    <td> <input type="button" value="3" onclick="display('3')" /> </td>
    <td> <input type="button" value="/" onclick="display('/')" /> </td>
  </tr>
  <tr>
    <td> <input type="button" value="4" onclick="display('4')" /> </td>
    <td> <input type="button" value="5" onclick="display('5')" /> </td>
    <td> <input type="button" value="6" onclick="display('6')" /> </td>
    <td> <input type="button" value="-" onclick="display('-')" /> </td>
  </tr>
  <tr>
    <td> <input type="button" value="7" onclick="display('7')" /> </td>
    <td> <input type="button" value="8" onclick="display('8')" /> </td>
    <td> <input type="button" value="9" onclick="display('9')" /> </td>
    <td> <input type="button" value="+" onclick="display('+')" /> </td>
  </tr>
  <tr>
    <td> <input type="button" value="." onclick="display('.')" /> </td>
    <td> <input type="button" value="0" onclick="display('0')" /> </td>
 
    <!-- calculate() function evaluates the mathematical expression -->
    <td> <input type="button" value="=" onclick="calculate()" id="btn" /> </td>
    <td> <input type="button" value="*" onclick="display('*')" /> </td>
  </tr>
</table>
 
<script type="text/javascript" src="script.js"></script>
 
</body>
 
</html>

این پروژه از تگ

مطلب مرتبط: 5 نکته عملی عملکرد برای Express.js REST API

برای ایجاد ساختار کلی ماشین حساب استفاده می کند. تگ

شامل پنج ردیف است که نشان دهنده پنج بخش افقی ماشین حساب است. هر ردیف دارای یک تگ

مربوطه است. هر تگ

حاوی تگ های

است که صفحه نمایش و دکمه های ماشین حساب را نگه می دارد.

ردیف ماشین حساب

استایل دادن به ماشین حساب با استفاده از CSS

فایل styles.css را باز کنید و کد CSS زیر را برای ماشین حساب قرار دهید:

@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');

.calculator {
    padding: 10px;
    border-radius: 1em;
    height: 380px;
    width: 400px;
    margin: auto;
    background-color: #191b28;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.display-box {
    font-family: 'Orbitron', sans-serif;
    background-color: #dcdbe1;
    border: solid black 0.5px;
    color: black;
    border-radius: 5px;
    width: 100%;
    height: 65%;
}

#btn {
    background-color: #fb0066;
}

input[type=button] {
    font-family: 'Orbitron', sans-serif;
    background-color: #64278f;
    color: white;
    border: solid black 0.5px;
    width: 100%;
    border-radius: 5px;
    height: 70%;
    outline: none;
}

input:active[type=button] {
    background: #e5e5e5;
    -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
    -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
    box-shadow: inset 0px 0px 5px #c1c1c1;
}

CSS بالا به ماشین حساب استایل می دهد. .classelector در CSS عناصری را با ویژگی کلاس خاص هدف قرار می دهد. انتخابگرهای کلاس .calculator و .display-box به ترتیب ساختار جدول و صفحه نمایش ماشین حساب را سبک می کنند. @import خانواده فونت Orbitron را از فونت‌های Google وارد می‌کند.

افزودن قابلیت به ماشین حساب با استفاده از جاوا اسکریپت

فایل script.js را باز کنید و با استفاده از کد جاوا اسکریپت زیر قابلیت را به ماشین حساب ساده اضافه کنید:

// This function clears all the values
function clearScreen() {
    document.getElementById("result").value = "";
}
 
// This function displays the values
function display(value) {
    document.getElementById("result").value += value;
}
 
// This function evaluates the expression and returns the result
function calculate() {
    var p = document.getElementById("result").value;
    var q = eval(p);
    document.getElementById("result").value = q;
}

آشنایی با کد جاوا اسکریپت

توابع clearScreen()، display() وcal() قابلیت هایی را به ماشین حساب اضافه می کنند.

پاک کردن ارزش ها

تابع ()clearScreen با استفاده از شناسه نتیجه به DOM دسترسی پیدا می کند و مقدار آن را با اختصاص یک رشته خالی به آن پاک می کند. شما می توانید از انتخابگرهای DOM برای هدف قرار دادن اجزای مختلف یک صفحه استفاده کنید.

function clearScreen() {
    document.getElementById("result").value = "";
}

نمایش مقادیر

تابع display() با استفاده از شناسه نتیجه به DOM دسترسی پیدا می کند و مقدار دکمه کلیک شده را به نتیجه اضافه می کند.

function display(value) {
    document.getElementById("result").value += value;
}

ارزیابی بیان

تابع ()calculate با استفاده از شناسه نتیجه به DOM دسترسی پیدا می کند و با استفاده از تابع ()eval عبارت را ارزیابی می کند. مقدار ارزیابی شده عبارت دوباره به نتیجه اختصاص داده می شود.

جاوا اسکریپت
eval()
function عبارتی را که به آن ارسال می کنید ارزیابی می کند و نتیجه آن عبارت را برمی گرداند.

function calculate() {
    var p = document.getElementById("result").value;
    var q = eval(p);
    document.getElementById("result").value = q;
}

پروژه های برنامه نویسی جالب را توسعه دهید

شما می توانید مهارت های برنامه نویسی خود را با توسعه پروژه ها بهبود بخشید، چه مبتدی باشید و چه پس از مدتی استراحت دوباره به برنامه نویسی باز می گردید. ایجاد برنامه های کاملاً کارآمد، حتی برنامه های ساده، می تواند اعتماد به نفس شما را افزایش دهد.

می‌توانید بسیاری از پروژه‌های ساده از بازی‌ها (شطرنج، تیک تاک، قیچی کاغذ راک) گرفته تا ابزارهای ساده (لیست کارها، تبدیل وزن، ساعت شمارش معکوس) را امتحان کنید.

دست خود را با این پروژه ها کثیف کنید و توسعه دهنده بهتری شوید.

مطلب مرتبط: راهنمای مبتدیان برای Z-Index در CSS