first commit

Lavesh12 · Jan 31, 2022 · 3b4b9b6 · 3b4b9b6
commit 3b4b9b6
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 0 deletions.
diff --git a/Calculator.js b/Calculator.js
@@ -0,0 +1,27 @@
+let screen = document.getElementById('screen');
+buttons = document.querySelectorAll('button');
+
+for(item of buttons){
+    item.addEventListener('click',(e)=>{
+buttonText = e.target.innerText;
+
+console.log('Button text is',buttonText);
+
+if(buttonText=='*'){
+    screenValue += buttonText;
+    screen.value = screenValue;
+}
+else if (buttonText=='C'){
+    screenValue = "";
+    screen.value = screenValue;
+}
+else if (buttonText=='='){
+    screen.value = eval(screenValue);
+}
+else{
+    screenValue += buttonText;
+    screen.value = screenValue;
+}
+    })
+}
+
diff --git a/calculator.css b/calculator.css
@@ -0,0 +1,38 @@
+*{
+    /* margin: 0; */
+    margin-top: 5px;
+    /* padding: 0; */
+}
+.container{
+    text-align: center;
+}
+table{margin: auto;
+margin-top: 5px;
+}
+
+input{font-size: 34px;
+    margin-top: 5px;
+border-color: rgb(8, 4, 51);
+border-width: 2px;
+border-radius: 20px;
+}
+
+.equal button{
+width: 100%;
+}
+
+button{
+    border-radius: 20px;
+font-size: 40px;
+background: rgb(208, 211, 13);
+width: 103px;
+height: 80px;
+}
+
+.calculator{
+    display: inline-block;
+    padding: 23px;
+    background-color: rgb(21, 37, 2);
+    border-radius: 10px;
+border: 5px solid rgb(226, 241, 15) ;
+}
diff --git a/calculator.html b/calculator.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Calculator</title>
+    <link rel="stylesheet" href="calculator.css">
+</head>
+<body>
+    <div class="container"><h1>Calculator</h1>
+
+        <div class="calculator">
+    <input type="text" name="screen" id="screen">
+
+   <table>
+       <tr>
+           <td><button>7</button></td>
+           <td><button>8</button></td>
+           <td><button>9</button></td>
+           <td><button>+</button></td>
+       </tr>
+       <tr>
+        <td><button>4</button></td>
+        <td><button>5</button></td>
+        <td><button>6</button></td>
+        <td><button>-</button></td>    
+    </tr>
+    <td><button>1</button></td>
+    <td><button>2</button></td>
+    <td><button>3</button></td>
+    <td><button>*</button></td>
+    </tr>
+    <tr>
+        <td><button>0</button></td>
+        <td><button>.</button></td>
+        <td><button>/</button></td>
+        <td><button>C</button></td>
+        </tr>
+        <tr><td colspan="4" class="equal">
+            <button>=</button></td></tr>
+
+   </table>
+    </div>
+</div>
+</div>
+    <script src="Calculator.js"></script>
+</body>
+</html>