diff --git a/calc.html b/calc.html
new file mode 100644
index 0000000..01f3e14
--- /dev/null
+++ b/calc.html
@@ -0,0 +1,109 @@
+<!DOCTYPE HTML SYSTEM>
+<html>
+<head>
+<meta charset='utf-8'>
+<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
+</script>
+<style type = "text/css">
+div.inout {
+width: 190px;
+height: 50px;
+background-color: #ffff99;
+}
+div.container1 {
+float:left;
+width: 153px;
+height: 204px;
+}
+div.container2 {
+float:left;
+width: 37px;
+height: 204px;
+}
+div.number {
+width: 50px;
+height: 50px;
+margin-top: 1px;
+margin-right: 1px;
+background-color: #ffff99;
+float:left;
+}
+div.operation {
+width: 37px;
+height: 40px;
+background-color: #ccff99;
+float:left;
+margin-top: 1px;
+}
+</style>
+</head>
+<body>
+<div class='inout' id = 'inout'>
+
+</div>
+<div class = 'container1'>
+<div class = 'number' id = '1'>1</div>
+<div class = 'number' id = '2'>2</div>
+<div class = 'number' id = '3'>3</div>
+<div class = 'number' id = '4'>4</div>
+<div class = 'number' id = '5'>5</div>
+<div class = 'number' id = '6'>6</div>
+<div class = 'number' id = '7'>7</div>
+<div class = 'number' id = '8'>8</div>
+<div class = 'number' id = '9'>9</div>
+<div class = 'number' id = '0'>0</div>
+</div>
+<div class = 'container2'>
+<div class = 'operation' id = '+'>+</div>
+<div class = 'operation' id = '-'>-</div>
+<div class = 'operation' id = '*'>*</div>
+<div class = 'operation' id = '/'>/</div>
+<div class = 'operation' id = '='>=</div>
+</div>
+
+<script language = 'JavaScript' type = 'text/javascript'>
+
+$(document).ready(function() {
+	var x = 0;
+	var y = 0;
+	var res = 0, flag = false;
+	var operation;	
+	$('div.number').click(function(event) {
+		if(operation === undefined) {
+			flag = false;
+			x = x*10 + parseFloat($(this).attr('id'));
+			$('#inout').text(x);
+		} else { 
+			y = y*10 + parseFloat($(this).attr('id'));
+			$('#inout').text(x + ' ' + operation + ' ' + y); 
+
+		}
+	});
+	$('div.operation').click(function(event){
+		var op = $(this).attr('id');
+		if(op !== '=') {
+			if (flag) x = res;
+			operation = op;
+			$('#inout').text(x + ' ' + operation);	
+		} else {
+			var res;
+			switch(operation){
+			case '+':res = x+y; $('#inout').text(res); break;
+			case '-': res = x-y; $('#inout').text(res); break;
+			case '*': res = x*y; $('#inout').text(res); break;
+			case '/': if(y != 0){ res=x/y; $('#inout').text(res); } else $('#inout').text('division by zero!'); break;
+			default: $('#inout').text('something wrong');
+			}
+			flag = true;
+			x = 0; y = 0; operation = undefined;
+		}
+	});
+
+});
+
+
+</script>
+
+
+</body>
+</html>
