انتشار: شهریور 31، 1402
بروزرسانی: 23 خرداد 1404

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

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

در پایان این آموزش، شما باید یک ماشین حساب کاملاً کارآمد داشته باشید که به شکل زیر است:

شروع به طراحی ماشین حساب با HTML و CSS کنید

ما با ساخت رابط ماشین حساب با HTML و CSS شروع می کنیم. در شما index.html فایل، ساختار را تعریف کنید. برای قرار دادن کل طرح، یک کانتینر شبکه بیرونی خواهیم داشت div عنصر ظرف از طرح بندی شبکه ای استفاده می کند که به ما امکان می دهد محتوای خود را در ردیف ها و ستون ها تراز کنیم و انعطاف پذیری را فراهم کنیم.

در داخل شبکه-کانتینر، دیگری ایجاد کنید div calculator-grid نامیده می شود که شامل صفحه نمایش ناحیه متنی و تمام عناصر دکمه است.

ممکن است ترجیح دهید از یک ورودی برای نمایشگر استفاده کنید، اما اگر یک رشته واقعا طولانی باشد، یک ناحیه متنی اجازه می دهد تا نتیجه بسته شود.

 class = "grid-container">
     class = "calculator-grid ">
         <span style="color: #6a9fb5">type=</span><span style="color: #90a959">"text"</span> <span style="color: #6a9fb5">id = </span><span style="color: #90a959">"inputtext"</span> <span style="color: #6a9fb5">placeholder=</span><span style="color: #90a959">"0"</span><span style="color: #f4bf75">></span>
        C
        DEL
        
        +
        7
        8
        9
        -
        4
        5
        6
        *
        1
        2
        3
        /
        00
        0
        .
        =
    
    

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

حالا بیایید ماشین حساب را با CSS استایل کنیم.

اعمال کنید display:grid ویژگی برای تبدیل شبکه-کانتینر به یک شبکه. با استفاده از align-items: center و justify-content: center اطمینان حاصل می کند که محتویات به صورت افقی و عمودی در عنصر ظرف در مرکز قرار دارند.

.grid-container {
    display: grid;
    align-items: center;
    justify-content: center; 
}

مرحله بعدی استایل دادن به آن است calculator-grid عنصر div که شامل دکمه ها و عنصر textarea است. CSS این ویژگی را فراهم می کند grid-template-columns، که ستون ها و اندازه های یک ظرف شبکه را مشخص می کند. در مورد ما، grid-template-columns: repeat(4, 1fr) یعنی چهار ستون با عرض و اندازه مساوی خواهیم داشت.

را grid-gap: 1px; قانون به همراه رنگ پس زمینه یک مرز فضایی برابر بین تمام سلول ها ایجاد می کند.

.calculator-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-gap: 1px;
    background-color: #999;
} 

حالت دادن به دکمه ها

بیایید استایل های زیر را روی دکمه ها اعمال کنیم تا جذاب تر شوند.

.calculator-grid button {
    font-family: \'DM Mono\', monospace;
    font-size: 25px;
    background-color: #fff;
    border: none;
    cursor: pointer;
} 

ما از فونت DM Mono از Google برای این رابط استفاده می کنیم تا حس واقعی ماشین حساب را به ما بدهد.

استایل دادن به نمایشگر

ما می خواهیم که نمایشگر تمام عرض 4 ستون را بپوشاند و متن در انتها تراز شود. بیایید یک رنگ پس زمینه نیز اعمال کنیم تا با دکمه ها جدایی قابل مشاهده داشته باشیم.

textarea {
    grid-column: span 4;
    font-family: \'DM Mono\', monospace;
    font-size: 25px;
    text-align: end;
    background-color: #fad3cb;
    padding: 15px;
    border: none;
}

حالا می خواهیم 4 دکمه پایین رنگ پس زمینه متفاوتی داشته باشند.

1	.calculator-grid button:nth-child(n+18) {
2	background-color: tomato;
3	}

در نهایت، اجازه دهید یک رنگ پس زمینه تیره زمانی که دکمه ها نگه داشته می شوند، اضافه کنیم.

button:hover,
.calculator-grid button:nth-child(n+18):hover {
    background-color: #440b15;
    color: white;
    transition: 0.2s;
}

عملکرد عملیات ریاضی با جاوا اسکریپت

اکنون کار ما با رابط تمام شده است، بنابراین بیایید کد جاوا اسکریپت ماشین حساب را اضافه کنیم تا آن را کاربردی کنیم. ما با انتخاب شروع می کنیم #inputtext عنصر و دکمه ها

1	const input = document.getElementById(\'inputtext\');
2	const buttons = document.querySelectorAll(\'button\');

بعد، اجازه دهید یک تابع به نام ایجاد کنیم operation که مقدار دکمه کلیک شده را به عنوان آرگومان می گیرد و به صورت زیر عمل می کند:

اگر مقدار باشد سی، محتویات عنصر ورودی را پاک می کنیم.
اگر مقدار باشد DEL، آخرین کاراکتر را از عنصر ورودی حذف می کنیم. به عنوان مثال، اگر مقدار فعلی در ورودی 123 باشد، با کلیک بر روی دکمه DEL، 3 حذف می شود. اگر دوباره روی دکمه DEL کلیک کنید، مقدار 2 حذف می شود و به همین ترتیب.
اگر مقدار باشد =، تابع دیگری را اعمال می کنیم که نتیجه عبارت را برمی گرداند.

تابع عملیات

بیایید ایجاد کنیم operation() عملکرد با استفاده از کد جاوا اسکریپت برای ماشین حساب.

function operation(buttonValue) {
    if (buttonValue === \'C\') {
        input.value = \'\';
    } else if (buttonValue === \'DEL\') {
        input.value = input.value.slice(0, -1);
    } else if (buttonValue === \'=\') {
        input.value = calculate(input.value);
    } else {
        input.value += buttonValue;
    }
}

تابع محاسبه

را calculate() تابع عبارت را به عنوان آرگومان می گیرد. داخل calculate() تابع، ما یک تابع جدید با Function() سازنده

تابع جدید نتیجه ارزیابی عبارت را برمی گرداند. سپس، تابع را برای اجرای عبارت فراخوانی می کنیم. اگر عبارت گفته شده قابل ارزیابی نباشد، "عملیات نادرست" را برمی گردانیم.

function calculate(expression) {
    console.log(expression);
    try {
        return new Function(\'return \' + expression)();
    } catch (error) {
        return \'Malformed Operation\';
    }
}

در نهایت، برای هر دکمه، مقدار آن را دریافت می کنیم، یک شنونده رویداد اضافه می کنیم که به کلیک ها گوش می دهد، و عملیات را اعمال می کنیم. function().

buttons.forEach(button=> { 
    let buttonValue = button.innerText;
    button.addEventListener(\'click\', function(){operation(buttonValue)})

});

کد کامل جاوا اسکریپت

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

const input = document.getElementById(\'inputtext\');
const buttons = document.querySelectorAll(\'button\');

function calculate(expression) {
    console.log(expression);

    try {
        return new Function(\'return \' + expression)();
    } catch (error) {
        return \'Malformed Operation\';
    }
}


function operation(buttonValue) {
    if (buttonValue === \'C\') {
        input.value = \'\';
    } else if (buttonValue === \'DEL\') {
        input.value = input.value.slice(0, -1);
    } else if (buttonValue === \'=\') {
        input.value = calculate(input.value);
    } else {
        input.value += buttonValue;
    }
}

buttons.forEach(button => {
    let buttonValue = button.innerText;
    button.addEventListener(\'click\', function () {
        operation(buttonValue);
    });
});

به عنوان یادآوری، ماشین حساب جاوا اسکریپت + HTML + CSS ما را در زیر مشاهده کنید:

نتیجه گیری

این آموزش نحوه ساخت یک ماشین حساب پایه جاوا اسکریپت + CSS + HTML را پوشش می دهد. اگر به دنبال الهام بیشتر یا الگوهای ماشین حساب از پیش ساخته شده هستید، Envato Elements را بررسی کنید!

حالا نوبت شماست که آن را امتحان کنید و خودتان بسازید. از ساخت و ساز لذت ببرید!

منبع: https://webdesign.tutsplus.com/build-a-simple-calculator-with-html-css-and-javascript--cms-107917t

1	class = "grid-container">
2	class = "calculator-grid ">
3	<span style="color: #6a9fb5">type=</span><span style="color: #90a959">"text"</span> <span style="color: #6a9fb5">id = </span><span style="color: #90a959">"inputtext"</span> <span style="color: #6a9fb5">placeholder=</span><span style="color: #90a959">"0"</span><span style="color: #f4bf75">></span>
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

1	.grid-container {
2	display: grid;
3	align-items: center;
4	justify-content: center;
5	}

1	.calculator-grid {
2	display: grid;
3	grid-template-columns: repeat(4, 1fr);
4	grid-template-rows: repeat(6, 1fr);
5	grid-gap: 1px;
6	background-color: #999;
7	}

1	.calculator-grid button {
2	font-family: \'DM Mono\', monospace;
3	font-size: 25px;
4	background-color: #fff;
5	border: none;
6	cursor: pointer;
7	}

1	textarea {
2	grid-column: span 4;
3	font-family: \'DM Mono\', monospace;
4	font-size: 25px;
5	text-align: end;
6	background-color: #fad3cb;
7	padding: 15px;
8	border: none;
9	}

1	button:hover,
2	.calculator-grid button:nth-child(n+18):hover {
3	background-color: #440b15;
4	color: white;
5	transition: 0.2s;
6	}

1	function operation(buttonValue) {
2	if (buttonValue === \'C\') {
3	input.value = \'\';
4	} else if (buttonValue === \'DEL\') {
5	input.value = input.value.slice(0, -1);
6	} else if (buttonValue === \'=\') {
7	input.value = calculate(input.value);
8	} else {
9	input.value += buttonValue;
10	}
11	}

1	function calculate(expression) {
2	console.log(expression);
3	try {
4	return new Function(\'return \' + expression)();
5	} catch (error) {
6	return \'Malformed Operation\';
7	}
8	}

1	buttons.forEach(button=> {
2	let buttonValue = button.innerText;
3	button.addEventListener(\'click\', function(){operation(buttonValue)})
4
5	});