OOP - A Tiny JS World

submissions/supert111/OOP-a-tiny-JS-world/index.js

@@ -0,0 +1,177 @@
+import { print } from './js/lib.js';
+/* Refer to https://github.com/OleksiyRudenko/a-tiny-JS-world for the task details
+   Complete the below for code reviewers' convenience:
+
+   Code repository: _put repo URL here_
+   Web app: _put project's github pages URL here_
+   */
+
+// ======== OBJECTS DEFINITIONS ========
+// Define your objects here
+
+class InhabitantsOfTheWorld {
+   constructor (species, name, gender, legs, saying) {
+      this.species = species;
+      this.name = name;
+      this.gender = gender;
+      this.legs = legs;
+      this.saying = saying;
+      this.friends = [];
+   }
+
+   addFriends(nameFriend) {
+      return this.friends = [...this.friends, ... nameFriend]
+   }
+
+}
+
+class Human extends InhabitantsOfTheWorld {
+   constructor (name, gender, hands, saying) {
+      super('human', name, gender, 2, saying);
+      this.hands = hands;
+   }
+}
+
+class Man extends Human {
+   constructor (name, saying) {
+      super(name, 'male', 2, saying);
+   }
+}
+
+class Woman extends Human {
+   constructor (name, saying) {
+      super(name, 'female', 2, saying);
+   }
+}
+
+class Animal extends InhabitantsOfTheWorld {
+   constructor (species, name, gender, saying) {
+      super(species, name, gender, 4, saying);
+   }
+}
+
+class Dog extends Animal {
+   constructor (name, saying) {
+      super('dog', name, 'male', saying);
+   }
+}
+
+class Cat extends Animal {
+   constructor (name, saying) {
+      super('cat', name, 'female', saying);
+   }
+}
+
+const man = new Man ('Myk', 'hello bro!');
+const woman = new Woman ('Magda', "I'll kill you!");
+const dog = new Dog ('Caesar', 'woof-woof!');
+const cat = new Cat ('Musya', 'meow-meow!');
+
+man.addFriends([dog.name, cat.name, woman.name]);
+woman.addFriends([dog.name, cat.name, man.name]);
+dog.addFriends([cat.name, man.name, woman.name]);
+cat.addFriends([dog.name, man.name, woman.name]);
+
+// ======== OUTPUT ========
+/* Use print(message) for output.
+   Default tag for message is <pre>. Use print(message,'div') to change containing element tag.
+
+   Message can contain HTML markup. You may also tweak index.html and/or styles.css.
+   However, please, REFRAIN from improving visuals at least until your code is reviewed
+   so code reviewers might focus on a single file that is index.js.
+   */
+
+   const inhabitants = [dog, cat, man, woman];
+   inhabitants.map(({species, name, gender, legs, hands = 0, saying, friends}) => 
+     print(`species: <strong style="color: darkblue">${species}</strong>;
+       name: <strong style="color: red">${name}</strong>; 
+       gender: <strong style="color: green">${gender}</strong>;
+       legs: <strong style="color: black">${legs}</strong>;
+       hands: <strong style="color: gray">${hands}</strong>;
+       saying: <strong style="color: blue">${saying}</strong>;
+       friends: <strong style="color: darkorchid">${friends}</strong>;`));
+
+/* Print examples:
+   print('ABC');
+   print('<strong>ABC</strong>');
+   print('<strong>ABC</strong>', 'div');
+
+   print('human; John; male; 2; 2; Hello world!; Rex, Tom, Jenny');
+   print('human; <strong>John</strong>; male; 2; 2; <em>Hello world!</em>; Rex, Tom, Jenny');
+   print('human; <strong>John</strong>; male; 2; 2; <em>Hello world!</em>; Rex, Tom, Jenny', 'div');
+   */
+
+
+/////////////////////    FACTORY-FUNCTION    /////////////////////////////
+
+   // let InhabitantsOfTheWorld = {
+   //    addFriends(nameFriend) {
+   //       return this.friends = [...this.friends, ... nameFriend]
+   //    },
+   //    getDog() {
+   //       return {species: 'dog', name: this.name, gender: this.gender, legs: this.legs, hands: 0, saying: 'woof-woof!', friends: this.friends};
+   //    },
+   //    getCat() {
+   //       return {species: 'cat', name: this.name, gender: this.gender, legs: this.legs, hands: 0, saying: 'meow-meow!', friends: this.friends};
+   //    },
+   //    getMan() {
+   //       return {species: 'man', name: this.name, gender: this.gender, legs: this.legs, hands: this.hands, saying: this.saying, friends: this.friends};
+   //    },
+   //    getWoman() {
+   //       return {species: 'woman', name: this.name, gender: this.gender, legs: this.legs, hands: this.hands, saying: this.saying, friends: this.friends};
+   //    },
+   // };
+
+   // let CreateInhabitantsOfTheWorld = function (name, gender, legs, hands, saying) {
+   //    let inhabitant = Object.create(InhabitantsOfTheWorld);
+   //    inhabitant.name = name, 
+   //    inhabitant.gender = gender, 
+   //    inhabitant.legs = legs, 
+   //    inhabitant.hands = hands, 
+   //    inhabitant.saying = saying;
+   //    inhabitant.friends = [];
+   //    return inhabitant;
+   // }
+
+   // let dog = CreateInhabitantsOfTheWorld('Caesar', 'male', 4);
+   // let cat = CreateInhabitantsOfTheWorld('Musya', 'female', 4);
+   // let man = CreateInhabitantsOfTheWorld('Myk', 'male', 2, 2, 'hello bro!');
+   // let woman =  CreateInhabitantsOfTheWorld('Magda', 'female', 2, 2, "I'll kill you!");
+
+   // dog.addFriends([cat.name, man.name, woman.name]);
+   // cat.addFriends([dog.name, man.name, woman.name]);
+   // man.addFriends([dog.name, cat.name, woman.name]);
+   // woman.addFriends([dog.name, cat.name, man.name]);
+
+   // dog = dog.getDog();
+   // cat = cat.getCat();
+   // man = man.getMan();
+   // woman = woman.getWoman();
+
+   // // ======== OUTPUT ========
+   // /* Use print(message) for output.
+   //    Default tag for message is <pre>. Use print(message,'div') to change containing element tag.
+   //    Message can contain HTML markup. You may also tweak index.html and/or styles.css.
+   //    However, please, REFRAIN from improving visuals at least until your code is reviewed
+   //    so code reviewers might focus on a single file that is index.js.
+   //    */
+
+   //    const inhabitants = [dog, cat, man, woman];
+   //    inhabitants.map(({species, name, gender, legs, hands, saying, friends}) => 
+   //      print(`species: <strong style="color: darkblue">${species}</strong>;
+   //        name: <strong style="color: red">${name}</strong>; 
+   //        gender: <strong style="color: green">${gender}</strong>;
+   //        legs: <strong style="color: black">${legs}</strong>;
+   //        hands: <strong style="color: gray">${hands}</strong>;
+   //        saying: <strong style="color: blue">${saying}</strong>;
+   //        friends: <strong style="color: darkorchid">${friends}</strong>;`));
+
+   // /* Print examples:
+   //    print('ABC');
+   //    print('<strong>ABC</strong>');
+   //    print('<strong>ABC</strong>', 'div');
+   //    print('human; John; male; 2; 2; Hello world!; Rex, Tom, Jenny');
+   //    print('human; <strong>John</strong>; male; 2; 2; <em>Hello world!</em>; Rex, Tom, Jenny');
+   //    print('human; <strong>John</strong>; male; 2; 2; <em>Hello world!</em>; Rex, Tom, Jenny', 'div');
+   //    */
+