Resilient-Labs · vonds · Oct 19, 2018 · Oct 19, 2018 · Oct 20, 2018
diff --git a/Calc/css/backCalc7.jpg b/Calc/css/backCalc7.jpg
diff --git a/Calc/css/background.jpg b/Calc/css/background.jpg
diff --git a/Calc/css/style.css b/Calc/css/style.css
@@ -0,0 +1,93 @@
+*:focus{
+  outline: none;
+}
+
+
+body{
+  outline: none;
+  margin: 0;
+  padding:0;
+  background: url(backCalc7.jpg) no-repeat center center fixed;
+    -webkit-background-size: cover; /* For WebKit*/
+    -moz-background-size: cover;    /* Mozilla*/
+    -o-background-size: cover;      /* Opera*/
+    background-size: cover;         /* Generic*/
+
+}
+
+button {
+  width: 80px;
+  height: 80px;
+  font-size: 25px;
+  cursor: pointer;
+  border: none;
+  margin: 2px;
+  background: rgba(255, 255, 255, .7);
+  color: #333;
+  border-radius: 5px;
+}
+
+button:hover, button:focus {
+  background: rgba(255, 255, 255, .9);
+  transform: scale(.95);
+}
+
+input {
+  border: none;
+  width: 334px;
+  height: 90px;
+  margin: 5px;
+  font-size: 25px;
+  padding: 5px;
+  text-align: center;
+  background: rgba(0, 0, 0, .1); 
+  color: #fff;
+  border-radius: 20px 20px 0px 0px;
+}
+
+input:hover, input:focus {
+  background: rgba(0, 0, 0, .2);
+}
+
+.op{
+  background: rgba(88, 93, 104, 0.8);
+  color: #fff;
+}
+
+.op:hover, 
+.op:focus {
+  background: rgba(88, 93, 104, 1);
+}
+
+.eq {
+  background: rgba(12, 12, 11, 0.8);
+  color: #fff;
+  width: 415%;
+}
+
+.eq:hover, 
+.eq:focus {
+  background: rgba(12, 12, 11, 1);
+  transform: scale(1);
+}
+
+.clear {
+  background: rgba(246, 14, 14, 0.7);
+  color: #fff;
+}
+
+.clear:hover,
+.clear:focus {
+  background: rgba(246, 14, 14, 0.8);
+  transform: scale(.95);
+}
+
+.calcKey, .calcInput {
+  display: flex;
+  justify-content: center;
+}
+
+
+
+
+
diff --git a/Calc/index.html b/Calc/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+  <meta charset="utf-8">
+  <link href="https://fonts.googleapis.com/css?family=Sunshiney" rel="stylesheet">
+  <link rel="stylesheet" href="css/style.css">
+  <title></title>
+</head>
+
+<body>
+  <section class="calculator">
+    <section class="calcInput">
+      <input id="screen" type="text" placeholder="0">
+    </section>
+    <section class="calcKey">
+      <table>
+        <tr>
+          <td><button id="one" class="num">1</button></td>
+          <td><button id="two" class="num">2</button></td>
+          <td><button id="three" class="num">3</button></td>
+          <td><button id="add" class="op">+</button></td>
+        </tr>
+        <tr>
+          <td><button id="four" class="num">4</button></td>
+          <td><button id="five" class="num">5</button></td>
+          <td><button id="six" class="num">6</button></td>
+          <td><button id="sub" class="op">-</button></td>
+        </tr>
+        <tr>
+          <td><button id="seven" class="num">7</button></td>
+          <td><button id="eight" class="num">8</button></td>
+          <td><button id="nine" class="num">9</button></td>
+          <td><button id="mult" class="op">*</button></td>
+        </tr>
+        <tr>
+          <td><button id="clear" class="clear">AC</button></td>
+          <td><button id="zero" class="num">0</button></td>
+          <td><button id="dec" class="op">.</button></td>
+          <td><button id="div" class="op ">/</button></td>
+        </tr>
+        <tr>
+          <td><button id="equal" class="eq">=</button></td>
+        </tr>
+      </table>
+    </section>
+  </section>
+
+  <script src="js/main.js" type="text/javascript"></script>
+</body>
+
+</html>
diff --git a/Calc/js/main.js b/Calc/js/main.js
@@ -0,0 +1,44 @@
+// Grab the input class and pass it into a variable
+const screen = document.getElementById('screen');
+const clearAll = document.getElementById('clear');
+const evaluateBtn = document.getElementById('equal');
+const buttonList = document.querySelectorAll('.op, .num');
+
+const Calc = {
+  clearCalc: function () {
+    screen.value = "";
+  },
+  evaluateCalc: function () {
+    //evaluateBtn.textContent = eval(screen.value),
+    screen.value = eval(screen.value);
+
+  },
+  buttonCalc: function () {
+    // sort through button items
+    for (let i = 0; i < buttonList.length; i++) {
+      buttonList[i].onclick = Calc.buttonVal;
+      console.log(buttonList[i]);
+
+    }
+  },
+  buttonVal: function () {
+    screen.value += screen.textContent;
+  }
+}
+
+// Clear all string items in the input 
+clearAll.addEventListener("click", Calc.clearCalc);
+evaluateBtn.addEventListener("click", Calc.evaluateCalc);
+//buttonList.addEventListener("click", Calc.buttonVal)
+
+
+// Let multiple string items appear on the input field
+
+
+Array.from(buttonList).forEach(function (element) {
+  element.addEventListener('click', function () {
+    buttonList.onclick = Calc.buttonVal;
+    console.log(this.textContent);
+    screen.value += this.textContent;
+  })
+});
diff --git a/README.md b/README.md
@@ -1,135 +1,20 @@
-# 📚 Alumni Learning Plan
+About Project
+========================================
+T
+his is a small calculator project I built. I tried to keep it simple and used it as an opportunity to practice some OOP with JS. It went more or less well. I could have fixed the input field to not include letters but for now this will do. 
 
-A 60 day learning plan to refresh the basics of OOP, get a command of Full Stack Javascript, build clean UIs with React, and practice skills you'll need to be productive team member like advanced git and TDD.
 
 
-## Skills Covered:
+link to project here: https://festive-snyder-19496e.netlify.com
 
-- 💎 Object Oriented Programming
-- 💎 ES6+ Javascript
-- 💎 Node
-- 💎 Mongo
-- 💎 PostgreSQL
-- 💎 React
-- 💎 Redux
-- 💎 React Native
-- 💎 Git/Github
-- 💎 Test Driven Development
+How it was made:
+============================================
 
-## Important Events:
+JavaScript, Html, Css,
 
-- 🗓️ Resilient Coders Meet & Greet (Oct. 11 - 5:30pm @ 50 Milk)
-- 🗓️ Intro to Postgres (Oct. 16 - 6:00pm @ 50 Milk)
-- 🗓️ Build a Full Stack Node App w/ Postgres (Oct. 23 - 6:00pm @ 50 Milk)
-- 🗓️ Creating Reusable React Components w/ Atomic Design (Oct. 30 - 6:00pm @ 50 Milk)
-- 🗓️ Introduction to Test Driven Development (Nov. 6 - 6:00pm @ 50 Milk)
 
-## How it works
-
-The plan is broken down into 8 weeks. Each week will have the following:
-
-- 📖 Important Readings
-- 📼 Supplemental Videos To Watch
-- 💻 Practice Problems
-- 👩🏽‍💻 A project that you will submit via Github to recieve feedback
-- 🚌 Lecture on most Tuesdays @ 6pm
-
-
-## Weekly Plans
-- 🚀 [Week 01: **JS Review**](#week01)
-- 🚀 [Week 02: **PostgreSQL**](#week02)
-
-**Coming Soon**
-- 🚀 [Week 03: **Full Stack JS (Node, Express, PostgreSQL)**](#week03)
-- 🚀 [Week 04: **React**](#week04)
-- 🚀 [Week 05: **Test Driven Development**](#week05)
-- 🚀 [Week 06: **App Week**](#week06)
-- 🚀 [Week 07: **OOP Fundamentals w/ Javascript**](#week07)
-- 🚀 [Week 08: **Computer Science Fundamentals**](#week08)
-
-
-***
-## Week01
-
-*No lecture this week*
-
-| Day 01    | Material     | Why   |
-| ---------|:-------------:| :-----:|
-| Read     | [The JS Way Ch. 01](https://github.com/bpesquet/thejsway/blob/master/manuscript/chapter01.md) | To help refresh the basics of JS |
-| Read     | [The JS Way Ch. 02](https://github.com/bpesquet/thejsway/blob/master/manuscript/chapter02.md) | Learn the new ES6+ variable syntax |
-| Watch    | [JS Fundamental Video](https://youtu.be/vEROU2XtPR8)      | Review of all the major concepts in JS (☠️ WARNING: Not ES6+) |
-| Do       | [Sign Up for JS30](https://javascript30.com/)      | Daily Challenges that will help you learn JS |
-| Do       | [Sign Up for CodeWars](https://www.codewars.com/)  | Daily Challenges that will help you learn JS  |
-
-| Day 02    | Material     | Why   |
-| ---------|:-------------:| :-----:|
-| Read     | [The JS Way Ch. 03](https://github.com/bpesquet/thejsway/blob/master/manuscript/chapter03.md) | Learn proper conditional syntax including switch statements |
-| Read     | [The JS Way Ch. 04](https://github.com/bpesquet/thejsway/blob/master/manuscript/chapter04.md) | Better understand loops |
-| Do       | [JS30 #01](https://javascript30.com/)      | Learn to interact with the DOM && use Audio |
-| Do       | [CodeWars Fundamentals](https://www.codewars.com/)  | JS syntax / problem solving practice  |
-
-| Day 03    | Material     | Why   |
-| ---------|:-------------:| :-----:|
-| Read     | [The JS Way Ch. 05](https://github.com/bpesquet/thejsway/blob/master/manuscript/chapter05.md) | Learn all about functions including new ES6+ fat arrow syntax |
-| Read     | [The JS Way Ch. 06](https://github.com/bpesquet/thejsway/blob/master/manuscript/chapter06.md) | Get comfortable with objects again |
-| Watch    | [JS Object Fundamentals Video](https://youtu.be/-e5h4IGKZRY)      | Review JS Objects |
-| Do       | [CodeWars: 1 Kata](https://www.codewars.com/)  | JS syntax && problem solving practice  |
-
-| Day 04    | Material     | Why   |
-| ---------|:-------------:| :-----:|
-| Read     | [The JS Way Ch. 07](https://github.com/bpesquet/thejsway/blob/master/manuscript/chapter07.md) | Get comfortable with using / manipulating arrays 🚨 IMPORTANT FOR INTERVIEWS |
-| Read     | [The JS Way Ch. 08](https://github.com/bpesquet/thejsway/blob/master/manuscript/chapter08.md) | Learn important string methods 🚨 IMPORTANT FOR INTERVIEWS  |
-| Do       | [JS30 #02](https://javascript30.com/)      | Learn JS Fundamentals && CSS manipulation with JS |
-| Do       | [CodeWars: 1 Kata](https://www.codewars.com/)  | JS syntax && problem solving practice  |
-
-| Day 05    | Material     | Why   |
-| ---------|:-------------:| :-----:|
-| Read     | [The JS Way Ch. 09](https://github.com/bpesquet/thejsway/blob/master/manuscript/chapter09.md) | Dive into the basics of Object Oriented Javascript |
-| Watch    | [JS OOP Crash Course](https://youtu.be/vDJpGenyHaA)      | Review OOJS |
-| Do       | [Build a Simple Calculator using JS OOP best practices](https://github.com/Resilient-Labs/week01-alumni-project-calculator)  | Reinforce OOP and get comfortable submitting PRs on Github  |
-
-| Weekend    | Material     | Why   |
-| ---------|:-------------:| :-----:|
-| Read     | [You Don't Know JS: this & Object Prototypes](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes) | REALLY LEARN JS OOP principles |
-| Do       | Refactor your Calculator and Resubmit  | Reinforce OOP and get comfortable submitting PRs on Github  |
-
-***
-
-## Week02
-*PostgreSQL*
-*LECTURE TUESDAY @ 6pm*
-
-| Day 01    | Material     | Why   |
-| ---------|:-------------:| :-----:|
-| Read     | [Big O Notation Explained](https://medium.freecodecamp.org/big-o-notation-simply-explained-with-illustrations-and-video-87d5a71c0174) | To help refresh the basics of Big O Notation |
-| Watch    | [Big O Video](https://youtu.be/v4cd1O4zkGw)      | Big O explained simply in video |
-| Do       | [CodeWars: 1 Kata](https://www.codewars.com/)  | JS syntax && problem solving practice  |
-
-| Day 02    | Material     | Why   |
-| ---------|:-------------:| :-----:|
-| Read     | The Imposters Handbook - Big O Chapter | Deeper Dive into Big O |
-| Watch    | [MongoDB vs. PostgreSQL](https://youtu.be/eM7hzKwvTq8)      | Video breaks down the differences 🚨 **WATCH BEFORE CLASS**  |
-| Do       | Go to class      | Leon just wants to spend time with you - Also, covering complexity, MongoDB vs. PostgreSQL, and basics of PostgreSQL |
-
-| Day 03    | Material     | Why   |
-| ---------|:-------------:| :-----:|
-| Read     | [PostgreSQL / MySQL comparison](https://blog.panoply.io/postgresql-vs.-mysqld) | Learn all about the difference btw PostgreSQL and MySQL |
-| Watch    | [Great Simple Intro. to PostgreSQL](https://youtu.be/xaWlS9HtWYw)      | Simple intro to PostgreSQL the covers everything we did in class 🚨 **WATCH ALL 4 Videos** |
-| Do       | [CodeWars: 1 Kata](https://www.codewars.com/)  | JS syntax && problem solving practice  |
-
-| Day 04    | Material     | Why   |
-| ---------|:-------------:| :-----:|
-| Do   | If you haven't  yet INSTALL PostgreSQL | Redo the queries from yesterdays video without looking at the answers. Ask for help in #alumni-course  |
-| Do       | [JS30 #06](https://javascript30.com/)      | Learn JS Fundamentals && Yes, we are skipping - doing just the 🤑 money projects 🤑 |
-| Do       | [CodeWars: 1 Kata](https://www.codewars.com/)  | JS syntax && problem solving practice  |
-
-| Day 05    | Material     | Why   |
-| ---------|:-------------:| :-----:|
-| Read     | [ACTIVELY READ: PostgreSQL Tutorial Sections 1 - 3](http://www.postgresqltutorial.com/) | Dive into the basics of PostgreSQL |
-| Do       | [Setup a PostgreSQL DB and do a complex query](https://github.com/Resilient-Labs/week02-alumni-project-postgres-query)  | Reinforce PostgreSQL learning from this week  |
-
-| Weekend    | Material     | Why   |
-| ---------|:-------------:| :-----:|
-| Read     | [ACTIVELY READ: PostgreSQL Tutorial Sections 4 - 9](http://www.postgresqltutorial.com/) | REALLY LEARN PostgreSQL |
-
-***
+what I've learned
+============================================
+-I've learned that writing out your sudo code before anything else goes a long way.
+-I used the eval method in this project but I read that it's dangerous and should be avoided. In the future I'm going to find alternatives.
+-OOP made my code cleaner,readable, and organized