diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..8a557a8
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,293 @@
+@font-face {
+  font-family: digital;
+  src: url('/imgs/digital.ttf');
+}
+
+body {
+  position: fixed;
+  background-image: url("/imgs/calculator.jpg");
+  background-repeat: no-repeat;
+}
+
+#display {
+  position: fixed;
+  height: 85px;
+  width: 295px;
+  left: 455px;
+  top: 156px;
+  border-radius: 5px;
+  font-size: 50px;
+  font-family: "digital";
+  word-wrap: break-word;
+  text-shadow: 4px 4px #4D834D;
+  overflow-wrap: break-word;
+  overflow-y: hidden;
+  line-height: 40px;
+}
+
+#seven {
+  position: fixed;
+  height: 42px;
+  width: 60px;
+  left: 420px;
+  top: 320px;
+  font-size: 30px;
+  font-weight: bold;
+  border-radius: 5px;
+}
+
+#eight {
+  position: fixed;
+  height: 42px;
+  width: 60px;
+  left: 488px;
+  top: 320px;
+  transform: skew(2deg);
+  font-size: 30px;
+  font-weight: bold;
+  border-radius: 5px;
+}
+
+#nine {
+  position: fixed;
+  height: 42px;
+  width: 60px;
+  left: 556px;
+  top: 320px;
+  transform: skew(3deg);
+  font-size: 30px;
+  font-weight: bold;
+  border-radius: 5px;
+}
+
+#four {
+  position: fixed;
+  height: 42px;
+  width: 62px;
+  left: 420px;
+  top: 368px;
+  font-size: 30px;
+  font-weight: bold;
+  border-radius: 5px;
+}
+
+#five {
+  position: fixed;
+  height: 42px;
+  width: 62px;
+  left: 490px;
+  top: 367px;
+  transform: skew(1.5deg);
+  font-size: 30px;
+  font-weight: bold;
+  border-radius: 5px;
+}
+
+#six {
+  position: fixed;
+  height: 42px;
+  width: 62px;
+  left: 558px;
+  top: 367px;
+  transform: skew(3deg);
+  font-size: 30px;
+  font-weight: bold;
+  border-radius: 5px;
+}
+
+#one {
+  position: fixed;
+  height: 42px;
+  width: 62px;
+  left: 420px;
+  top: 415px;
+  font-size: 30px;
+  font-weight: bold;
+  border-radius: 5px;
+}
+
+#two {
+  position: fixed;
+  height: 42px;
+  width: 62px;
+  left: 491px;
+  top: 415px;
+  transform: skew(1.5deg);
+  font-size: 30px;
+  font-weight: bold;
+  border-radius: 5px;
+}
+
+#three {
+  position: fixed;
+  height: 42px;
+  width: 62px;
+  left: 562px;
+  top: 414px;
+  transform: skew(3deg);
+  font-size: 30px;
+  font-weight: bold;
+  border-radius: 5px;
+}
+
+#zero {
+  position: fixed;
+  height: 44px;
+  width: 64px;
+  left: 420px;
+  top: 464px;
+  font-size: 30px;
+  font-weight: bold;
+  border-radius: 5px;
+}
+
+#zeroZero {
+  position: fixed;
+  height: 44px;
+  width: 63px;
+  left: 493px;
+  top: 463px;
+  transform: skew(1deg);
+  font-size: 30px;
+  font-weight: bold;
+  border-radius: 5px;
+}
+
+#deci {
+  position: fixed;
+  height: 43px;
+  width: 64px;
+  left: 564px;
+  top: 462px;
+  transform: skew(3deg);
+  font-size: 30px;
+  font-weight: bold;
+  border-radius: 5px;
+}
+
+#divide {
+  position: fixed;
+  height: 39px;
+  width: 60px;
+  left: 645px;
+  top: 321px;
+  transform: skew(5deg);
+  font-size: 30px;
+  font-weight: bold;
+  border-radius: 5px;
+  background-color: #F0DD0A;
+}
+
+#multiply {
+  position: fixed;
+  height: 42px;
+  width: 61px;
+  left: 649px;
+  top: 365px;
+  transform: skew(5deg);
+  font-size: 30px;
+  font-weight: bold;
+  border-radius: 5px;
+  background-color: #F0DD0A;
+}
+
+#minus {
+  position: fixed;
+  height: 42px;
+  width: 62px;
+  left: 653px;
+  top: 412px;
+  transform: skew(5deg);
+  font-size: 30px;
+  font-weight: bold;
+  border-radius: 5px;
+  background-color: #F0DD0A;
+}
+
+#plus {
+  position: fixed;
+  height: 42px;
+  width: 65px;
+  left: 657px;
+  top: 461px;
+  transform: skew(5deg);
+  font-size: 30px;
+  font-weight: bold;
+  border-radius: 5px;
+  background-color: #F0DD0A;
+}
+
+#equal {
+  position: fixed;
+  height: 88px;
+  width: 61px;
+  left: 735px;
+  top: 318px;
+  transform: skew(9deg);
+  font-size: 30px;
+  font-weight: bold;
+  border-radius: 5px;
+  background-color: #E31E1E;
+}
+
+#clear {
+  position: fixed;
+  height: 42px;
+  width: 63px;
+  left: 744px;
+  top: 412px;
+  transform: skew(9deg);
+  font-size: 30px;
+  font-weight: bold;
+  border-radius: 5px;
+  background-color: #E31E1E;
+}
+
+#balance {
+  position: fixed;
+  height: 43px;
+  width: 65px;
+  left: 750px;
+  top: 460px;
+  transform: skew(9deg);
+  font-size: 22px;
+  font-weight: bold;
+  border-radius: 5px;
+  background-color: #39AD36;
+}
+
+#deposit{
+  position: fixed;
+  height: 90px;
+  width: 195px;
+  left: 205px;
+  top: 340px;
+  transform: skew(-2deg);
+  font-size: 22px;
+  font-weight: bold;
+  border-radius: 5px;
+  background-color: #39AD36;
+}
+
+#withdraw{
+  position: fixed;
+  height: 92px;
+  width: 195px;
+  left: 200px;
+  top: 431px;
+  transform: skew(-2.5deg);
+  font-size: 22px;
+  font-weight: bold;
+  border-radius: 5px;
+  background-color: #39AD36;
+}
+
+#fck {
+  position: fixed;
+  height: 4px;
+  width: 500px;
+  left: 695px;
+  top: 545px;
+  font-size: 10px;
+  font-family: arial;
+}
\ No newline at end of file
diff --git a/imgs/calculator.jpg b/imgs/calculator.jpg
new file mode 100644
index 0000000..d0e4941
Binary files /dev/null and b/imgs/calculator.jpg differ
diff --git a/imgs/digital.ttf b/imgs/digital.ttf
new file mode 100644
index 0000000..5dbe6f9
Binary files /dev/null and b/imgs/digital.ttf differ
diff --git a/imgs/showmethemoney.wav b/imgs/showmethemoney.wav
new file mode 100644
index 0000000..64426b9
Binary files /dev/null and b/imgs/showmethemoney.wav differ
diff --git a/index.html b/index.html
index e69de29..b6b2eb1 100644
--- a/index.html
+++ b/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link href="./css/style.css" rel="stylesheet" media="screen">
+  <title>"The Gang Makes a Calculator"</title>
+</head>
+<body>
+<div id ="fck">fck yeh we smart as hell bruh</div>
+<div id="display"></div>
+<button id="seven">7</button>
+<button id="eight">8</button>
+<button id="nine">9</button>
+<br><br>
+<button id="four">4</button>
+<button id="five">5</button>
+<button id="six">6</button>
+<br><br>
+<button id="one">1</button>
+<button id="two">2</button>
+<button id="three">3</button>
+<br><br>
+<button id="zero">0</button>
+<button id="zeroZero">00</button>
+<button id="deci">.</button>
+<br><br>
+<button id="divide">÷</button>
+<button id="multiply">×</button>
+<button id="minus">-</button>
+<button id="plus">+</button>
+<button id="equal">=</button>
+<button id="clear">C</button>
+<button id="balance">BAL</button>
+<button id="deposit">DEPOSIT</button>
+<button id="withdraw">WITHDRAW</button>
+
+
+
+<script src= "./js/calculator.js"></script>
+<script src= "./js/cash_register.js"></script>
+
+<audio id="audio" src="imgs/showmethemoney.wav"></audio>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/js/calculator.js b/js/calculator.js
index e69de29..4520d29 100644
--- a/js/calculator.js
+++ b/js/calculator.js
@@ -0,0 +1,49 @@
+
+var total = 0;
+// var _memory = 0;
+
+function Calculator(){
+ 
+  
+  function load(x){
+    total += x;
+    return total;
+  }
+  function add(x){
+    total += x;
+  }
+  function subtract(x){
+    total -= x;
+  }
+  function multiply(x){
+    total *= x;
+  }
+  function divide(x){
+    total /= x;
+  }
+  function deleteTotal(){
+     total = 0;
+
+  }
+  // function saveMemory(){
+  //   _memory = total;
+  // }
+  // function recallMemory() {
+  //    return _memory;
+  // }
+  function returnTotal(){
+     return total;
+  }
+
+  return{
+  add: add,
+  subtract: subtract,
+  multiply: multiply,
+  divide: divide,
+  load: load,
+  // saveMemory: saveMemory,
+  // recallMemory: recallMemory,
+  deleteTotal: deleteTotal,
+  returnTotal: returnTotal
+  };
+}
diff --git a/js/cash_register.js b/js/cash_register.js
index e69de29..057d556 100644
--- a/js/cash_register.js
+++ b/js/cash_register.js
@@ -0,0 +1,168 @@
+var balance = 0;
+var display = getEm("display");
+var operation = "";
+var calculator = Calculator();
+var storedNumber = 0;
+var drawer = 0;
+
+//'getEm()' hoisted above var 'display'
+function getEm(x){
+
+  return document.getElementById(x);
+}
+
+function clearDisplay(){
+
+  return display.innerHTML = "";
+}
+
+
+//   return {
+//     // deposit: deposit,
+//     // withdraw: withdraw,
+//     // balance: getBalance,
+//     clearDisplay: clearDisplay,
+//     equals: equals
+//   };
+// })();
+
+// for (var i = 0; i < this.length; i++) {
+// < this[i]
+// }
+
+getEm("nine").addEventListener('click',function nine(){
+  display.innerHTML += 9;});
+
+getEm("eight").addEventListener('click',function eight(){
+  display.innerHTML += 8;});
+
+getEm("seven").addEventListener('click',function seven(){
+  display.innerHTML += 7;});
+
+getEm("six").addEventListener('click',function six(){
+  display.innerHTML += 6;});
+
+getEm("five").addEventListener('click',function five(){
+  display.innerHTML += 5;});
+
+getEm("four").addEventListener('click',function four(){
+  display.innerHTML += 4;});
+
+getEm("three").addEventListener('click',function three(){
+  display.innerHTML += 3;});
+
+getEm("two").addEventListener('click',function two(){
+  display.innerHTML += 2;});
+
+getEm("one").addEventListener('click',function one(){
+  display.innerHTML += 1;});
+
+getEm("deci").addEventListener('click',function decimal(){
+  display.innerHTML += '.';});
+
+getEm("zero").addEventListener('click',function zero(){
+  display.innerHTML += 0;});
+
+getEm("zeroZero").addEventListener('click',function zeroZero(){
+
+    display.innerHTML += '00';
+
+  });
+
+
+
+getEm("clear").addEventListener('click',function(){
+    clearDisplay();
+  });
+
+// CALCULATOR OPERATIONS:
+
+getEm("divide").addEventListener('click',function divide(){
+  var divide = parseFloat(display.innerHTML);
+  calculator.load(divide);    
+  clearDisplay();
+  operation = "divide"; 
+
+  });
+
+getEm("multiply").addEventListener('click',function multiply(){
+  var multiply = parseFloat(display.innerHTML);
+  calculator.load(multiply);    
+  clearDisplay();
+  operation = "multiply";  
+
+  });
+
+getEm("minus").addEventListener('click',function subtract(){
+  var subtract = parseFloat(display.innerHTML);
+  calculator.load(subtract);    
+  clearDisplay();
+  operation = "subtract";
+
+  });
+
+getEm("plus").addEventListener('click',function add(){
+  var add = parseFloat(display.innerHTML);
+  calculator.load(add);    
+  clearDisplay();
+  operation = "add";
+
+  });
+
+//CASH REGISTER BUTTONS:
+
+getEm("deposit").addEventListener('click',function(){
+
+  storedNumber = parseFloat(display.innerHTML);
+  drawer += storedNumber;
+  clearDisplay();
+
+  });
+
+getEm("withdraw").addEventListener('click',function(){
+
+  storedNumber = parseFloat(display.innerHTML);
+  display.innerHTML = (drawer -= storedNumber);
+  clearDisplay();
+  
+  });
+
+getEm("balance").addEventListener('click',function(){
+
+  storedNumber = parseFloat(display.innerHTML);
+  // drawer += storedNumber;
+  display.innerHTML = drawer;
+
+  var audio = document.getElementById("audio");
+  audio.play();
+
+  });
+
+
+//THE ALMIGHTY EQUALS! THE EQUALITY OF EQUALITY: GENDER/RACIAL/MATHEMATICAL YOU NAME IT.
+
+getEm("equal").addEventListener('click',function equal(){
+  storedNumber = parseFloat(display.innerHTML); 
+    
+    switch(operation){
+
+      case 'add': calculator.add(storedNumber);
+        break;
+
+      case 'subtract': calculator.subtract(storedNumber);
+        break;
+
+      case 'multiply': calculator.multiply(storedNumber);
+        break;
+
+      case 'divide': calculator.divide(storedNumber);
+        break;
+      }
+
+    display.innerHTML = calculator.returnTotal();
+      calculator.deleteTotal();
+
+});
+
+
+