Merge pull request fineanmol#1961 from Vrajjangid5/calculator_using_js

Add files via upload
a3X3k · Oct 3, 2022 · 2305c01 · 2305c01
2 parents 804dfc7 + 2db5d75
commit 2305c01
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 0 deletions.
diff --git a/clac.js b/clac.js
@@ -0,0 +1,19 @@
+let result=document.getElementById("inputtext");
+
+let answer=(number)=>{
+     result.value=result.value+number;	
+}
+let Result=()=>{
+	try{
+		result.value=eval(result.value)
+	}
+	catch(err){
+		alert("something wrong");
+	}
+} 	
+function clr(){
+	result.value="";
+}
+function del(){
+	result.value=result.value.slice(0,-1);
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,34 @@
+<html>
+<head>
+    <title>claculator</title>
+	<link href="style.css" rel="stylesheet">
+</head>
+<body>
+    <div class="main">
+	    <div class="clac">
+		    <input type="text" id="inputtext" placeholder="0">
+			<button onclick="clr()">C</button>
+			<button onclick="del()">DEL</button>
+			<button onclick="answer('/')">/</button>
+			<button onclick="answer('*')">*</button>
+			<button onclick="answer(1)">1</button>
+			<button onclick="answer(2)">2</button>
+			<button onclick="answer(3)">3</button>
+			<button onclick="answer('+')">+</button>
+			<button onclick="answer(4)">4</button>
+			<button onclick="answer(5)">5</button>
+			<button onclick="answer(6)">6</button>
+			<button onclick="answer('-')">-</button>
+			<button onclick="answer(7)">7</button>
+			<button onclick="answer(8)">8</button>
+			<button onclick="answer(9)">9</button>
+			<button onclick="answer('%')">%</button>
+			<button onclick="answer('.')">.</button>
+			<button onclick="answer(0)">0</button>
+			<button class="equal" onclick="Result()">=</button>
+			<script src="clac.js"></script>
+
+		</div>
+	</div>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,50 @@
+*{
+	margin:0px;
+	padding:0px;
+	 box-sizing:border-box;
+	 outline:none;
+		background-color:skyblue;
+}
+.main{
+	height:100vh;
+	display:flex;
+	align-items:center;
+	justify-content:center;
+}
+.clac{
+	border-radius:20px;
+	padding:16px;
+	display:grid; 	
+	grid-template-columns:repeat(4,80px);
+	background-color:black;
+}
+input{
+	grid-column:span 4;
+	height:60px;
+	width:310px;
+	box-shadow:20px 5px 25px black;
+	background-color:white;
+	border:none;
+	border-radius:20px;
+	color:rgb(25,26,25);
+	text-align:end;
+	margin:40px 0px 30px 0px;
+	padding:20px;
+	font-size:40px;
+}
+button{
+		background-color:white;
+	border:none;
+
+	width:50px;
+	height:50px;
+	margin:10px;
+	font-weight:bold;
+	font-size:20px;	
+	border-radius:0px 0px 10px 10px;
+border:2px solid black;
+}
+.equal{
+	width:135px;
+	border-radius:10px;
+}