calculator javascript css3

Question

1.00/5 (3 votes)

See more:

HOW CAN I USE JAVASCRIPT CODE THAT I PUT IT IN BELOW CODE IN HTML CODE

i HAVE THIS CODE FOR HTML:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Styles/Site.css" rel="Stylesheet" type="text/css" />
    <script src="menu.js" type="text/javascript"></script>
</head>
<body  önclick="Click()">
    <div id="calculator">
        <div>
            Make Calculator with CSS3 and Java script By Omid dehaghin
        </div>
        <!-- نمایشگر و پاک کننده -->
        <div class="top">
            <span class="clear">پاک کردن</span>
            <div class="screen">
            </div>
        </div>
        <div class="keys">
            <!-- کلیدها -->
            <span>7</span> <span>8</span> <span>9</span> <span class="operator">+</span> <span>4</span>
            <span>5</span> <span>6</span> <span class="operator">-</span> <span>1</span> <span>2</span>
            <span>3</span> <span class="operator">÷</span> <span>0</span> <span>.</span> <span>
                class="eval">=</span> <span class="operator">x</span>
        </div>
    </div>
</body>
</html>

AND THIS CODE FOR JAVA SCRIPT:

JavaScript

var keys = document.querySelectorAll('#calculator span');
var operators = ['+', '-', 'x', '÷'];
var decimalAdded = false;
//اضافه نمودن رویداد onclickبه همه ی کلید ها و عملگرها
function Click() {
    for (var i = 0; i < keys.length; i++) {
        keys[i]. önclick = function (e) {
            //در ابتدا ورودی ها و مقادیر دکمه ها را می گیریم
            var input = document.querySelector('.screen');
            var inputVal = input.innerHTML;
            var btnVal = this.innerHTML;
            //در این قسمت تنها کافی است که کلید هایی را که فشار داده شده است با استفاده از تابع محاسباتی EVAL به محاسبه ی مقادیر آن ها بپردازیم
            //حال اگر کلید Cکلیک شود تنها کافی است تمام مقدایر را پاک کنیم.
            if (btnVal == 'C') {
                input.innerHTML = '';
                decimalAdded = false;
            }
            //در صورتی که تساوی کلیک شود تنها کافی است که نتیجه محاسبه و نمایش داده شود
            else if (btnVal == '=') {
                var equation = inputVal;
                var lastChar = equation[equation.length - 1];
                //برای انجام محاسبات عملگرهای ضربدر و تقسیم باید به حالت معممولی خود در محاسبات جاوا اسکریپت تبدیل شوند   
                equation = equation.replace(/x/g, '*').replace(/÷/g, '/');
                //هم چنین در پایان هر رشته ورودی نباید دات وجود داشته باشد لذا در این صورت باید حذف شود.
                if (operators.indexOf(lastChar) > -1 || lastChar == '.')
                    equation = equation.replace(/.$/, '');
                //محاسبه ی مقدار نهایی
                if (equation)
                    input.innerHTML = eval(equation);
                decimalAdded = false;
            }
            //به طور کلی محاسبات اصلی انجام شده است و ما در این قسمت تنها کافی است که مانند اینکه دو عملگر نباید بعد ازهم قرار بگیرند
            //و یا هیچ عملگری به جز تفریق نمی تواند در ابتدا قرار گیرد و یا تنها یک بار می توان از نشانه ی اعداد اعشاری استفاده کرد 
            //زمانی که عملگر کلیک شود
            else if (operators.indexOf(btnVal) > -1) {
                //آخرین مقدار را در نظر می گیریم
                var lastChar = inputVal[inputVal.length - 1];
                //اگر بخواهیم دو عملگر یعد از هم قرار نگیرند تنها کافیست که یا ورودی هیچ رشته ای نداشته باشد و یا آخرین مقدار رشته ای بدون کاراکتر باشد
                if (inputVal != '' && operators.indexOf(lastChar) == -1)
                    input.innerHTML += btnVal;
                //اگر بخواهیم از عملگرها فقط عملگر تفریق را اجازه دهیم که در ابتدا قرار گیرد به این صورت استفاده می کنیم 
                else if (inputVal == '' && btnVal == '-')
                    input.innerHTML += btnVal;
                //در صورتی که عملگری داشته باشیم و بخواهیم با عملگر جدیدی جایگزین شود 
                if (operators.indexOf(lastChar) > -1 && inputVal.length > 1) {
                    //در صورتیکه به جای عمل گر از دات استفاده شود با استفاده از پایین با عملگر جایگزین می شود
                    input.innerHTML = inputVal.replace(/.$/, btnVal);
                }
                decimalAdded = false;
            }
            //  برای جلوگیری از تکرار دات بیش از یک بار می توان از فلگ زیر استفاده نمود
            //که در هر بار تساوی و یا پاک کردن ریست می شود
            else if (btnVal == '.') {
                if (!decimalAdded) {
                    input.innerHTML += btnVal;
                    decimalAdded = true;
                }
            }
            // در صورت استفاده از دیگر ورودی ها
            else {
                input.innerHTML += btnVal;
            }
            // پایان و قطع برنامه
            e.preventDefault();
        }
    }
}

AND FOR CSS3 I HAVE THIS CODE:

CSS

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
	
	font: bold 14px Arial, sans-serif;
}
/*کدهای کلی صفحه*/
html {
	height: 100%;
	background: white;
	background: radial-gradient(circle, #fff 20%, #ccc);
	background-size: cover;
}
/*مشخصات مورد نیاز برای قسمت اصلی با آی دی calculatorکه در دو  خط آخر کدهای css3استفاده شده است.*/
#calculator {
	width: 325px;
	height: auto;
	
	margin: 100px auto;
	padding: 20px 20px 9px;
	
	background: #000000;
	background: linear-gradient(#9dd2ea, #8bceec);
	border-radius: 3px;
	box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}
/*قسمت مربوط به پاک کردن وclear صفحه*/
.top span.clear {
	float: left;
}
/*قسمت مربوط به نمایشگر کلید ها*/
.top .screen {
	height: 40px;
	width: 212px;
	
	float: right;
	
	padding: 0 10px;
	
	background: rgba(0, 0, 0, 0.2);
	/*CSS3*/
	border-radius: 3px;
	box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
/*CSS3*/
	font-size: 17px;
	line-height: 40px;
	color: white;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	text-align: right;
	letter-spacing: 1px;
}
/*بقیه مشخصات و تنظیمات نیز بنا بر نیاز ایجاد گردیده است.*/
.keys, .top {overflow: hidden;}

.keys span, .top span.clear {
	float: left;
	position: relative;
	top: 0;
	
	cursor: pointer;
	
	width: 66px;
	height: 36px;
	
	background: white;
	border-radius: 3px;
	box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
	
	margin: 0 7px 11px 0;
	
	color: #888;
	line-height: 36px;
	text-align: center;
	
	
	user-select: none;
	
	
	transition: all 0.2s ease;
}

.keys span.operator {
	background: #FFF0F5;
	margin-right: 0;
}
.keys span.eval {
	background: #f1ff92;
	box-shadow: 0px 4px #9da853;
	color: #888e5f;
}
.top span.clear {
	background: #ff9fa8;
	box-shadow: 0px 4px #ff7c87;
	color: white;
}

.keys span:hover {
	background: #9c89f6;
	box-shadow: 0px 4px #6b54d3;
	color: white;
}
.keys span.eval:hover {
	background: #abb850;
	box-shadow: 0px 4px #717a33;
	color: #ffffff;
}
.top span.clear:hover {
	background: #f68991;
	box-shadow: 0px 4px #d3545d;
	color: white;
}

.keys span:active {
	box-shadow: 0px 0px #6b54d3;
	top: 4px;
}
.keys span.eval:active {
	box-shadow: 0px 0px #717a33;
	top: 4px;
}
.top span.clear:active {
	top: 4px;
	box-shadow: 0px 0px #d3545d;
}

Posted 6-Dec-13 2:55am

omidfarvaha

Updated 6-Dec-13 5:37am

Richard MacCutchan

v2

Add a Solution

Comments

ZurdoDev 6-Dec-13 12:04pm

What's the question? Narrow this down to something useful for us. It's unlikely anyone is going to go look at all of your code. You need to track down the issue and give us something more specific.

OriginalGriff 6-Dec-13 12:09pm

AND DON'T SHOUT. Using all capitals is considered shouting on the internet, and rude (using all lower case is considered childish). Use proper capitalisation if you want to be taken seriously.

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2013-12-06T08:15:00

It looks way to over-complicated and pointless to me. Do you realize that the Javascript calculator already exists, this is Javascript itself, due to one key function, called eval:
http://en.wikipedia.org/wiki/Eval#ECMAScript[^],
http://www.w3schools.com/jsref/jsref_eval.asp[^].

For some code sample (in a single HTML file), look at this one: http://sakryukov.org/freeware/calculator[^].

—SA

calculator javascript css3

1 solution

Solution 1

Add your solution here

Preview 0

calculator javascript css3

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us