├── LICENSE ├── README.md ├── section 2 ├── README.txt ├── index.html ├── js │ └── index.js └── license.txt ├── section 3 ├── 3.3 │ ├── README.txt │ ├── index.html │ ├── js │ │ └── index.js │ └── license.txt ├── 3.4 │ ├── README.txt │ ├── index.html │ ├── js │ │ └── index.js │ └── license.txt └── 3.5 │ ├── README.txt │ ├── index.html │ ├── js │ └── index.js │ └── license.txt ├── section 4 ├── 4.1 │ ├── README.txt │ ├── index.html │ ├── js │ │ └── index.js │ └── license.txt ├── 4.2 │ ├── README.txt │ ├── index.html │ ├── js │ │ └── index.js │ └── license.txt └── 4.3 │ ├── README.txt │ ├── index.html │ ├── js │ └── index.js │ └── license.txt ├── section 5 ├── 5.1 │ ├── README.txt │ ├── index.html │ ├── js │ │ └── index.js │ └── license.txt ├── 5.3 │ ├── README.txt │ ├── babel │ │ └── index.babel │ ├── index.html │ ├── js │ │ └── index.js │ └── license.txt ├── 5.3_1 │ ├── README.txt │ ├── index.html │ ├── js │ │ └── index.js │ └── license.txt └── 5.4 │ ├── README.txt │ ├── index.html │ ├── js │ └── index.js │ └── license.txt ├── section 6 ├── 6.1.1 │ ├── README.txt │ ├── index.html │ ├── js │ │ └── index.js │ └── license.txt └── 6.1.2 │ ├── README.txt │ ├── index.html │ └── license.txt ├── section 7 ├── 7.1_solution │ ├── README.txt │ ├── index.html │ ├── js │ │ └── index.js │ └── license.txt ├── 7.1_task │ ├── README.txt │ ├── index.html │ ├── js │ │ └── index.js │ └── license.txt ├── 7.2_solution │ ├── README.txt │ ├── index.html │ ├── js │ │ └── index.js │ └── license.txt ├── 7.2_task │ ├── README.txt │ ├── index.html │ ├── js │ │ └── index.js │ └── license.txt ├── 7.3_solution │ ├── README.txt │ ├── index.html │ ├── js │ │ └── index.js │ └── license.txt ├── 7.4_solution │ ├── README.txt │ ├── index.html │ ├── js │ │ └── index.js │ └── license.txt └── 7.4_task │ ├── README.txt │ ├── index.html │ ├── js │ └── index.js │ └── license.txt └── section 8 ├── 8.1_solution ├── README.txt ├── index.html ├── js │ └── index.js └── license.txt ├── 8.1_task ├── README.txt ├── index.html ├── js │ └── index.js └── license.txt ├── 8.2_solution ├── README.txt ├── index.html ├── js │ └── index.js └── license.txt ├── 8.3_solution ├── README.txt ├── index.html ├── js │ └── index.js └── license.txt └── 8.3_task ├── README.txt ├── index.html ├── js └── index.js └── license.txt /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Packt 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## [Get this title for $10 on Packt's Spring Sale](https://www.packt.com/V13713?utm_source=github&utm_medium=packt-github-repo&utm_campaign=spring_10_dollar_2022) 2 | ----- 3 | For a limited period, all eBooks and Videos are only $10. All the practical content you need \- by developers, for developers 4 | 5 | # Cracking the Coding Interview: Object Oriented Programming [Video] 6 | This is the code repository for [Cracking the Coding Interview: Object Oriented Programming]](https://www2.packtpub.com/application-development/cracking-coding-interview-object-oriented-programming-video), published by [Packt](https://www.packtpub.com/?utm_source=github). It contains all the supporting project files necessary to work through the video course from start to finish. 7 | ## About the Video Course 8 | Are you afraid of your interview and want to practice before the final day? This course will be a perfect guide for you and will help you nail questions in your coding interview related to the Object Oriented Programming (OOP) paradigm. We have adopted a language-agnostic approach for our course, with JavaScript as our main language. 9 | This course sets out to provide developers with the necessary tools to ace their next interview by providing insights into advanced JavaScript concepts, using one of the best-known programming paradigms over the last 40 years in software development. This course will strengthen your foundations in that area and supply practical questions that will serve as a teaser for the kind of questions expected in a coding interview. You will learn how OOP has advantages which incorporate modularity and reusability. 10 | After each section, you’ll have a task which will help you gain confidence in the OOP paradigm. By the end of the course, you will be confident enough to nail any questions on the OOP paradigm that can be asked during a technical interview. 11 | 12 |

What You Will Learn

13 |
14 |
18 | 19 | ## Instructions and Navigation 20 | ### Assumed Knowledge 21 | NA 22 | ### Technical Requirements 23 | This course has the following software requirements:
24 | Atom IDE, Latest Version 25 | Node.js LTS 8.9.1 Installed 26 | 27 | ## Related Products 28 | * [Cracking the Coding Interview: Concurrency and Parallelism [Video]](https://www2.packtpub.com/application-development/cracking-coding-interview-concurrency-and-parallelism-video) 29 | 30 | * [A JavaScript War Card Game Project from Scratch [Video]](https://www.packtpub.com/application-development/javascript-war-card-game-project-scratch-video?utm_source=github&utm_medium=repository&utm_campaign=9781789809459) 31 | 32 | * [Build a Car Driving Game from Scratch using JavaScript [Video]](https://www.packtpub.com/application-development/build-car-driving-game-scratch-using-javascript-video?utm_source=github&utm_medium=repository&utm_campaign=9781838824648) 33 | 34 | -------------------------------------------------------------------------------- /section 2/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/sonali-packt/pen/QRBgyo. 2 | 3 | -------------------------------------------------------------------------------- /section 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | typeof vs instanceof, duck typing 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /section 2/js/index.js: -------------------------------------------------------------------------------- 1 | const a = true // boolean 2 | const b = null // null 3 | const c = undefined // undefined 4 | const d = 4 // number 5 | const e = 'hello' // string 6 | const f = Symbol('symbol description') // symbol 7 | 8 | const g = { 9 | key: 'value' 10 | } 11 | 12 | // string String 13 | // boolean Boolean 14 | // number Number 15 | // symbol Symbol 16 | 17 | class A { 18 | constructor() { 19 | this.x = 12; 20 | } 21 | } 22 | class B extends A { 23 | m(){} 24 | } 25 | const instance = new B(); 26 | instance.y = 12; 27 | delete instance.x; 28 | console.log(instance instanceof A); 29 | instance.m && instance.m(); -------------------------------------------------------------------------------- /section 2/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 17 | 18 | -------------------------------------------------------------------------------- /section 3/3.3/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/grzim/pen/dLVQWr. 2 | 3 | -------------------------------------------------------------------------------- /section 3/3.3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | proto 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /section 3/3.3/js/index.js: -------------------------------------------------------------------------------- 1 | const a = {x: 1}; 2 | const b = {y: 2}; 3 | const c = {z: 3}; 4 | 5 | Object.setPrototypeOf(a, b); 6 | Object.setPrototypeOf(b, c); -------------------------------------------------------------------------------- /section 3/3.3/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | -------------------------------------------------------------------------------- /section 3/3.4/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/grzim/pen/XwKjWb. 2 | 3 | -------------------------------------------------------------------------------- /section 3/3.4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | constructor functions and prototypes 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /section 3/3.4/js/index.js: -------------------------------------------------------------------------------- 1 | function Constructor1(x) { 2 | this.x = x; 3 | } 4 | 5 | function Constructor2() { 6 | this.y = 12; 7 | } 8 | 9 | Constructor1.prototype.f = function() { 10 | console.log(this); 11 | } 12 | 13 | Constructor1.prototype.__proto__ = new Constructor2(); -------------------------------------------------------------------------------- /section 3/3.4/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 17 | 18 | -------------------------------------------------------------------------------- /section 3/3.5/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/grzim/pen/vMejzZ. 2 | 3 | -------------------------------------------------------------------------------- /section 3/3.5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ES6 classes and prototypes 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /section 3/3.5/js/index.js: -------------------------------------------------------------------------------- 1 | class A { 2 | constructor(x) { 3 | this.x = x; 4 | } 5 | show() { 6 | console.log(this.x); 7 | } 8 | } 9 | 10 | class B extends A { 11 | constructor(x) { 12 | super(x); 13 | this.y = 12; 14 | } 15 | show() { 16 | console.log(this.y); 17 | } 18 | } 19 | 20 | const b = new B(10); 21 | console.log(b); -------------------------------------------------------------------------------- /section 3/3.5/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | -------------------------------------------------------------------------------- /section 4/4.1/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/grzim/pen/wZpYzm. 2 | 3 | -------------------------------------------------------------------------------- /section 4/4.1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Closures, module and revealing module pattern 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /section 4/4.1/js/index.js: -------------------------------------------------------------------------------- 1 | const obj = { 2 | x: 12 3 | } 4 | 5 | const a = (function() { 6 | const a = 12; 7 | return { 8 | x: 12, 9 | m() { 10 | return a; 11 | } 12 | } 13 | })(); 14 | console.log(a) -------------------------------------------------------------------------------- /section 4/4.1/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | -------------------------------------------------------------------------------- /section 4/4.2/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/grzim/pen/VNQgVp. 2 | 3 | -------------------------------------------------------------------------------- /section 4/4.2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Encapsulation and classes 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /section 4/4.2/js/index.js: -------------------------------------------------------------------------------- 1 | const SampleClass = (function() { 2 | let count = 0; 3 | return class { 4 | constructor() { 5 | } 6 | value() { 7 | return count; 8 | } 9 | increment() { 10 | count++; 11 | } 12 | } 13 | })(); 14 | 15 | const sample = new SampleClass(); 16 | console.log(sample.value()); -------------------------------------------------------------------------------- /section 4/4.2/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | -------------------------------------------------------------------------------- /section 4/4.3/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/grzim/pen/eoVXGZ. 2 | 3 | -------------------------------------------------------------------------------- /section 4/4.3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Methods, static methods and polymorphism 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /section 4/4.3/js/index.js: -------------------------------------------------------------------------------- 1 | class SampleClass { 2 | static method2(){ 3 | console.log(this); 4 | }; 5 | constructor(){}; 6 | method(){}; 7 | } 8 | 9 | class SampleClass2 extends SampleClass { 10 | static method2(){ 11 | console.log('this'); 12 | }; 13 | } 14 | 15 | const obj = new SampleClass(); 16 | SampleClass.prop = 12; 17 | console.log(SampleClass2.method2()) -------------------------------------------------------------------------------- /section 4/4.3/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | -------------------------------------------------------------------------------- /section 5/5.1/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/grzim/pen/WWZWqY. 2 | 3 | -------------------------------------------------------------------------------- /section 5/5.1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | constructor composition 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /section 5/5.1/js/index.js: -------------------------------------------------------------------------------- 1 | function Constructor1(x, y) { 2 | this.x = x; 3 | this.y = y; 4 | } 5 | 6 | Constructor1.prototype = { 7 | sum() { 8 | let sum = 0; 9 | for(const prop in this) { 10 | sum += this[prop]; 11 | } 12 | return sum; 13 | } 14 | } 15 | 16 | function Constructor2(a, b) { 17 | Constructor1.call(this, a, b) 18 | this.a = a; 19 | this.b = b; 20 | } 21 | 22 | Constructor2.prototype = { 23 | show() { 24 | console.log(this); 25 | } 26 | } 27 | 28 | Constructor2.prototype.__proto__ = Constructor1.prototype; 29 | 30 | const a = new Constructor2(10, 12); 31 | console.log(a.sum()) -------------------------------------------------------------------------------- /section 5/5.1/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | -------------------------------------------------------------------------------- /section 5/5.3/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/grzim/pen/mObpxj. 2 | 3 | -------------------------------------------------------------------------------- /section 5/5.3/babel/index.babel: -------------------------------------------------------------------------------- 1 | function mixin(Parent){ 2 | return class A extends Parent{ 3 | constructor(x, ...args){ 4 | super(...args); // calling parent constructor 5 | this.x = x; // augmentation 6 | } 7 | } 8 | } 9 | 10 | class A { 11 | constructor(x,y){ 12 | this.x = x; 13 | this.y = y; 14 | } 15 | } 16 | 17 | const Mixed = mixin(A); // returning augumented class 18 | const mixed = new Mixed(1,2,3); 19 | console.log(mixed); 20 | 21 | -------------------------------------------------------------------------------- /section 5/5.3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ES6 class mixins 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /section 5/5.3/js/index.js: -------------------------------------------------------------------------------- 1 | function mixin(Parent) { 2 | return class A extends Parent { 3 | constructor(x, ...args) { 4 | super(...args); // calling parent constructor 5 | this.x = x; // augmentation 6 | }}; 7 | 8 | } 9 | 10 | class A { 11 | constructor(x, y) { 12 | this.x = x; 13 | this.y = y; 14 | }} 15 | 16 | 17 | const Mixed = mixin(A); // returning augumented class 18 | const mixed = new Mixed(1, 2, 3); 19 | console.log(mixed); -------------------------------------------------------------------------------- /section 5/5.3/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 17 | 18 | -------------------------------------------------------------------------------- /section 5/5.3_1/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/grzim/pen/yEmdVp. 2 | 3 | -------------------------------------------------------------------------------- /section 5/5.3_1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | indeterministic polimorfism 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /section 5/5.3_1/js/index.js: -------------------------------------------------------------------------------- 1 | const A = class { 2 | show() { 3 | console.log('A'); 4 | } 5 | } 6 | const B = class { 7 | show() { 8 | console.log('B'); 9 | } 10 | } 11 | const random = Math.random(); 12 | 13 | const MyRandomClass = class extends (random > 0.5 ? A : B) {}; 14 | 15 | new MyRandomClass().show(); -------------------------------------------------------------------------------- /section 5/5.3_1/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | -------------------------------------------------------------------------------- /section 5/5.4/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/grzim/pen/KYyMRm. 2 | 3 | -------------------------------------------------------------------------------- /section 5/5.4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | abstract class pattern 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /section 5/5.4/js/index.js: -------------------------------------------------------------------------------- 1 | class Abstract { 2 | constructor() { 3 | if (new.target === Abstract) { 4 | throw new TypeError("Abstract class cannot be instantiated"); 5 | } 6 | if (!this.show) { 7 | throw new TypeError( 8 | "Method show has to be implemented by a successor class" 9 | ); 10 | } 11 | } 12 | } 13 | 14 | class AnotherClass extends Abstract { 15 | show() {} 16 | } -------------------------------------------------------------------------------- /section 5/5.4/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | -------------------------------------------------------------------------------- /section 6/6.1.1/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/grzim/pen/MRGWGY. 2 | 3 | -------------------------------------------------------------------------------- /section 6/6.1.1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Thinking in an OOP way 1 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /section 6/6.1.1/js/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | Make a functionality to: 3 | create objects with name, surname, and generated id 4 | log the properties 5 | add object to array with the max length of array set 6 | */ 7 | 8 | class User { 9 | constructor(name, surname) { 10 | this.name = name; 11 | this.surname = surname; 12 | this.id = this.name.slice(0, 3) + this.surname.slice(0, 3); 13 | } 14 | // method tightly coupled wth the class data 15 | print() { 16 | console.log(this.name, this.surname, this.id); 17 | } 18 | } 19 | 20 | class UserCollection { 21 | constructor(limit) { 22 | this.users = []; 23 | this.limit = limit; 24 | } 25 | add(user) { 26 | if(this.users.length < this.limit) this.users.push(user); 27 | } 28 | } 29 | 30 | const adam = new User('Adam', 'Kovalsky'); 31 | const userCollection = new UserCollection(); 32 | userCollection.add(adam); -------------------------------------------------------------------------------- /section 6/6.1.1/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | -------------------------------------------------------------------------------- /section 6/6.1.2/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/grzim/pen/NmYmzN. 2 | 3 | -------------------------------------------------------------------------------- /section 6/6.1.2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | oop way 2 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 | 19 | 20 |
21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /section 6/6.1.2/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | -------------------------------------------------------------------------------- /section 7/7.1_solution/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/grzim/pen/eaZXrw. 2 | 3 | -------------------------------------------------------------------------------- /section 7/7.1_solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Constructor function solution 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /section 7/7.1_solution/js/index.js: -------------------------------------------------------------------------------- 1 | /* Create a constructor function User that will produce objects with properties: name, surname, account and method merge. 2 | Name, surname, account are fields. 3 | Merge is a method fulfilling criterias: 4 | - should expect to get another User instance as an argument 5 | - should return a new object with the same structure (with all 4 properties) 6 | - properties name, surname and account of the returned object should be concatenation/sum of names, surnames, accounts from provided object and object from which a method has been called */ 7 | 8 | function User(name, surname, account) { 9 | this.name = name; 10 | this.surname = surname; 11 | this.account = account; 12 | } 13 | 14 | User.prototype.merge = function(user) { 15 | return new User(`${this.name} ${user.name}`, `${this.surname} ${user.surname}`, this.account + user.account); 16 | } 17 | 18 | // Example of usage: 19 | const u1 = new User('adam', 'kovalsky', 1023); 20 | const u2 = new User('john', 'smith', 3421); 21 | const merged = u1.merge(u2); 22 | console.log(merged); 23 | /* 24 | The last variable called 'merged' is an object: { 25 | name: "adam john", 26 | surname: "kovalsky smith", 27 | account: 4444, 28 | merge: function 29 | } 30 | */ -------------------------------------------------------------------------------- /section 7/7.1_solution/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 17 | 18 | -------------------------------------------------------------------------------- /section 7/7.1_task/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/grzim/pen/xeRVvR. 2 | 3 | -------------------------------------------------------------------------------- /section 7/7.1_task/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Constructor function task 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /section 7/7.1_task/js/index.js: -------------------------------------------------------------------------------- 1 | /* Create a constructor function User that will produce objects with properties: name, surname, account and method merge. 2 | Name, surname, account are fields. 3 | Merge is a method fulfilling criterias: 4 | - should expect to get another User instance as an argument 5 | - should return a new object with the same structure (with all 4 properties) 6 | - properties name, surname and account of the returned object should be concatenation/sum of names, surnames, accounts from provided object and object from which a method has been called */ 7 | 8 | // Example of usage: 9 | 10 | /* 11 | const u1 = new User('adam', 'kovalsky', 1023); 12 | const u2 = new User('john', 'smith', 3421); 13 | const merged = u1.merge(u2); 14 | */ 15 | 16 | 17 | The last variable called 'merged' is an object: { 18 | name: "adam john", 19 | surname: "kovalsky smith", 20 | account: 4444, 21 | merge: function 22 | } 23 | */ -------------------------------------------------------------------------------- /section 7/7.1_task/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | -------------------------------------------------------------------------------- /section 7/7.2_solution/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/grzim/pen/qGZGWK. 2 | 3 | -------------------------------------------------------------------------------- /section 7/7.2_solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Fix id solution advanced 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /section 7/7.2_solution/js/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | Look at the following code: 3 | */ 4 | 5 | function Item(){ 6 | this.id = Math.floor(Math.random() * 100); 7 | } 8 | 9 | function ElectronicItem(name) { 10 | if(this.ids.length === 101) console.error('max number of items reached') 11 | else { 12 | this.name = name; 13 | do { 14 | Item.call(this); 15 | } while(this.ids.includes(this.id)) 16 | } 17 | } 18 | ElectronicItem.prototype = { 19 | ids: [] 20 | } 21 | 22 | const iphone = new ElectronicItem('iPhone'); 23 | const galaxyWatch = new ElectronicItem('Galaxy Watch'); 24 | 25 | console.log(iphone); 26 | console.log(galaxyWatch); 27 | 28 | /* 1) why the id is the same for both instances? 29 | 2) how to change ElectronicItem in order to produce objects with different ids? */ -------------------------------------------------------------------------------- /section 7/7.2_solution/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 17 | 18 | -------------------------------------------------------------------------------- /section 7/7.2_task/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/grzim/pen/xePOzy. 2 | 3 | -------------------------------------------------------------------------------- /section 7/7.2_task/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Fix id 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /section 7/7.2_task/js/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | Look at the following code: 3 | */ 4 | 5 | function Item(){ 6 | this.id = Math.floor(Math.random() * 100); 7 | } 8 | 9 | function ElectronicItem(name) { 10 | this.name = name; 11 | Item.call(this); 12 | } 13 | 14 | 15 | const iphone = new ElectronicItem('iPhone'); 16 | const galaxyWatch = new ElectronicItem('Galaxy Watch'); 17 | 18 | console.log(iphone); 19 | console.log(galaxyWatch); 20 | 21 | /* 1) why the id is the same for both instances? 22 | 2) how to change ElectronicItem in order to produce objects with different ids? */ -------------------------------------------------------------------------------- /section 7/7.2_task/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | -------------------------------------------------------------------------------- /section 7/7.3_solution/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/grzim/pen/YbqbKd. 2 | 3 | -------------------------------------------------------------------------------- /section 7/7.3_solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | module pattern 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /section 7/7.3_solution/js/index.js: -------------------------------------------------------------------------------- 1 | const module = (function() { 2 | const variable = 12; 3 | return { 4 | showVariable() { 5 | console.log(variable) 6 | } 7 | } 8 | })(); -------------------------------------------------------------------------------- /section 7/7.3_solution/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | -------------------------------------------------------------------------------- /section 7/7.4_solution/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/grzim/pen/JVOJKv. 2 | 3 | -------------------------------------------------------------------------------- /section 7/7.4_solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | simple class solution 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /section 7/7.4_solution/js/index.js: -------------------------------------------------------------------------------- 1 | /* Create a Box class that: 2 | expects to get one argument in constructor 3 | has method show() that when called calls console.log on the passed argument to the constructor method 4 | has method perform() that: 5 | expects one argument 6 | returns undefined if the provided argument is not a function 7 | when called with function this functions is called with argument passed to constructor method 8 | */ 9 | 10 | class Box { 11 | constructor(arg) { 12 | this.arg = arg; 13 | } 14 | show() { 15 | console.log(this.arg); 16 | } 17 | perform(f) { 18 | if(typeof f === 'function') f(this.arg); 19 | } 20 | } -------------------------------------------------------------------------------- /section 7/7.4_solution/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | -------------------------------------------------------------------------------- /section 7/7.4_task/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/grzim/pen/QREEQB. 2 | 3 | -------------------------------------------------------------------------------- /section 7/7.4_task/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | simple class task 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /section 7/7.4_task/js/index.js: -------------------------------------------------------------------------------- 1 | /* Create a Box class that: 2 | expects to get one argument in constructor 3 | has method show() that when called calls console.log on the passed argument to the constructor method 4 | has method perform() that: 5 | expects one argument 6 | returns undefined if the provided argument is not a function 7 | when called with function this functions is called with argument passed to constructor method 8 | */ -------------------------------------------------------------------------------- /section 7/7.4_task/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 17 | 18 | -------------------------------------------------------------------------------- /section 8/8.1_solution/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/grzim/pen/yrKmxX. 2 | 3 | -------------------------------------------------------------------------------- /section 8/8.1_solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Products - constructors: Solution 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /section 8/8.1_solution/js/index.js: -------------------------------------------------------------------------------- 1 | function Product(name, brand) { 2 | if(this.constructor === Product) throw new TypeError('Product constructor cannot be invoked directly') 3 | this.name = name; 4 | this.brand = brand; 5 | } 6 | Product.prototype.print = function() { 7 | console.log(this.name, this.brand); 8 | } 9 | Product.prototype.getCount = function() { 10 | console.log(this.count); 11 | } 12 | Product.prototype.printCode = function() { 13 | console.log(`${this.typeCode}#${this.brand}#${this.name}`); 14 | } 15 | function ElectronicProduct(name, brand) { 16 | Product.call(this, name, brand); 17 | ElectronicProduct.prototype.count++; 18 | } 19 | ElectronicProduct.prototype.count = 0; 20 | ElectronicProduct.prototype.typeCode = 'Electronic'; 21 | ElectronicProduct.prototype.__proto__ = Product.prototype; 22 | 23 | function GroceryProduct(name, brand) { 24 | Product.call(this, name, brand); 25 | GroceryProduct.prototype.count++; 26 | } 27 | GroceryProduct.prototype.count = 0; 28 | GroceryProduct.prototype.typeCode = 'Grocery'; 29 | GroceryProduct.prototype.__proto__ = Product.prototype; 30 | 31 | const galaxyWatch = new ElectronicProduct('galaxy watch', 'samsung'); 32 | const iPhone = new ElectronicProduct('iPhone', 'apple'); 33 | galaxyWatch.print(); 34 | galaxyWatch.getCount(); 35 | galaxyWatch.printCode(); -------------------------------------------------------------------------------- /section 8/8.1_solution/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | -------------------------------------------------------------------------------- /section 8/8.1_task/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/grzim/pen/zXPwwq. 2 | 3 | -------------------------------------------------------------------------------- /section 8/8.1_task/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Products - constructors 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /section 8/8.1_task/js/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | 1. Create a prototypal chain with constructor functions: 3 | Product, ElectronicProduct and GroceryProduct 4 | ElectronicProduct and GroceryProduct should 'inherit' from Product 5 | 6 | Product should take as arguments name and brand. Those variables should be public (avaliable as object properties). 7 | Product should instance objects having access to methods: 8 | 1. 'print' to log name and brand on the console 9 | 2. 'getCount' to log count of all products of the 'type that inherits' from Product (in our case we define two of such types: ElectronicProduct and GroceryProduct) 10 | 3. 'printCode' that will print the code in format typeCode#brand#name. typeCode depends on the constructor function (see below) brand and name on the instance. 11 | 12 | Product constructor should not be invoked directly. 13 | 14 | ElectronicProduct and GroceryProduct are constructors that takes 2 arguments: name and brand. 15 | Calling from the instance of ElectronicProduct method printCode() should pass typeCode as 'Electronic' 16 | Calling from the instance of GroceryProduct method printCode() should pass typeCode as 'Grocery' 17 | 18 | const galaxyWatch = new ElectronicProduct('galaxy watch', 'samsung'); 19 | const iPhone = new ElectronicProduct('iPhone', 'apple'); 20 | galaxyWatch.print(); // galaxy watch samsung 21 | galaxyWatch.getCount(); // 2 22 | galaxyWatch.printCode(); // Electronic#samsung#galaxy watch 23 | 24 | 2. How is called the technique of having, in the prototypal chain, methods of the same name but working diffriently? 25 | */ -------------------------------------------------------------------------------- /section 8/8.1_task/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | -------------------------------------------------------------------------------- /section 8/8.2_solution/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/grzim/pen/dLmxar. 2 | 3 | -------------------------------------------------------------------------------- /section 8/8.2_solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Products - classes: Solution 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /section 8/8.2_solution/js/index.js: -------------------------------------------------------------------------------- 1 | class Product { 2 | constructor(name, brand) { 3 | if(new.target === Product) throw new TypeError('Product class cannot be used directly') 4 | this.name = name; 5 | this.brand = brand; 6 | new.target.count = new.target.count ? new.target.count + 1 : 1; 7 | } 8 | print() { 9 | console.log(this.name, this.brand); 10 | } 11 | getCount() { 12 | console.log(this.constructor.count); 13 | } 14 | printCode() { 15 | console.log(`${this.constructor.getTypeCode()}#${this.brand}#${this.name}`); 16 | } 17 | } 18 | 19 | class ElectronicProduct extends Product { 20 | static getTypeCode() { 21 | return 'Electronic'; 22 | } 23 | } 24 | 25 | 26 | class GroceryProduct extends Product { 27 | static getTypeCode() { 28 | return 'Grocery'; 29 | } 30 | } 31 | 32 | const galaxyWatch = new ElectronicProduct('galaxy watch', 'samsung'); 33 | const iPhone = new ElectronicProduct('iPhone', 'apple'); 34 | galaxyWatch.print(); 35 | galaxyWatch.getCount(); 36 | galaxyWatch.printCode(); -------------------------------------------------------------------------------- /section 8/8.2_solution/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | -------------------------------------------------------------------------------- /section 8/8.3_solution/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/grzim/pen/QPrLGq. 2 | 3 | -------------------------------------------------------------------------------- /section 8/8.3_solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Movies: Solution 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /section 8/8.3_solution/js/index.js: -------------------------------------------------------------------------------- 1 | function Movie(movieLength, fullTitle, ageCategory) { 2 | this.getData = function() { 3 | return { 4 | movieLength, fullTitle, ageCategory 5 | } 6 | } 7 | } 8 | 9 | Movie.prototype.addPrequel = function(movie) { 10 | this.prequel = movie; 11 | movie.sequel = this; 12 | } 13 | 14 | Movie.prototype.addSequel = function(movie) { 15 | this.sequel = movie; 16 | movie.prequel = this; 17 | } 18 | Movie.prototype.getFirstPart = function() { 19 | let movie = this; 20 | while(movie.prequel) { 21 | movie = movie.prequel; 22 | } 23 | return movie; 24 | } 25 | Movie.prototype.getAllParts = function() { 26 | const allParts = []; 27 | let movie = this.getFirstPart(); 28 | allParts.push(movie.getData().fullTitle) 29 | while (movie.sequel) { 30 | movie = movie.sequel; 31 | allParts.push(movie.getData().fullTitle) 32 | } 33 | console.log.apply(console, allParts); 34 | } 35 | 36 | function ActionMovie(movieLength, fullTitle, ageCategory) { 37 | Movie.call(this, movieLength, fullTitle, ageCategory); 38 | } 39 | ActionMovie.prototype = Movie.prototype 40 | 41 | function DramaMovie(movieLength, fullTitle, ageCategory) { 42 | Movie.call(this, movieLength, fullTitle, ageCategory); 43 | } 44 | DramaMovie.prototype = Movie.prototype 45 | 46 | const requiemForADream = new DramaMovie(80,"Requiem For A Dream", 18); 47 | const madMax = new ActionMovie(90,"Mad Max I", 16); 48 | const madMax2 = new ActionMovie(120,"Mad Max II", 16); 49 | madMax2.addPrequel(madMax); 50 | const madMax3 = new ActionMovie(110,"Mad Max III", 16); 51 | madMax2.addSequel(madMax3); 52 | madMax3.getAllParts(); // prints "Mad Max I" "Mad Max II" "Mad Max III" -------------------------------------------------------------------------------- /section 8/8.3_solution/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | -------------------------------------------------------------------------------- /section 8/8.3_task/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/grzim/pen/eoeWLz. 2 | 3 | -------------------------------------------------------------------------------- /section 8/8.3_task/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Movies - task 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /section 8/8.3_task/js/index.js: -------------------------------------------------------------------------------- 1 | /* Create 3 constructor functions: 2 | Movie, ActionMovie and DramaMovie 3 | 4 | ActionMovie and DramaMovie should 'inherit' Movie 5 | Movie should take 3 arguments: movieLength, fullTitle, ageCategory. They should not be visible as parts of the instances. 6 | Movie should have access to methods addPrequel, addSequel and getAllParts (you can add any other if needed). 7 | addSequel and addPrequel makes a connection between objects so that calling getAllParts method on any of the object should print names of all movies in the series. Do not add any external arrays in order to solve this task. 8 | 9 | sample usage: 10 | 11 | const requiemForADream = new DramaMovie(80,"Requiem For A Dream", 18); 12 | const madMax = new ActionMovie(90,"Mad Max I", 16); 13 | const madMax2 = new ActionMovie(120,"Mad Max II", 16); 14 | madMax2.addPrequel(madMax); 15 | 16 | const madMax3 = new ActionMovie(110,"Mad Max III", 16); 17 | madMax2.addSequel(madMax3); 18 | madMax3.getAllParts(); // prints "Mad Max I" "Mad Max II" "Mad Max III" 19 | 20 | 2. How such a data structure is called? 21 | */ -------------------------------------------------------------------------------- /section 8/8.3_task/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | --------------------------------------------------------------------------------