diff --git a/Calculator.js b/Calculator.js
new file mode 100644
index 0000000..311969d
--- /dev/null
+++ 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;
+}
+ })
+}
+
\ No newline at end of file
diff --git a/calculator.css b/calculator.css
new file mode 100644
index 0000000..a631007
--- /dev/null
+++ 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) ;
+}
\ No newline at end of file
diff --git a/calculator.html b/calculator.html
new file mode 100644
index 0000000..5cc62de
--- /dev/null
+++ b/calculator.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+ Calculator
+
+
+
+ Calculator
+
+
+
+
+
+
+ |
+ |
+ |
+ |
+
+
+ |
+ |
+ |
+ |
+
+ |
+ |
+ |
+ |
+
+
+ |
+ |
+ |
+ |
+
+ |
+ |
+
+
+
+