Resilient-Labs · ericamendez · Oct 19, 2018 · Oct 20, 2018 · Oct 20, 2018 · Oct 20, 2018
diff --git 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:
+![alt tag](calcu.png)
 
-![Calculator](calculator.jpg)
+## 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
diff --git a/calculator.jpg b/calculator.jpg
diff --git a/css/style.css 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
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title></title>
+    <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC|Exo" rel="stylesheet">
+    <link rel="stylesheet" href="css/style.css">
+
+  </head>
+  <body>
+
+  <section class="container">
+      <input class="input" type="text" name="input" autofocus>
+
+      <button class="clear" type="button" name="button">Clear</button>
+      <button class="op plus" type="button" name="button">+</button>
+
+      <button class="num one" type="button" name="button">1</button>
+      <button class="num two" type="button" name="button">2</button>
+      <button class="num three" type="button" name="button">3</button>
+      <button class="op minus" type="button" name="button">-</button>
+
+      <button class="num four" type="button" name="button">4</button>
+      <button class="num five" type="button" name="button">5</button>
+      <button class="num six" type="button" name="button">6</button>
+      <button class="op multi" type="button" name="button">x</button>
+
+      <button class="num seven" type="button" name="button">7</button>
+      <button class="num eight" type="button" name="button">8</button>
+      <button class="num nine" type="button" name="button">9</button>
+      <button class="op divide" type="button" name="button">/</button>
+
+      <button class="num zero" type="button" name="button">0</button>
+      <button class="num period" type="button" name="button">.</button>
+      <button class="equal" type="button" name="button">=</button>
+  </section>
+
+  <script src="js/script.js" type="text/javascript"></script>
+  </body>
+</html>
diff --git a/js/script.js 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);