HW1

src/components/DivElement.js

@@ -1,5 +1,11 @@
-// Import HTMLElement here
+import HTMLElement from './HTMLElement';
 
-// Define class here
+class DivElement extends HTMLElement {
+  constructor(content) {
+    super(content);
+    this.tag = 'div';
+    this.content = content;
+  }
+}
 
-// Export class here
+export default DivElement;

src/components/HTMLElement.js

@@ -1,4 +1,15 @@
-// Define class here
+class HTMLElement {
+  constructor(tag, content) {
+    this.tag = tag;
+    this.content = content;
+  }
 
-// Export class here
-export default {};
+  render() {
+    const sTag = `<${this.tag}>`;
+    const eTag = `</${this.tag}>`;
+    const elem = sTag + this.content + eTag;
+    return elem;
+  }
+}
+
+export default HTMLElement;

src/rolodex/rolodexPrinter.js

@@ -1,11 +1,33 @@
 import people from './people.json';
 
-people.forEach(function (person) {
+people.forEach((person) => {
   const names = person.name.split(' ');
   const firstName = names[0];
   const lastName = names[1];
-  const email = person.email;
-  const phone = person.phone;
+  const { email } = person;
+  const { phone } = person;
+  console.log(`First name: ${firstName}\nLast name: ${lastName}\nEmail: ${email}\nPhone number: ${phone}\n`);
+});
+
+console.log('****** Refactor the code to use template literals *******');
+people.forEach((person) => {
+  const firstName = ` ${person.name.split(' ')[0]} `;
+  const lastName = ` ${person.name.split(' ')[1]} `;
+  const email = ` ${person.email} `;
+  const phone = ` ${person.phone}`;
+  console.log(`First name: ${firstName}\nLast name: ${lastName}\nEmail: ${email}\nPhone number: ${phone}\n`);
+});
+
+console.log('****** Refactor the code to use object destructuring ******');
+people.forEach((person) => {
+  const { name, email, phone } = person;
+  const [firstName, lastName] = name.split(' ');
+  console.log(`First name: ${firstName}\nLast name: ${lastName}\nEmail: ${email}\nPhone number: ${phone}\n`);
+});
 
-  console.log('First name: ' + firstName + '\nLast name: ' + lastName + '\nEmail: ' + email + '\nPhone number: ' + phone + '\n');
+console.log('******Refactor the code to use array destructuring. *****');
+people.forEach((person) => {
+  const [, name, , email, , phone] = Object.values(person);
+  const [firstName, lastName] = name.split(' ');
+  console.log(`First name: ${firstName}\nLast name: ${lastName}\nEmail: ${email}\nPhone number: ${phone}\n`);
 });

src/timer/Timer.js

@@ -1,17 +1,37 @@
-function Timer(seconds) {
-  this.seconds = seconds;
-}
+//* Examine the code in these two files and determine each script's behavior.
+// function Timer(seconds) {
+//   this.seconds = seconds;
+// }
+// Timer.prototype.start = function () {
+//   var instance = this;
+//   var timerInterval = setInterval(function () {
+//     if (instance.seconds === 0) {
+//       clearInterval(timerInterval);
+//     }
+//     console.log(instance.seconds);
+//     instance.seconds -= 1;
+//   }, 1000);
+// };
+// --- * Refactor the code to use the ES6 class syntax.
+class Timer {
+  constructor(seconds) {
+    this.seconds = seconds;
+  }
 
-Timer.prototype.start = function () {
-  var instance = this;
-  var timerInterval = setInterval(function () {
-    if (instance.seconds === 0) {
-      clearInterval(timerInterval);
-    }
+  start() {
+    //    * Refactor the code to use `let/const`.
+    //    * Refactor the code to avoid assigning `this` to a variable.
+    let instance = this.seconds;
 
-    console.log(instance.seconds);
-    instance.seconds -= 1;
-  }, 1000);
-};
+    //    * Refactor the code to use arrow function(s).
+    const timerInterval = setInterval(() => {
+      if (instance === 0) {
+        clearInterval(timerInterval);
+      }
+      console.log(instance);
+      instance -= 1;
+    }, 1000);
+  }
+}
 
 export default Timer;