diff --git a/Calc/css/backCalc7.jpg b/Calc/css/backCalc7.jpg new file mode 100644 index 0000000..8ee7a27 Binary files /dev/null and b/Calc/css/backCalc7.jpg differ diff --git a/Calc/css/background.jpg b/Calc/css/background.jpg new file mode 100644 index 0000000..648067b Binary files /dev/null and b/Calc/css/background.jpg differ diff --git a/Calc/css/style.css b/Calc/css/style.css new file mode 100644 index 0000000..25379a3 --- /dev/null +++ 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 new file mode 100644 index 0000000..5a7e6c1 --- /dev/null +++ b/Calc/index.html @@ -0,0 +1,52 @@ + + + + + + + + + + + +
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + + + \ No newline at end of file diff --git a/Calc/js/main.js b/Calc/js/main.js new file mode 100644 index 0000000..17d2501 --- /dev/null +++ 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; + }) +}); \ No newline at end of file diff --git a/README.md b/README.md index a17d224..986ba92 100644 --- 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