ساخت ماشین حساب ساده با استفاده از HTML ، CSS و JavaScript
کد ساده و محاسبه شده راهی است که هنگام برنامه نویسی باید استفاده کنید. نحوه ساخت ماشین حساب خود را در HTML ، CSS و JS بررسی کنید.
بهترین راه برای یادگیری JavaScript ساخت پروژه است. اگر می خواهید به یک توسعه دهنده وب خوب تبدیل شوید ، باید در اسرع وقت شروع به تمرین و طراحی کنید. می توانید با ساخت پروژه هایی در سطح مبتدی مانند یک ماشین حساب ساده ، ساعت دیجیتال ، کرونومتر و غیره شروع کنید.
در این مقاله ، نحوه ساخت یک ماشین حساب ساده با استفاده از HTML ، CSS و JavaScript را فرا خواهید گرفت. این ماشین حساب می تواند عملیات پایه ای ریاضی مانند جمع ، تفریق ، ضرب و تقسیم را انجام دهد.
بیایید شروع کنیم.
اجزای ماشین حساب
ماشین حساب از اجزای زیر تشکیل شده است:
اپراتورهای ریاضی : جمع (+) ، تفریق (-) ، ضرب (*) و تقسیم (/).
رقم و دکمه اعشار : 0 ، ۱ ، ۲ ، ۳ ، ۴ ، ۵ ، ۶ ، ۷ ، ۸ ، ۹ ،. .
صفحه نمایش : عبارت ریاضی و نتیجه را نمایش می دهد.
دکمه Clear Screen : تمام مقادیر ریاضی را پاک می کند.
دکمه محاسبه (=) : عبارت ریاضی را ارزیابی می کند و نتیجه را برمی گرداند.
ساختار پوشه پروژه ماشین حساب
یک پوشه ریشه ایجاد کنید که حاوی فایل های HTML ، CSS و JavaScript باشد. می توانید فایلها را هر چیزی که می خواهید نامگذاری کنید. در اینجا پوشه ریشه Calculator نامگذاری شده است . مطابق قرارداد نامگذاری استاندارد ، فایلهای HTML ، CSS و JavaScript به ترتیب index.html ، styles.css و script.js نامگذاری می شوند.
کد HTML
فایل index.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 clear all the values -->
<td> <input class = "button" type = "button" value = "C" onclick = "clearScreen()" style = "background-color: #fb0066;" /> </td>
</tr>
<tr>
<!-- display() function display the value of clicked button -->
<td> <input class = "button" type = "button" value = "1" onclick = "display('1')" /> </td>
<td> <input class = "button" type = "button" value = "2" onclick = "display('2')" /> </td>
<td> <input class = "button" type = "button" value = "3" onclick = "display('3')" /> </td>
<td> <input class = "button" type = "button" value = "/" onclick = "display('/')" /> </td>
</tr>
<tr>
<td> <input class = "button" type = "button" value = "4" onclick = "display('4')" /> </td>
<td> <input class = "button" type = "button" value = "5" onclick = "display('5')" /> </td>
<td> <input class = "button" type = "button" value = "6" onclick = "display('6')" /> </td>
<td> <input class = "button" type = "button" value = "-" onclick = "display('-')" /> </td>
</tr>
<tr>
<td> <input class = "button" type = "button" value = "7" onclick = "display('7')" /> </td>
<td> <input class = "button" type = "button" value = "8" onclick = "display('8')" /> </td>
<td> <input class = "button" type = "button" value = "9" onclick = "display('9')" /> </td>
<td> <input class = "button" type = "button" value = "+" onclick = "display('+')" /> </td>
</tr>
<tr>
<td> <input class = "button" type = "button" value = "." onclick = "display('.')" /> </td>
<td> <input class = "button" type = "button" value = "0" onclick = "display('0')" /> </td>
<!-- calculate() function evaluate the mathematical expression -->
<td> <input class = "button" type = "button" value = "=" onclick = "calculate()" style = "background-color: #fb0066;" /> </td>
<td> <input class = "button" type = "button" value = "*" onclick = "display('*')" /> </td>
</tr>
</table>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
ساختار ماشین حساب با استفاده از برچسب <table> ایجاد می شود. برچسب <table> شامل پنج ردیف که نشان دهنده پنج بخش افقی از ماشین حساب می باشد. هر سطر با استفاده از برچسب <tr> ایجاد می شود. هر برچسب <tr> حاوی برچسب <td> (جدول داده) است که صفحه نمایش و دکمه های ماشین حساب را نگه می دارد.
کد CSS
فایل styles.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%;
}
.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;
}
.button:active {
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 فوق برای سبک سازی ماشین حساب استفاده می شود. پسوند class. برای انتخاب عناصر با ویژگی کلاس خاص استفاده می شود. calculator ، .display-box. ، و button. انتخابگرهای کلاس به ترتیب به ساختار جدول سبک، صفحه نمایش ، و دکمه های ماشین حساب استفاده می شود. import برای وارد کردن فونت خانواده Orbitron از قلم های Google استفاده می شود.
کد جاوا اسکریپت
فایل script.js را باز کرده و کد زیر را وارد کنید:
// This function clear all the values
function clearScreen() {
document.getElementById("result").value = "";
}
// This function display values
function display(value) {
document.getElementById("result").value += value;
}
// This function evaluates the expression and return result
function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}
از توابع ()clearScreen(), display, و ()calculate ، برای افزودن عملکرد به ماشین حساب استفاده می شود.
عملکرد ()display با استفاده از شناسه نتیجه به DOM دسترسی پیدا می کند و مقدار دکمه کلیک شده را به نتیجه اضافه می کند.
function display(value) {
document.getElementById("result").value += value;
}
توجه : از تابع eval () در جاوا اسکریپت برای ارزیابی عبارتی که به آن به عنوان یک پارامتر منتقل شده استفاده می شود. نتیجه ارزیابی شده عبارت ریاضی را برمی گرداند.
function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}
اگر می خواهید به منبع کامل کد مورد استفاده در ساخت ماشین حساب با HTML ، CSS و JavaScript نگاهی بیندازید ، در مخزن GitHub موجود است . همچنین ، اگر می خواهید نگاهی به نسخه زنده این پروژه بیندازید ، می توانید آن را از طریق GitHub نیز بررسی کنید .
- مربوط : کدهای جالب و باحال HTML
پروژه های جالب برنامه نویسی را توسعه دهید
با توسعه پروژه ها می توانید مهارت های مهندسی خود را به سطح بعدی برسانید. چه یک مبتدی باشید و چه بعد از مدتی وارد برنامه نویسی شوید ، توسعه پروژه ها می تواند کمک بزرگی در تقویت اعتماد به نفس شما باشد.
با سلام خیلی ممنون از شما
فقط اون دو تا کد های پایین کجا نوشته میشوند ؟
فایل Script.JS
اگه یک کلید میگذاشتی که فقط یک از عدد ها رو پاک کنه خیلی خوب میشد