From bbe01f343c89a371c7a8121f1c8ba9fb7f2056e3 Mon Sep 17 00:00:00 2001
From: chanjessica <jchan_sea@yahoo.com>
Date: Sun, 12 Apr 2020 14:17:10 -0700
Subject: [PATCH 1/2] hw1

---
 src/components/DivElement.js  | 12 ++++++---
 src/components/HTMLElement.js | 16 +++++++++---
 src/rolodex/rolodexPrinter.js | 29 ++++++++++++++++++---
 src/timer/Timer.js            | 48 ++++++++++++++++++++++++-----------
 4 files changed, 81 insertions(+), 24 deletions(-)

diff --git a/src/components/DivElement.js b/src/components/DivElement.js
index 7e22bcb..b5fa0c9 100644
--- a/src/components/DivElement.js
+++ b/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;
diff --git a/src/components/HTMLElement.js b/src/components/HTMLElement.js
index 559b785..010438a 100644
--- a/src/components/HTMLElement.js
+++ b/src/components/HTMLElement.js
@@ -1,4 +1,14 @@
-// Define class here
+class HTMLElement {
+  constructor(tag, content) {
+    this.tag = tag;
+    this.content = content;
+  }
+  render() {
+    const sTag = `<${this.tag}>`;
+    const eTag = `</${this.tag}>`;
+    const elem = sTag + this.content + eTag;
+    return elem;
+  }
+}
 
-// Export class here
-export default {};
+export default HTMLElement;
diff --git a/src/rolodex/rolodexPrinter.js b/src/rolodex/rolodexPrinter.js
index 0f12389..1216174 100644
--- a/src/rolodex/rolodexPrinter.js
+++ b/src/rolodex/rolodexPrinter.js
@@ -1,11 +1,34 @@
-import people from './people.json';
+import people from "./people.json";
 
 people.forEach(function (person) {
-  const names = person.name.split(' ');
+  const names = person.name.split(" ");
   const firstName = names[0];
   const lastName = names[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 template literals *******');
+people.forEach(function (person) {
+  const names = person.name.split(" ");
+  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('First name: ' + firstName + '\nLast name: ' + lastName + '\nEmail: ' + email + '\nPhone number: ' + phone + '\n');
+console.log('****** Refactor the code to use object destructuring ******');
+people.forEach(function (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('******Refactor the code to use array destructuring. *****');
+people.forEach(function (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");
 });
diff --git a/src/timer/Timer.js b/src/timer/Timer.js
index 2453ed9..54cab47 100644
--- a/src/timer/Timer.js
+++ b/src/timer/Timer.js
@@ -1,17 +1,35 @@
-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);
-};
+//* 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;
+  }
+  start() {
+    //    * Refactor the code to use `let/const`.
+    //    * Refactor the code to avoid assigning `this` to a variable.
+    let instance = this.seconds;
 
+    //    * 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;

From c10971946f39bb5afe53675761522244d13edc3d Mon Sep 17 00:00:00 2001
From: chanjessica <jchan_sea@yahoo.com>
Date: Sun, 12 Apr 2020 15:06:08 -0700
Subject: [PATCH 2/2] tested with 'npm run lint'

---
 src/components/DivElement.js  |  4 ++--
 src/components/HTMLElement.js |  1 +
 src/rolodex/rolodexPrinter.js | 33 ++++++++++++++++-----------------
 src/timer/Timer.js            |  2 ++
 4 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/components/DivElement.js b/src/components/DivElement.js
index b5fa0c9..1149093 100644
--- a/src/components/DivElement.js
+++ b/src/components/DivElement.js
@@ -1,9 +1,9 @@
-import HTMLElement from "./HTMLElement";
+import HTMLElement from './HTMLElement';
 
 class DivElement extends HTMLElement {
   constructor(content) {
     super(content);
-    this.tag = "div";
+    this.tag = 'div';
     this.content = content;
   }
 }
diff --git a/src/components/HTMLElement.js b/src/components/HTMLElement.js
index 010438a..f5bdd66 100644
--- a/src/components/HTMLElement.js
+++ b/src/components/HTMLElement.js
@@ -3,6 +3,7 @@ class HTMLElement {
     this.tag = tag;
     this.content = content;
   }
+
   render() {
     const sTag = `<${this.tag}>`;
     const eTag = `</${this.tag}>`;
diff --git a/src/rolodex/rolodexPrinter.js b/src/rolodex/rolodexPrinter.js
index 1216174..1cf7abd 100644
--- a/src/rolodex/rolodexPrinter.js
+++ b/src/rolodex/rolodexPrinter.js
@@ -1,34 +1,33 @@
-import people from "./people.json";
+import people from './people.json';
 
-people.forEach(function (person) {
-  const names = person.name.split(" ");
+people.forEach((person) => {
+  const names = person.name.split(' ');
   const firstName = names[0];
   const lastName = names[1];
-  const email = person.email;
-  const phone = person.phone;
-  console.log("First name: " + firstName + "\nLast name: " + lastName + "\nEmail: " + email + "\nPhone number: " + phone + "\n");
+  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(function (person) {
-  const names = person.name.split(" ");
-  const firstName = ` ${person.name.split(" ")[0]} `;
-  const lastName = ` ${person.name.split(" ")[1]} `;
+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(`First name: ${firstName}\nLast name: ${lastName}\nEmail: ${email}\nPhone number: ${phone}\n`);
 });
 
 console.log('****** Refactor the code to use object destructuring ******');
-people.forEach(function (person) {
+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");
+  const [firstName, lastName] = name.split(' ');
+  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(function (person) {
+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");
+  const [firstName, lastName] = name.split(' ');
+  console.log(`First name: ${firstName}\nLast name: ${lastName}\nEmail: ${email}\nPhone number: ${phone}\n`);
 });
diff --git a/src/timer/Timer.js b/src/timer/Timer.js
index 54cab47..37c4392 100644
--- a/src/timer/Timer.js
+++ b/src/timer/Timer.js
@@ -17,6 +17,7 @@ class Timer {
   constructor(seconds) {
     this.seconds = seconds;
   }
+
   start() {
     //    * Refactor the code to use `let/const`.
     //    * Refactor the code to avoid assigning `this` to a variable.
@@ -32,4 +33,5 @@ class Timer {
     }, 1000);
   }
 }
+
 export default Timer;