diff --git a/dz4.html b/dz4.html
new file mode 100644
index 0000000..cb5bfff
--- /dev/null
+++ b/dz4.html
@@ -0,0 +1,153 @@
+<!DOCTYPE HTML SYSTEM>
+<html>
+<head>
+<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
+<title>Калькулятор</title>
+<meta charset="utf-8">
+<style type="text/css">
+.layout {
+width: 385px;
+height: 505px;
+padding: 10px;
+background-color: #9ecdce;
+border-radius: 10px;
+box-shadow: 0 0 10px rgba(0,0,0,0.5);
+}
+.calculator {
+width: 380px;
+height: 500px;
+background-color: #9ecdce;
+}
+.button_number {
+width: 100px;
+height: 100px;
+background-color: #cce0f5;
+text-align: center;
+border: 2px black;
+border-radius: 50px;
+box-shadow: 0 0 10px rgba(0,0,0,0.5);
+font-size: 30px;
+}
+.button_operation, .button_equality {
+width: 80px;
+height: 80px;
+background-color: #cce0f5;
+text-align: center;
+border-radius: 60px;
+box-shadow: 0 0 10px rgba(0,0,0,0.5);
+font-size: 25px;
+}
+.button_empty{
+width: 100px;
+height: 100px;
+}
+.button_number:hover, .button_operation:hover, .button_equality:hover {
+background-color: #5eacae;
+}
+.numbers {
+background-color: #9ecdce;
+width: 300px;
+height: 401px;
+float: left;
+}
+.operations {
+background-color: #9ecdce;
+width: 80px;
+height: 3px;
+float: right;
+}
+.row {
+width: 380px;
+height: 100px;
+font-size: 30px;
+background-color: #c4e1e1;
+display: inline-block;
+float: right;
+border-radius: 10px;
+}
+</style>
+</head>
+<body>
+<div class="layout">
+<div class="calculator">
+<div class="row"><p id="output"></p></div>
+<table class="numbers">
+	<tr>
+		<td id="1" class="button_number">1</td><td id="2" class="button_number">2</td><td id="3" class="button_number">3</td>
+	</tr>
+	<tr>
+		<td id="4" class="button_number">4</td><td id="5" class="button_number">5</td><td id="6" class="button_number">6</td>
+	</tr>
+	<tr>
+		<td id="7" class="button_number">7</td><td id="8" class="button_number">8</td><td id="9" class="button_number">9</td>
+	</tr>
+	<tr>
+		<td class="button_empty"></td><td id="0" class="button_number">0</td><td class="button_empty"></td>
+	</tr>
+</table>
+
+<table class="operations">
+	<tr><td id="+" class="button_operation">+</td></tr>
+	<tr><td id="-" class="button_operation">-</td></tr>
+	<tr><td id="*" class="button_operation">*</td></tr>
+	<tr><td id="/" class="button_operation">/</td></tr>
+	<tr><td id="=" class="button_equality">=</td></tr>
+</table>
+</div>
+</div>
+<script language="JavaScript" type="text/javascript">
+$(document).ready(function() {
+	var x = 0;
+	var op;
+	var y = 0;
+	var changed = false;
+    $('.button_number').click(function(event) {
+        if (op === undefined)
+		{
+			x = x * 10 + parseFloat($(this).attr("id"));
+			$('#output').text(x);
+		}
+		else
+		{
+			changed = true;
+			y = y * 10 + parseFloat($(this).attr("id"));
+		$('#output').text(x + " " + op + " " + y);
+		}
+    });
+	$('.button_operation').click(function(event) {
+        
+		op = $(this).attr("id");
+		$('#output').text(x + " " + op);
+    });
+	$('.button_equality').click(function(event) {
+        if (op !== undefined)
+		{
+			var res;
+			switch(op)
+			{
+				case '+': res = x + y;
+					break;
+				case '-': res = x - y;
+					break;
+				case '*': res = x * y;
+					break;
+				case '/': res = x / y;
+			}
+			if (changed)
+			{
+				$('#output').text(res);
+			}	
+			else
+			{
+				$('#output').text("Wrong Format");
+			}
+			x = 0;
+			y = 0;
+			op = undefined;
+		}
+    });
+	
+});
+</script>
+</body>
+</html>
\ No newline at end of file
