Exercise Monday

Goal: Practice async callbacks with setInterval() and/or setTimeout(), testing with Jasmine and Karma, Webpack, and maintaining separation between business and user interface logic by creating a game of your choice.

Warm Up


  • What is the difference between synchronous and asynchronous code?
  • What does it mean for JavaScript to be single-threaded?
  • What is the difference between setInterval() and setTimeout()?
  • What is a good example of an exception in a JavaScript application and how would we handle an exception?

Code


Game of Choice

Monday: Follow along with Exploring Asynchrony with setInterval and setTimeout. Then select one of the projects listed below to build for the next two days.

Tuesday: Then on the second day, aim to use the Giphy API to incorporate GIFs into your game. If you fully complete one project before the end of the second day, experiment with different ways to make API calls, and refactor your codebase to use promises, as depicted in Tuesday night homework. You are also welcome to incorporate a different API in your project if you wish.

Did You Get Eaten?

Continue to build out the logic from the game in this weekend’s lessons. Add levels, difficulty settings and different items. In addition to the bear’s food level, consider adding other levels such as a mood level, sleep level, etc.

Tamagotchi or Animal Farm

You may have had the chance to make a Tamagotchi application in your Level 2 class. If you didn’t, or if you did but you’d like another opportunity to create an application that can deal with the passage of time and asynchronicity, here’s your chance.

The Tamagotchi was one of the most popular toys of the late ‘90’s and early ‘00’s. It was a handheld, digital pet that could be carried around on a keychain-sized mini computer. Tamagotchis required loving care by pressing buttons to feed them, play with them, and put them to sleep. If you didn't give a Tamagotchi enough food, attention or rest, it would die.

Create an application using setInterval() to adjust a Tamagotchi’s food, play and sleep levels (as well as any other levels you’d like to add). Then create items and actions that can increase or decrease these levels. If you’re able to build out an application fully for one Tamagotchi, refactor so that a player can have multiple Tamagotchis.

If the Tamagotchi theme doesn’t resonate with you, apply a similar theme to an Animal Farm application. We don’t mean George Orwell’s Animal Farm (though you can go that direction if you like); instead, create an application where users have to feed and care for their animals.

Pandemic Clone

Pandemic is a cooperative board game where players have to stop a deadly disease outbreak before it wipes out the planet. Build out your own timed version of Pandemic, taking as much or little inspiration from the game as you like.

  • Create an algorithm that determines how quickly the disease should spread, then incorporate this algorithm into your async code (such as using setTimeout() to make the disease spread exponentially after a certain period of time).
  • Create various actions that can be used to stop the pandemic’s spread. For instance, a player could work toward a cure, quarantine an infected city, or do further research on the disease. Check the rules for Pandemic or create your own!

Timed Flash Cards

If you really don’t want to build a game, create a timed flash card application that utilizes setTimeout() and setInterval(). Users should have a set amount of time to answer questions about JavaScript. They should be able to accrue (and lose) points based on how many questions they get correct or incorrect.

Build Your Own Game

You can also choose another game as inspiration (such as Civilization) or come up with another project that utilizes setTimeout() and/or setInterval(). Consider other ways you can utilize asynchrony in your code. Take the time to practice the concepts you learned over the weekend.

Peer Code Review


  • Does the code include complete unit testing with Jasmine? Is Karma integrated?
  • Is business logic separate from user interface logic?
  • Does the application have any exception handling?
  • Are arrow functions used to bind this if needed?
  • Is asynchronous code handled correctly in your application?