From 9e01ecea9146f7487578f1f4849886e8d99f9b16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enrique=20Mungu=C3=ADa?= Date: Sat, 22 Apr 2017 22:55:11 -0700 Subject: [PATCH 1/8] migrar archivos a es6 --- .gitignore | 58 ++++++++++++++++++++++++++++ index.html | 5 +-- package.json | 19 +++++++++ scripts-es6/datastore.js | 23 +++++++++++ scripts-es6/main.js | 1 + datastore.js => scripts/datastore.js | 0 main.js => scripts/main.js | 0 order.js => scripts/order.js | 0 store.js => scripts/store.js | 0 webpack.config.js | 41 ++++++++++++++++++++ 10 files changed, 143 insertions(+), 4 deletions(-) create mode 100644 .gitignore create mode 100644 package.json create mode 100644 scripts-es6/datastore.js create mode 100644 scripts-es6/main.js rename datastore.js => scripts/datastore.js (100%) rename main.js => scripts/main.js (100%) rename order.js => scripts/order.js (100%) rename store.js => scripts/store.js (100%) create mode 100644 webpack.config.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..621038f --- /dev/null +++ b/.gitignore @@ -0,0 +1,58 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# Typescript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env diff --git a/index.html b/index.html index 32c0bad..1a84982 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,7 @@ Pizza Place - - - - +

Pizza Place

diff --git a/package.json b/package.json new file mode 100644 index 0000000..8c62773 --- /dev/null +++ b/package.json @@ -0,0 +1,19 @@ +{ + "name": "pizzaplace", + "version": "1.0.0", + "description": "JavaScript POO", + "main": "webpack.config.js", + "devDependencies": { + "babel-core": "^6.24.1", + "babel-loader": "^6.4.1", + "babel-preset-es2015-native-modules": "^6.9.4", + "webpack": "^2.3.3", + "webpack-dev-server": "2" + }, + "scripts": { + "dev": "webpack-dev-server", + "build": "webpack --progress --watch" + }, + "author": "enrique7mc", + "license": "ISC" +} diff --git a/scripts-es6/datastore.js b/scripts-es6/datastore.js new file mode 100644 index 0000000..205dcce --- /dev/null +++ b/scripts-es6/datastore.js @@ -0,0 +1,23 @@ +class DataStore { + constructor() { + this.data = {}; + } + + add(key, val) { + this.data[key] = val; + } + + get(key) { + return this.data[key]; + } + + getAll() { + return this.data; + } + + remove(key) { + delete this.data[key]; + } +} + +export default DataStore; diff --git a/scripts-es6/main.js b/scripts-es6/main.js new file mode 100644 index 0000000..3716363 --- /dev/null +++ b/scripts-es6/main.js @@ -0,0 +1 @@ +console.log('pizza place es6'); diff --git a/datastore.js b/scripts/datastore.js similarity index 100% rename from datastore.js rename to scripts/datastore.js diff --git a/main.js b/scripts/main.js similarity index 100% rename from main.js rename to scripts/main.js diff --git a/order.js b/scripts/order.js similarity index 100% rename from order.js rename to scripts/order.js diff --git a/store.js b/scripts/store.js similarity index 100% rename from store.js rename to scripts/store.js diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..18166e7 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,41 @@ +const webpack = require('webpack'); +const path = require('path'); + +const nodeEnv = process.env.NODE_ENV || 'production'; + +module.exports = { + devtool: 'source-map', + entry: { + filename: './scripts-es6/main.js' + }, + output: { + filename: '_build/bundle.js' + }, + module: { + loaders: [ + { + test: /\.js$/, + exclude: /node_modules/, + loader: 'babel-loader', + query: { + presets: ['es2015-native-modules'] + } + } + ] + }, + plugins: [ + // uglify js + new webpack.optimize.UglifyJsPlugin({ + compress: { warnings: false }, + output: { comments: false }, + sourceMap: true + }), + // env plugin + new webpack.DefinePlugin({ + 'proccess.env': { NODE_ENV: JSON.stringify(nodeEnv) } + }) + ], + devServer: { + contentBase: path.resolve(__dirname, './'), + } +}; From 85c864c2156d82c27184e87dd61ccb6e9ef13767 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enrique=20Mungu=C3=ADa?= Date: Sun, 23 Apr 2017 20:26:12 -0700 Subject: [PATCH 2/8] =?UTF-8?q?a=C3=B1ade=20order.js?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts-es6/main.js | 11 ++++++++++- scripts-es6/order.js | 18 ++++++++++++++++++ scripts-es6/store.js | 27 +++++++++++++++++++++++++++ 3 files changed, 55 insertions(+), 1 deletion(-) create mode 100644 scripts-es6/order.js create mode 100644 scripts-es6/store.js diff --git a/scripts-es6/main.js b/scripts-es6/main.js index 3716363..1d3d24e 100644 --- a/scripts-es6/main.js +++ b/scripts-es6/main.js @@ -1 +1,10 @@ -console.log('pizza place es6'); +import DataStore from './datastore'; +import Store from './store'; +import { PizzaOrder } from './order'; + +const store = new Store('ncc-1701', new DataStore()); +const order = new PizzaOrder('enrique@devcode.com', 'large', 'meats'); +store.createOrder(order); +store.printOrders(); +store.deliverOrder('enrique@devcode.com'); +store.printOrders(); diff --git a/scripts-es6/order.js b/scripts-es6/order.js new file mode 100644 index 0000000..f870de3 --- /dev/null +++ b/scripts-es6/order.js @@ -0,0 +1,18 @@ +class BaseOrder { + constructor(email) { + this.email = email; + } +} + +class PizzaOrder extends BaseOrder { + constructor(email, size, speciality) { + super(email); + this.size = size; + this.speciality = speciality; + } +} + +export { + BaseOrder, + PizzaOrder +}; diff --git a/scripts-es6/store.js b/scripts-es6/store.js new file mode 100644 index 0000000..4d68713 --- /dev/null +++ b/scripts-es6/store.js @@ -0,0 +1,27 @@ +class Store { + constructor(storeId, db) { + this.storeId = storeId; + this.db = db; + } + + createOrder(order) { + console.log(`Adding order for ${order.email}`); + this.db.add(order.email, order); + } + + deliverOrder(email) { + console.log(`Delivering order for ${email}`); + this.db.remove(email); + } + + printOrders() { + const customerEmails = Object.keys(this.db.getAll()); + + console.log(`Store #${this.storeId} has pending orders`); + customerEmails.forEach((email) => { + console.log(this.db.get(email)); + }) + } +} + +export default Store; From 28340ce8f5f636ef3df774723b4d0410994dc953 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enrique=20Mungu=C3=ADa?= Date: Mon, 24 Apr 2017 19:57:53 -0700 Subject: [PATCH 3/8] =?UTF-8?q?a=C3=B1ade=20displayOrder?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts-es6/main.js | 1 + scripts-es6/order.js | 9 +++++++++ 2 files changed, 10 insertions(+) diff --git a/scripts-es6/main.js b/scripts-es6/main.js index 1d3d24e..12e7058 100644 --- a/scripts-es6/main.js +++ b/scripts-es6/main.js @@ -6,5 +6,6 @@ const store = new Store('ncc-1701', new DataStore()); const order = new PizzaOrder('enrique@devcode.com', 'large', 'meats'); store.createOrder(order); store.printOrders(); +order.displayOrder(); store.deliverOrder('enrique@devcode.com'); store.printOrders(); diff --git a/scripts-es6/order.js b/scripts-es6/order.js index f870de3..a6ae624 100644 --- a/scripts-es6/order.js +++ b/scripts-es6/order.js @@ -2,6 +2,10 @@ class BaseOrder { constructor(email) { this.email = email; } + + displayOrder() { + console.log(`Order for: ${this.email}`); + } } class PizzaOrder extends BaseOrder { @@ -10,6 +14,11 @@ class PizzaOrder extends BaseOrder { this.size = size; this.speciality = speciality; } + + displayOrder() { + super.displayOrder(); + console.log(`Size: ${this.size}`); + } } export { From c3fac30ae6f2c68bea96dbde4e403c064498a1b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enrique=20Mungu=C3=ADa?= Date: Mon, 24 Apr 2017 20:14:45 -0700 Subject: [PATCH 4/8] =?UTF-8?q?a=C3=B1ade=20displayOrder?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts-es6/main.js | 8 ++++++-- scripts-es6/order.js | 29 +++++++++-------------------- 2 files changed, 15 insertions(+), 22 deletions(-) diff --git a/scripts-es6/main.js b/scripts-es6/main.js index 12e7058..404f5ca 100644 --- a/scripts-es6/main.js +++ b/scripts-es6/main.js @@ -3,9 +3,13 @@ import Store from './store'; import { PizzaOrder } from './order'; const store = new Store('ncc-1701', new DataStore()); -const order = new PizzaOrder('enrique@devcode.com', 'large', 'meats'); +const order = PizzaOrder({ + email: 'enrique@devcode.com', + size: 'large', + speciality: 'meats' +}); store.createOrder(order); store.printOrders(); -order.displayOrder(); +// order.displayOrder(); store.deliverOrder('enrique@devcode.com'); store.printOrders(); diff --git a/scripts-es6/order.js b/scripts-es6/order.js index a6ae624..79737f1 100644 --- a/scripts-es6/order.js +++ b/scripts-es6/order.js @@ -1,25 +1,14 @@ -class BaseOrder { - constructor(email) { - this.email = email; - } +const email = { email: '' }; +const size = { size: 'medium' }; +const speciality = { speciality: 'cheese' }; - displayOrder() { - console.log(`Order for: ${this.email}`); - } -} - -class PizzaOrder extends BaseOrder { - constructor(email, size, speciality) { - super(email); - this.size = size; - this.speciality = speciality; - } +const BaseOrder = (params) => { + return Object.assign({}, email, params); +}; - displayOrder() { - super.displayOrder(); - console.log(`Size: ${this.size}`); - } -} +const PizzaOrder = (params) => { + return Object.assign({}, email, size, speciality, params); +}; export { BaseOrder, From 5bd6bf79de423a50b830a600ec6339c574f305c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enrique=20Mungu=C3=ADa?= Date: Mon, 24 Apr 2017 20:23:31 -0700 Subject: [PATCH 5/8] =?UTF-8?q?a=C3=B1ade=20m=C3=A9todo=20a=20BaseOrder=20?= =?UTF-8?q?y=20PizzaOrder?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts-es6/main.js | 2 +- scripts-es6/order.js | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/scripts-es6/main.js b/scripts-es6/main.js index 404f5ca..bb0815d 100644 --- a/scripts-es6/main.js +++ b/scripts-es6/main.js @@ -10,6 +10,6 @@ const order = PizzaOrder({ }); store.createOrder(order); store.printOrders(); -// order.displayOrder(); +order.displayOrder(); store.deliverOrder('enrique@devcode.com'); store.printOrders(); diff --git a/scripts-es6/order.js b/scripts-es6/order.js index 79737f1..ffcdd62 100644 --- a/scripts-es6/order.js +++ b/scripts-es6/order.js @@ -1,13 +1,18 @@ const email = { email: '' }; const size = { size: 'medium' }; const speciality = { speciality: 'cheese' }; +const displayOrder = { + displayOrder: function () { + console.log(`Order for: ${this.email}`); + } +} const BaseOrder = (params) => { - return Object.assign({}, email, params); + return Object.assign({}, email, displayOrder, params); }; const PizzaOrder = (params) => { - return Object.assign({}, email, size, speciality, params); + return Object.assign({}, email, size, displayOrder, speciality, params); }; export { From 8d6a1d0ff33102d9dc96845fb919128948dbb42a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enrique=20Mungu=C3=ADa?= Date: Tue, 25 Apr 2017 20:37:22 -0700 Subject: [PATCH 6/8] first commit --- README.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..fb27c44 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +# Curso-de-POO-JavaScript From 95a4da3b05b071a83ec731fa10d2fd686350fa07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enrique=20Mungu=C3=ADa?= Date: Wed, 26 Apr 2017 06:50:56 -0700 Subject: [PATCH 7/8] =?UTF-8?q?a=C3=B1ade=20front=20end=20para=20a=C3=B1ad?= =?UTF-8?q?ir=20=C3=B3rdenes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 61 +++++++++++++++++++++++++++++++++++++++++--- scripts-es6/main.js | 37 +++++++++++++++++++-------- scripts-es6/order.js | 34 +++++++++++++++++++++--- 3 files changed, 115 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index 1a84982..10a9a77 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,64 @@ - - Pizza Place + + Pizza place + - -

Pizza Place

+ +

Pizza Place

+ +

Pending Orders:

diff --git a/scripts-es6/main.js b/scripts-es6/main.js index bb0815d..7dd2729 100644 --- a/scripts-es6/main.js +++ b/scripts-es6/main.js @@ -3,13 +3,30 @@ import Store from './store'; import { PizzaOrder } from './order'; const store = new Store('ncc-1701', new DataStore()); -const order = PizzaOrder({ - email: 'enrique@devcode.com', - size: 'large', - speciality: 'meats' -}); -store.createOrder(order); -store.printOrders(); -order.displayOrder(); -store.deliverOrder('enrique@devcode.com'); -store.printOrders(); +const form = document.querySelector('#pizza-form'); +form.addEventListener('submit', onSubmit); +const checklist = document.querySelector('#checklist'); + +// Event Handlers +function onSubmit(e) { + e.preventDefault(); + const email = form.querySelector('#emailInput').value; + const size = form.querySelector('input[name="size"]:checked').value; + const select = form.querySelector('#speciality'); + const speciality = select.options[select.selectedIndex].value; + const newOrder = new PizzaOrder({ + email, + size, + speciality + }); + store.createOrder(newOrder); + addToPending(newOrder); +} + +// Funciones +function addToPending(order) { + const orderDiv = document.createElement('div'); + const newContent = document.createTextNode(order.toString()); + orderDiv.appendChild(newContent); + checklist.appendChild(orderDiv); +} diff --git a/scripts-es6/order.js b/scripts-es6/order.js index ffcdd62..d287829 100644 --- a/scripts-es6/order.js +++ b/scripts-es6/order.js @@ -1,18 +1,46 @@ +/* // Herencia con clases +class BaseOrder { + constructor(email) { + this.email = email; + } +} + +class PizzaOrder extends BaseOrder { + constructor(email, size, speciality) { + super(email); + this.size = size; + this.speciality = speciality; + } +} + +export { + BaseOrder, + PizzaOrder +}; +*/ + +// Composición const email = { email: '' }; const size = { size: 'medium' }; const speciality = { speciality: 'cheese' }; const displayOrder = { displayOrder: function () { - console.log(`Order for: ${this.email}`); + console.log('Order for: ' + this.email); } -} +}; const BaseOrder = (params) => { return Object.assign({}, email, displayOrder, params); }; +const toString = { + toString: function () { + return `${this.email} - ${this.size} - ${this.speciality}`; + } +}; + const PizzaOrder = (params) => { - return Object.assign({}, email, size, displayOrder, speciality, params); + return Object.assign({}, email, size, speciality, displayOrder, toString, params); }; export { From 1e5a3f201c1a23750849194428d80dbf98f41577 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enrique=20Mungu=C3=ADa?= Date: Wed, 26 Apr 2017 08:43:19 -0700 Subject: [PATCH 8/8] Update README.md --- README.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index fb27c44..5e14503 100644 --- a/README.md +++ b/README.md @@ -1 +1,15 @@ -# Curso-de-POO-JavaScript +# Curso POO con JavaScript + +## Pizza Place + +Aplicación simple para demostrar conceptos de Programación Orientada a Objetos con JavaScript + +Incluye diferentes *branches* para cada uno de los capítulos. + +Requiere [Node JS](https://nodejs.org) instalado + +**Uso** +- `git clone` o descargar como `.zip` +- `npm install` +- `npm run dev` +- Abrir navegador en `localhost:8080`