Week 1 Assignment

Getting Started

1. Fork this repository
2. Clone the repository to your local computer.
3. Install packages

   npm install

4. Ensure tests can be run. The test suite should fail initially, and the test suite runs both the lint and test commands.

   npm test

5. Use npm run file -- to run any files independently from the test suite. Example: npm run file -- ./src/timer/runTimer.js.
6. You can use these commands to run the lint and test commands separately:

   # lint the code
   npm run lint
   # run jest tests in watch mode (handy for updating the code and seeing test results in real time)
   npm run test:watch

Overview

1. The folder src/components contains a file called HTMLElement.js. In this file, create a module that meets the following requirements:

   • Create a class called HTMLElement. This class should have a constructor with two parameters: tag and content. Both of these parameters should be stored as instance variables within the class. Instance variables should have the same names as the parameters.
   • Once the HTMLElement class is created, add a function to the class called render that can be called publicly. This function should return the HTML element with the content provided.
   • Within render, use a template literal to render the element.
   • Example usage (you can see the tests for more examples):

   const lovelaceQuote = new HTMLElement('p', 'I am never so happy as when I am really engaged in good earnest...');
   
   console.log(lovelaveQuote.render());
   // prints "<p>I am never so happy as when I am really engaged in good earnest...</p>"

• Note that you'll need to change the export default {} line to export the class instead of an empty object literal.

2. The folder src/components contains a file called DivElement.js. In this file, create a module that meets the following requirements:

   • Create a class called DivElement that extends the HTMLElement class created previously. You'll need to import the class made in step 1.
   • This class should have a constructor with one parameter: content.
   • This class should inherit the render function in the parent class (do not override it, aka define it in DivElement).
   • Within render, use a template literal to render the element.
   • Example usage:

   const andIThinkToMyself = new DivElement('What a wonderful world');
   
   console.log(andIThinkToMyself.render());
   // prints "<div>What a wonderful world</div>"

3. The folder src/timer contains two files called Timer.js and runTimer.js. Perform the following tasks:

   • Examine the code in these two files and determine each script's behavior.
   • Refactor the code to use the ES6 class syntax.
   • Refactor the code to use arrow function(s).
   • Refactor the code to use let/const.
   • Refactor the code to avoid assigning this to a variable.

4. The folder src/rolodex contains two files called people.json and rolodexPrinter.js. Perform the following tasks:

   • Refactor the code to use template literals.
   • Refactor the code to use object destructuring.
   • Refactor the code to use array destructuring.

Submission

• In order for a valid submission, all tests must pass when running npm test.
• Create a pull request to this repository and ensure that the CI build succeeds.

Bonus

Each assignment will have some bonus

1. Complete some ES6 Katas. These are similar to the homework, where you change code in order to have tests pass. Recommended sections:
   • Promises
   • Arrays
   • Class
   • Destructuring
   • Generators
   • Object literals
   • Strings/template strings
   • Arrow functions
   • Rest/spread operators