ماشین حساب

در این جلسه می خواهیم ظاهر ماشین حساب خود را مانند ماشین حساب های سیستم عامل مک کنیم. نتیجه صد در صد مشابه نخواهد بود ولی تا جایی که بتوانیم این کار را انجام میدهیم. برای این کار ابتدا به تمام دکمه ها را با span عوض می کنیم تا بتوانیم راحت تر به آن استایل دهیم. سپس دکمه ها را به کلاس های مختلفی تقسیم می کنیم. یک سری اعداد هستند که کلاس number به آن می دهیم. یک سری عملگر ها هستند مثل به علاوه و ... که به آن ها کلاس operand می دهیم. و دکمه های بالایی که کار ریست کردن و تغییر علامت را دارن کلاس action را تخصیص می دهیم. این کار صرفا برای این است که بتوانیم به این کلاس ها یک استایل خاص بدهیم و شکل هم باشند. ``` html ماشین حساب

0
AC	+/-	%	/
7	8	9	*
4	5	6	-
1	2	3	+
0		.	=

``` خروجی به صورت زیر خواهد بود. :::.output ماشین حساب

0
AC	+/-	%	/
7	8	9	*
4	5	6	-
1	2	3	+
0		.	=

::: در ادامه موارد توضیحی ذکر خواهد شد. تمام نکات در قسمت استایل وجود دارد. ابتدا استایل یکسانی به همه دکمه های ماشین حساب می دهیم. برای این کار کافی است اسم کلاس های آن ها را با ویرگول از هم جدا کنیم و دستورات css را به همه آن ها اختصاص دهیم. به صورت زیر ```css .operand, .action, .number{ } ``` پس هر وقت خواستیم دستورات ثابتی را به کلاس های مختلف بدهیم می توانیم از عملگر , استفاده کنیم و نام کلاس یا سایر اشاره گر ها را بیاوریم. ``` css cursor:pointer; ``` این دستور باعث می شود تا نشان گر موس با حرکت بر روی دکمه ها شکل دست بگیرد و کاربر بفهمد که این دکمه ها قابل کلیک هستند. غیر از مقدار pointer که به معنی اشاره گر دست هست سایر مقدار ها نیز وجود دارد که می توانید امتحان کنید. برای این کار به قسمت استایل از بخش element بروید و سایر مقدار ها را امتحان کنید. شما با زدن کلید f12 به پنل برنامه نویسی دسترسی خواهید داشت. ```css width: 100%; ``` این دستور باعث می شود طول دکمه ها بیشتر حد ممکن از والد خود را اشغال کنند. می توان مقدار دقیق تری نیز داد مثلا ۴۰px اما وقتی با درصد بیان کنیم نسبت به صفحه کاربر این محاسبات انجام میشود. ```css padding-top:10px; ``` این دستور باعث میشود نوشته از بالای دکمه ۱۰ پیکسل فاصله داشته باشد تا در مرکز دکمه قرار بگیرد. البته راه های بهتری هم برای این کار وجود دارد اما این هم یک راه است. ```css min-width:55px; min-height:40px; ``` این دستورات حداقل طول و عرض دکمه ها را مشخص می کند. ```css margin:0px; ``` این دستور فاصله هر دکمه از دکمه مجاور را مشخص می کند. ```css text-align:center; ``` این دستور نوشته های دکمه ها را به صورت طول در مرکز قرار میدهد. ```css color:white; font-size:25px; ``` این دو دستور نیز رنگ نوشته را سفید کرده و اندازه متن آن را نیز ۲۵ پیکسل قرار میدهد.

تماس با ما