Exercise Monday

Reminder: Node.js must be installed on your personal machine before Tuesday, as detailed in your weekend homework. If you encounter any issues in doing so, Epicodus staff will be available for assistance Tuesday at 10:30am.

Goal: Practice using npm and gulp tasks to streamline your development process.

  • Put your program's functions into their own module(s) using the exports keyword and use separate files for your front-end DOM manipulation logic. Your project should contain at least two JavaScript files.
  • Include gulp tasks to concatenate, minify, browserify, and check your code with JSHint. Also remember to create a build task, and a clean task.
  • Remember that we want the browser to load as few files as possible, and generated production files should be kept in a separate build folder.
  • You are not intended to complete all of the possibilities on this page. It is recommended to do the Calculator exercise first, following along with the weekend homework, then proceed to the journal, and then if you have time pick either Memory or Simon.
  • Feel free to expand on these problems to challenge yourself if you want, but only after you have the basics working. You must have at least 2 JavaScript files for each of these projects, including object declarations in the back-end file and using instances of these objects in your front-end file. You must also have a functioning gulpfile with all tasks described over the weekend homework, as well as all npm packages included in your manifest file.

Warm Up


  • What is a main difference between the Node runtime environment and the browser?
  • What is npm? Why would we want to use it?
  • What is gulp and what is it used for?
  • What is a common use for environment variables?
  • What is the difference between concatenation and minification?
  • What is linting? Why is it useful in development?

Code


Calculator

Follow along with the weekend homework to build the basic calculator app. The calculator object should include the pingPong method. Be sure to take your time on going through setting up your npm packages, your gulpfile and your file structure. Optionally, try expanding on this to create standard arithmetic methods such as +, -, *, /. These methods should be called on a single Calculator object from your front-end file whenever the user submits the appropriate form. Then, display the results - remember the front-end interface file gets user input and displays results, while the calculations should be done on the back-end as part of the Calculator object.

Journal

Create a journaling website where a user can write entries including at least a title and body. Create Entry objects that include a method to return the number of words in the entry. Then, add a separate method (or methods) to return the number of vowels and consonants in each entry. Call each of these methods from your front-end file to display their return values. Finally, add a method called getTeaser to return the first sentence of the entry. If the sentence is over 8 words, only display those first 8 words. Be sure to call this method from your front-end file to display the results as well, whenever a new journal entry is created.

Memory

Create a game based on the card game Memory.

You'll need to generate a grid of cards. Each card should have a picture on it, and there should be 2 of each picture. So, if you have a deck of 10 cards there should be 5 different pictures.

All cards should start face down. Each time the user takes a turn they click on 2 cards. When a card is clicked it should reveal its picture. If the user gets a pair of cards with the same picture, the cards remain face-up. If the user's selected cards are different they should return to face down. When all the cards are face up, the user has won. The object of the game is to find all the pairs in as few turns as possible.

Simon

Create a version of the old game Simon. In Simon, the game generates a sequence of colored lights for you to mirror. It starts out simple; first only one color, then if you get that right then you have to remember 2 colors. The sequence does not change every time, it just gets longer and longer.

For example, here is a sequence of turns:

["red"]
["red", "blue"]
["red", "blue", "yellow"]
["red", "blue", "yellow", "red"]
["red", "blue", "yellow", "red", "red"]
["red", "blue", "yellow", "red", "red", "yellow"]
...

You do not have to use the above format to generate sequences, this is just an example.

Hint: since this game involves timed events (we have to time how fast it takes for the sequence to play on each turn) you may wish to investigate the JavaScript function setInterval().

Peer Code Review


  • Does the app function and look well presented in the browser? Is the code clean and readable?
  • Is the project structured in a logical way, with functions kept in separate files from DOM manipulation code?
  • Does the project have an npm manifest file and .gitignore file?
  • Does the gulpfile include tasks to minify, concatenate, browserify, lint, build and clean?
  • Is there a build folder for production files? Are there separate tasks for production builds and development builds?