Add files via upload

p-sarath-kumaran · Mar 2, 2024 · 4fb86c1 · 4fb86c1
1 parent f39a3ab
commit 4fb86c1
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 0 deletions.
diff --git a/Calculator.css b/Calculator.css
@@ -0,0 +1,39 @@
+body{
+    background-color: wheat;
+}
+h1{
+    text-align: center;
+}
+#display{
+    width: 100%;
+    box-sizing: border-box;
+    margin-bottom: 20px;
+    padding: 5px;
+    background-color: white;
+    border: 2px solid black;
+    font-size: 18px;
+}
+.calculator{
+    width: 300px;
+    margin: 0 auto;
+    background-color:whitesmoke;
+    padding: 15px;
+    border-radius: 10px;
+    border: 2px solid black;
+    box-shadow: 5px 5px 5px grey;
+
+}
+button{
+    width: 23%;
+    border-radius: 8px;
+    margin: 5px;
+    padding: 10px;
+    font-size: 18px;
+    background-color: grey;
+    box-shadow: 5px 5px 5px lightblue;
+    cursor: pointer;
+}
+button:hover{
+    background-color: lightcyan;
+    color: red
+}
diff --git a/Calculator.html b/Calculator.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="Calculator.css">
+</head>
+<body>
+    <h1>Basic Calculator</h1>
+    <div class="calculator">
+        <input type="text" id="display" disabled>
+        <div class="keys">
+            <button onclick="addnumber(1)">1</button>
+            <button onclick="addnumber(2)">2</button>
+            <button onclick="addnumber(3)">3</button>
+            <button onclick="addnumber(4)">4</button>
+            <button onclick="addnumber(5)">5</button>
+            <button onclick="addnumber(6)">6</button>
+            <button onclick="addnumber(7)">7</button>
+            <button onclick="addnumber(8)">8</button>
+            <button onclick="addnumber(9)">9</button>
+            <button onclick="addnumber(0)">0</button>
+            <button onclick="addoperator('+')">+</button>
+            <button onclick="addoperator('-')">-</button>
+            <button onclick="addoperator('*')">*</button>
+            <button onclick="addoperator('/')">/</button>
+            <button onclick="calculate()">=</button>
+            <button onclick="rem()">C</button>
+            <button onclick="del()">D</button>
+        </div>
+    </div>
+    <script src="Calculator.js"></script>
+</body>
+</html>
diff --git a/Calculator.js b/Calculator.js
@@ -0,0 +1,22 @@
+let expression='';
+function addnumber(num) {
+    expression += num;
+    document.getElementById('display').value = expression;
+}
+function addoperator(operator) {
+    expression += operator;
+    document.getElementById('display').value = expression;
+}
+function rem() {
+    expression = '';
+    document.getElementById('display').value = expression;
+}
+function del(){
+    expression = expression.slice(0,-1);
+    document.getElementById('display').value = expression;
+}
+function calculate() {
+    const result = eval(expression);
+        document.getElementById('display').value = result;
+        expression = result.toString();
+}