Complete Project

README.md

@@ -0,0 +1,3 @@
+This Repository contains source code for a <b>web browser calculator.</b>
+
+There is no dependency, just clone the repository and open <b>"theCalc.html"</b> in any browser.

script.js

@@ -0,0 +1,103 @@
+input = "";
+var result;
+
+
+function equalTo(){
+	input = document.getElementById("display").innerHTML;
+	document.getElementById("display").style.background.color = "yellow";
+
+	if (input === "") {
+		document.getElementById("display").innerHTML = 
+		"Please write a Expression";
+		input = "";
+	}
+
+	else if (input.indexOf('--') !== -1) {
+		document.getElementById("display").innerHTML = "Syntax Error";
+		console.log("Syntax Error");
+		input = "";
+	}
+
+	else if (input.indexOf('++') !== -1) {
+		document.getElementById("display").innerHTML = "Syntax Error";
+		console.log("Syntax Error");
+		input = "";
+	}
+
+	else if (input.indexOf('//') !== -1) {
+		document.getElementById("display").innerHTML = "Syntax Error";
+		console.log("Syntax Error");
+		input = "";
+	}
+
+	else if (input.indexOf('**') !== -1) {
+		document.getElementById("display").innerHTML = "Syntax Error";
+		console.log("Syntax Error");
+		input = "";
+	}
+
+	else if (input.indexOf('+-') !== -1) {
+		document.getElementById("display").innerHTML = "Syntax Error";
+		console.log("Syntax Error");
+		input = "";
+	}
+
+	else if (input.indexOf('+*') !== -1) {
+		document.getElementById("display").innerHTML = "Syntax Error";
+		console.log("Syntax Error");
+		input = "";
+	}
+
+	else if (input.indexOf('+/') !== -1) {
+		document.getElementById("display").innerHTML = "Syntax Error";
+		console.log("Syntax Error");
+		input = "";
+	}
+
+	else if (input.indexOf('-*') !== -1) {
+		document.getElementById("display").innerHTML = "Syntax Error";
+		console.log("Syntax Error");
+		input = "";
+	}
+
+	else if (input.indexOf('-/') !== -1) {
+		document.getElementById("display").innerHTML = "Syntax Error";
+		console.log("Syntax Error");
+		input = "";
+	}
+
+	else if (input.indexOf('-+') !== -1) {
+		document.getElementById("display").innerHTML = "Syntax Error";
+		console.log("Syntax Error");
+		input = "";
+	}
+
+	else {
+		result = eval(input);
+		document.getElementById("display").innerHTML = result ;
+		input = result.toString();
+		console.log(result);
+
+	}
+}
+
+function add(key){
+	if (key == 'pi') {
+		input = input  + Math.PI.toString();
+		document.getElementById("display").innerHTML = input;
+		console.log(input);
+
+	}
+
+	else{
+		input = input + key;
+		document.getElementById("display").innerHTML = input;
+		console.log(input);
+	}
+
+}
+
+function clean () {
+	document.getElementById("display").innerHTML = "";
+	input = "";
+}

style.css

@@ -0,0 +1,104 @@
+body{
+	margin: 0px;
+	padding: 0px;
+	background-image: url(bg3.jpg);
+
+}
+
+#banner{
+	position: relative;
+	padding-left: 20px;
+	background-image: url("bg7.jpg");
+	background-size: 100% 100%;
+	border-radius: 20px 20px 20px 20px;
+	margin: 5px 5px 50px 5px;
+
+}
+
+h1{
+	font-size: 2.6em;
+	-webkit-margin-before: 0.2em;
+    -webkit-margin-after: 0.2em;
+    -webkit-margin-start: 0px;
+    -webkit-margin-end: 0px;
+    color: white;
+}
+
+h1:first-letter{
+	font-size: 2.4em;
+	color: red;
+}
+
+#calc{
+	margin-right: auto;
+	margin-left: auto;
+	background-image: url('bg8.jpg');
+	max-width: 300px;
+	border-radius: 30px;
+	border-style: groove;
+	border-width: 5px;
+
+}
+#calc:after{
+	content: "";
+    clear: both;
+    display: block;
+}
+#display{
+	margin: 10px auto 10px auto;
+	max-width: 250px;
+	min-height: 30px;
+	background-color: hsl(180, 90%, 60%);
+	border: 3px solid black;
+	overflow: auto;
+	text-align: right;
+	padding-top: 10px;
+	padding-bottom: 10px;
+	font-size: 1.6em;
+
+}
+input{
+
+	height: 30px;
+	width: 245px;
+	text-align: right;
+}
+
+.key{
+	margin: 5px;
+	width: 63px;
+	float: left;
+	text-align: center;
+	display:inline-block;
+    cursor:pointer;
+    vertical-align:middle;
+    line-height: 2em;
+    font-weight: bold;
+    box-shadow: 0px 10px 15px #000;
+}
+
+.key:active{
+	position: relative;
+	top: 2px;
+	box-shadow: none;
+}
+
+.numb{
+	background-color: rgb(115, 220, 33);
+}
+
+.operators{
+	background-color: hsl(350,100%,80%);
+}
+
+#equalKey{
+	background-color: #33b5e5;
+}
+#equalKey:hover{
+	-ms-transform: rotate(15deg) scale(1.4, 1.4); /* IE 9 */
+    -webkit-transform: rotate(15deg) scale(1.4, 1.4); /* Safari */
+    transform: rotate(15deg) scale(1.4, 1.4);
+
+}
+
+

theCalc.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Calculator</title>
+	<meta name="author" content="Dishank Bansal">
+	<meta name="keyword" content="calculator, calculate, dishank, addition, subtraction">
+	<link rel="stylesheet" type="text/css" href="style.css"></link>
+	<link rel="shortcut icon" type="image/png" href="icon.png">
+	<script type="text/javascript" src="script.js"></script>
+</head>
+<body>
+	<div id="banner">
+		<h1>The &nbsp; Calc</h1>
+	</div>
+	<div id="main">
+		<div id="calc">
+			<div  id="display" ></div>
+			<div  class= "numb key" onclick="add('7')">7</div>
+			<div  class= "numb key" onclick="add('8')">8</div>
+			<div  class= "numb key" onclick="add('9')">9</div>
+			<div  class= "operators key" onclick="add('+')">+</div>
+			<div  class= "numb key" onclick="add('4')">4</div>
+			<div  class= "numb key" onclick="add('5')">5</div>
+			<div  class= "numb key" onclick="add('6')">6</div>
+			<div  class= "operators key" onclick="add('-')">-</div>
+			<div  class= "numb key" onclick="add('1')">1</div>
+			<div  class= "numb key" onclick="add('2')">2</div>
+			<div  class= "numb key" onclick="add('3')">3</div>
+			<div  class= "operators key" onclick="add('*')">X</div>
+			<div  class= "numb key" onclick="add('.')"><b>.</b></div>
+			<div  class= "numb key" onclick="add('0')">0</div>
+			<div  class= "numb key" onclick="add('pi')"><b>&#960;</b></div>
+			<div  class= "operators key" onclick="add('/')">&#247;</div>
+			<div  class= "key" style="background-color: red;" onclick="clean()">C</div>
+			<div  class= "operators key" onclick="add('(')">(</div>
+			<div  class= "operators key" onclick="add(')')">)</div>
+			<div  class= "key" id="equalKey"  onclick="equalTo()">=</div>
+
+
+		</div>
+	</div>
+</body>
+</html>