diff --git a/README.md b/README.md
index 39633cd..75bbc25 100644
--- a/README.md
+++ b/README.md
@@ -1,26 +1,25 @@
-# 🔢 Week01 Alumni Project: Calculator
+# OOP Calculator
+Build a Simple Calculator using JS OOP best practices
-### Goal: Build a Simple Calculator using JS OOP best practices
+**Link to project:** https://dreamy-newton-b08b4b.netlify.com
-### What it should look like:
+
-
+## How It's Made:
-### How to submit your code for review:
+**Tech used:** HTML5, CSS3, JavaScript
+Styling for this project was done using a CSS Grid layout. Calculator behavior was written implementing object oriented programming in Javascript.
-- Fork and clone this repo
-- Create a new branch called answer
-- Checkout answer branch
-- Push to your fork
-- Issue a pull request
-- Your pull request description should contain the following:
- - (1 to 5 no 3) I completed the challenge
- - (1 to 5 no 3) I feel good about my code
- - Anything specific on which you want feedback!
+## Optimizations
+Found it more efficient to iterate through a class of buttons vs having to write a different click event for each button.
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+## Lessons Learned:
+This was my first attempt at writing a project with object oriented programming. Enjoyed that OOP kept my Javascript really organized.
+
+## Examples:
+
+**To-do List:** https://github.com/Eriquette/todo-list-2018c-week05/tree/answer
+
+**Daily Code Challenges:** https://github.com/Eriquette/Daily-Code-Challenges
+
+**Picture Gallery:** https://github.com/Eriquette/carousel-bootcamp2018c-week05
diff --git a/calcu.png b/calcu.png
new file mode 100644
index 0000000..a6788e8
Binary files /dev/null and b/calcu.png differ
diff --git a/calculator.jpg b/calculator.jpg
deleted file mode 100644
index b4e4895..0000000
Binary files a/calculator.jpg and /dev/null differ
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..265a6a6
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,125 @@
+* {
+ box-sizing: border-box;
+}
+
+*:focus {
+ outline: none;
+}
+
+body {
+ margin:0 ;
+ background-color: white;
+}
+
+.clearfix:after {
+ content: ".";
+ display: block;
+ clear: both;
+ visibility: hidden;
+ line-height: 0;
+ height: 0;
+}
+
+/***************************************
+LAYOUT
+*****************************************/
+
+
+.container{
+ font-family: 'Exo', sans-serif;
+ margin: 3% 15%;
+ padding: 5%;
+ border-radius: 15px;
+ background-color: rgb(138,82,86);
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
+ grid-gap: 15px;
+ grid-template-areas:
+ "input input input input"
+ "clear clear clear plus"
+ "one two three minus"
+ "four five six multi"
+ "seven eight nine divide"
+ "zero period equal equal"
+}
+
+.input {
+ grid-area: input;
+}
+
+.clear {
+ grid-area: clear;
+ background-color: rgb(247,201,185);
+ font-size: 3em;
+ color:white;
+}
+
+.plus {
+ grid-area: plus;
+}
+
+.equal {
+ grid-area: equal;
+ background-color: rgb(241,138,145);
+ font-size: 3em;
+ color:white;
+}
+
+/***************************************
+CONTENT
+*****************************************/
+button{
+ padding: 30px 30px;
+ font-size: 2em;
+ border:none;
+ background-color: white;
+ color: black;
+ border-radius: 30px;
+}
+
+button:hover{
+ margin:0;
+ font-size: 3em;
+ color: rgb(241,138,145);
+ background-color: white;
+}
+
+input{
+ background-color: rgb(66,59,59);
+ font-size: 2.5em;
+ font-family: 'Exo', sans-serif;
+ border: none;
+ text-align: right;
+ padding-right: 10px;
+ color: rgb(241,138,145);
+ margin-bottom: 10px;
+}
+
+.num {
+ background-color:
+}
+
+.op{
+ color: white;
+ background-color: rgb(224,183,206);
+}
+
+/***************************************
+MEDIA QUERIES
+*****************************************/
+
+/* tablet */
+@media (min-width: 768px) and (max-width: 1023px){
+
+}
+
+/* mobile */
+@media screen and (max-width: 767px){
+ .container{
+ margin: 20px;
+ }
+ button{
+ padding: 20px 20px;
+ }
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d1447f4
--- /dev/null
+++ b/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/script.js b/js/script.js
new file mode 100644
index 0000000..9dd1fe7
--- /dev/null
+++ b/js/script.js
@@ -0,0 +1,69 @@
+let opButton = document.querySelectorAll(".op");
+let equalButton = document.querySelector(".equal");
+let numButton = document.querySelectorAll(".num")
+let clearButton = document.querySelector(".clear");
+let input = document.querySelector(".input");
+var op = "";
+
+// CALCULATOR OBJECT
+let calc = {
+ val1: 0,
+ val2: 0,
+ equal: null,
+
+ // when click on operator set val1 and set op
+ operation(){
+ val1 = Number(input.value);
+ input.value = "";
+ },
+
+ // when click on equal decide what function to do
+ equate(){
+ val2 = Number(input.value);
+
+ if(op == "+"){
+ input.value = val1 + val2
+ }else if(op == "-"){
+ input.value = val1 - val2
+ }else if(op == "x"){
+ input.value = val1 * val2
+ }else if(op == "/"){
+ input.value = val1 / val2
+ }
+
+ op = "";
+ },
+
+ clear(){
+ input.value = "";
+ val1= 0
+ val2= 0
+ equal= null
+ op = "";
+ }
+}
+
+// when number button gets clicked, add number text to input
+for(let i = 0; i < numButton.length;i++){
+ numButton[i].addEventListener("click", function(e){
+ e.preventDefault();
+ input.value += this.textContent
+ });
+}
+
+// when operator gets clicked change val1 & op
+for(let i = 0; i < opButton.length;i++){
+ opButton[i].addEventListener("click", function(e){
+ e.preventDefault();
+ op = this.textContent;
+ calc.operation();
+ });
+}
+
+
+
+// when equal gets clicked change val2, and do equation
+equalButton.addEventListener("click", calc.equate);
+
+// clear everything
+clearButton.addEventListener("click", calc.clear);