Week -4 tasks

Week-4/ES6/Symbols/symbols.challenge.js

@@ -0,0 +1,38 @@
+const CARCOLOR = Symbol(); // give red and no see changes in below console
+const CARMAKE = Symbol();
+const CARMODEL = Symbol();
+
+class Car {
+  constructor(color, make, model) {
+      this[CARCOLOR] = color;
+      this[CARMAKE] = make;
+      this[CARMODEL] = model;
+  }
+  set color(color){
+    this[CARCOLOR] = color;
+  }
+  set model(model){
+    this[CARMODEL] = model;
+  }
+  set make(make){
+    this[CARMAKE] = make;
+  }
+  get color() {
+    return this[CARCOLOR];
+  }
+  get model() {
+      return this[CARMODEL];
+  }
+  get make() {
+    return this[CARMAKE];
+  }
+}
+let myCar = new Car('Red', 'Porsche', 'Cayanne');
+console.log(myCar);
+myCar.color = `black`;
+myCar.make = `Jaguar`;
+myCar.model = `Land Rover`;
+console.log(myCar);
+
+// implement the functionality to set and get values to car color - Black, car model - Land Rover and car maker - Jaguar
+// you should assign values to those private variables inside class - use setter and getter methods

Week-4/ES6/Symbols/symbols.example.js

@@ -0,0 +1,67 @@
+// console.log(typeof(true));
+// console.log(typeof(null));
+// console.log(typeof(undefined));
+// console.log(typeof(2));
+// console.log(typeof(`a`));
+// console.log(typeof({}));
+
+// new Datatype - symbols - a primitive datatype - a SYMBOL is something which is an identifier, 
+// symbols provide totally unique something that we can assign to variables, symbol is not a constructor, 
+// we can not so new Symbol(), it's just like a string
+
+// const string1 = String('Hello');
+// const string2 = "Hello";
+
+// console.log(string1);
+// console.log(string2);
+
+// const aSymbol = Symbol();
+// console.log(aSymbol);
+
+console.log(Symbol() === Symbol())
+
+// symbols are used to avoid name collisions in properties of an object
+// we can't guarantee normally with property names specifically in objects 
+// or more specifically in constructors and classes that a property name is actually private that it can't get messed with
+
+const a = Symbol();
+const b = Symbol();
+
+console.log(a===b); // it yields false because they both reference different w=even if they look same and alike
+// because we are comparing a random value with another random, symbols will guarantee that one Symbol can never get get used again
+
+/*
+class Car {
+    constructor (color, make, model) {
+        this.color = color;
+        this.make = make;
+        this.model = model;
+    }
+}
+
+let myCar = new Car('Red', 'Porsche', 'Cayanne');
+console.log(myCar);
+myCar.color = `blue`;
+console.log(myCar);
+*/
+
+const CARCOLOR = Symbol(); // give red and no see changes in below console
+const CARMAKE = Symbol();
+const CARMODEL = Symbol();
+
+// console.log(CARCOLOR, CARMAKE, CARMODEL)
+
+class Car {
+    constructor(color, make, model) {
+        this[CARCOLOR] = color;
+        this[CARMAKE] = make;
+        this[CARMODEL] = model;
+    }
+}
+
+let myCar = new Car('Red', 'Porsche', 'Cayanne');
+console.log(myCar);
+myCar.color = `blue`;
+console.log(myCar.color);
+// console.log(myCar);
+// console.log(Symbol.for(`test`) === Symbol.for(`test`))

Week-4/ES6/iterators & generators/generators.html

@@ -0,0 +1,17 @@
+<button class="btn">Click to run the generator</button>
+
+<script type="text/javascript">
+function* counter(){
+    let i=0;
+    while(true){
+
+        console.log("I am before the yield");
+        yield i++;
+        console.log("I am after the yield");
+    }
+}
+const gen = counter()
+document.querySelector('.btn').addEventListener('click', ()=> {
+    console.log(gen.next());
+})
+</script>

Week-4/ES6/iterators & generators/iterators_generators_example.js

@@ -0,0 +1,12 @@
+function* aGenerator(){
+  for(let i=0;i<10;i++){
+    console.log("I just ran");
+    yield ; //PAUSE HERE
+    console.log("I ran too");
+  }
+}
+const gen = aGenerator();
+console.log(gen.next('aman'));
+console.log(gen.next());
+console.log(gen.next());
+console.log(gen.next());

Week-4/ES6/static methods/staticmethods.example.js

@@ -0,0 +1,54 @@
+// function superhero(name, strength, speed) {
+//     this.name = name;
+//     this.strength = strength;
+//     this.speed = speed;
+// }
+// superhero.prototype.goodHero = true;
+// superhero.prototype.powerUp = function(){
+//     this.strength +=5;
+// }
+// let hero1 = new superhero("Hulk", 10, 5);
+// console.log(hero1);
+// hero1.powerUp();
+// console.log(hero1);
+
+//ES6 implementation
+
+class superhero {
+    constructor(name, strength, speed) {
+        this._name = name;
+        this._strength = strength;
+        this._speed = speed;
+        this.goodHero = true; // focus on this
+    }
+    powerUp(){
+        this._strength += 5;
+    }
+    get name(){
+        console.log(" name"+this._name);
+    }
+    set name(newname){
+        this._name = newname;
+    }
+    static goodHero(){
+        return true;
+    }
+}
+
+const hulkdetails = ["Hulk", 10, 5];
+const bulkdetails = ["Bulk", 10, 5];
+
+let hero1 = new superhero(...hulkdetails);
+// console.log(hero1.name);
+// console.log(hero1)
+//
+// hero1.powerUp();
+// hero1.powerUp();
+// hero1.powerUp();
+// console.log(hero1)
+
+let hero2 = new superhero(...bulkdetails);
+console.log(superhero.goodHero())
+
+// hero1.name = "george";
+console.log(hero1)

Week-4/ES6/subclass/subclass.challenge.js

@@ -0,0 +1,73 @@
+
+// inheritance - subclasses
+
+//implement methods in subclass (Human) which will override parent class functionality
+
+//1. implement a custom function which will add "Mr" to name property in subclass
+//2. implement a method in subclass which will increment the power by 2
+//3. implement a method in subclass to reduce the power by half
+//4. add 2 more properties to Human class - city and state (private to human class)
+class superhero {
+    constructor(name, strength, speed) {
+        this._name = name;
+        this._strength = strength;
+        this._speed = speed;
+        // this.goodHero = true; // focus on this
+    }
+    powerUp() {
+        this.strength += 5;
+    }
+    get name() {
+        return this._name;
+    }
+    get strength() {
+        return this._strength;
+    }
+    get speed() {
+        return this._speed;
+    }
+    set name(newname) {
+        this._name = newname;
+    }
+
+    static goodHero() {
+        return true;
+    }
+}
+
+class Human extends superhero {
+  constructor(healthpoints,city,state,...superherostuff) {
+    super(...superherostuff);
+    this._healthpoints=healthpoints;
+    this._city = city;
+    this._state = state;
+  }
+  get healthpoints() {
+      console.log("get healthh");
+      return this._healthpoints;
+  }
+  set healthpoints(healthpoints) {
+      this._healthpoints = healthpoints;
+  }
+  get name() {
+    return `Mr ${this._name}` ;
+   }
+   set name(newname){s
+    this._name=newname
+   }
+
+   editName = () => {
+    this._name = `Mr ${this._name}`;
+}
+powerUp = () =>{
+    this._strength += 2; 
+}
+speedDown = () => {
+    this._speed /= 2;
+}
+}
+const details = [20,"unnao","uttar pradesh","Bill", 10, 8];
+var hero3 = new Human(...details);
+console.log(hero3.name);
+hero3.name='abcd';
+console.log(hero3.name)

Week-4/ES6/subclass/subclass.example.js

@@ -0,0 +1,37 @@
+// inheritance - subclasses
+class superhero {
+    constructor(name, strength, speed) {
+        this._name = name;
+        this._strength = strength;
+        this._speed = speed;
+        // this.goodHero = true; // focus on this
+    }
+    powerUp() {
+        this.strength += 5;
+    }
+    get name() {
+        console.log("get name");
+        return this._name;
+    }
+    set name(newname) {
+        this._name = newname;
+    }
+    static goodHero() {
+        return true;
+    }
+}
+
+class Human extends superhero{
+    constructor(healthpoints, ...superherostuff){
+        super(...superherostuff);
+        this._healthpoints = healthpoints;
+    }
+
+}
+const details = [20,"Bill",10,8]
+const hero3 = new Human(...details);
+console.log(hero3);
+hero3.name = "sai";
+console.log(hero3)
+const hero4 = new superhero(20,"abc", 8);
+console.log(hero4);

Week-4/ES6/tagged_templates/index.html

@@ -0,0 +1,6 @@
+<html>
+    <body>
+        <div id="quotes"></div>
+        <script src="tagged_templates.example.js"></script>
+    </body>
+</html>

Week-4/ES6/tagged_templates/tagged_template.challenge.js

@@ -0,0 +1,35 @@
+//With the template provided, write a template tag that will validate an SQL statement:
+//Only SELECT or UPDATE statements are valid - write validation logic which allows only SELECT, UPDATE
+//The passwords table cannot be altered
+//there is no order by clause, add it and order by asc
+// When done, return the reconstructed query or a note any errors
+
+let city = `Chicago` //data we got from somewhere else (api or database)
+let userId = 3; //data we got from somewhere else (api or database)
+let command = `SELECT *`;
+let table = `USERS`;
+let whereClauses = [
+    `uid = ${2+1}`,
+    `OR city = ${city}`
+]
+function checkQuery(identifiers,...variables) {
+  let finalQuery = "";
+  const queryType = variables[0].split(" ")[0];
+  const table = variables[1];
+  if(queryType == "UPDATE" && table == "PASSWORDS"){
+    console.log("You can not change password table");
+    return finalQuery;
+  }
+  if(queryType == 'UPDATE' || queryType == 'SELECT'){
+    finalQuery = (order) ? (`${variables[0]} FROM ${table} WHERE ${variables[2][0]} ${variables[2][1]} ORDER BY city`) : (`${variables[0]} FROM ${table} WHERE ${variables[2][0]} ${variables[2][1]} ORDER BY city asc`);
+    return finalQuery;
+  } else{
+    console.log("only update and select query can be processed");
+    return finalQuery;
+  }
+}
+var query = checkQuery `${command} FROM ${table} WHERE ${whereClauses} ${order}`;
+console.log(query);
+// Your code to call the tag and log the return value here...
+// your output should be - SELECT * FROM USERS WHERE uid = 3 OR city = chicago ORDER BY asc
+// Spread syntax is a more common and easy here if you are comfortable with it