Code Specs & Refactoring

With this project you won't be building anything new. Instead you'll be studying and replicating a project we already wrote. There are two main reasons for doing this:

  1. Learning to effectively read source code, and to understand it at a high level.
    This skill is necessary for reading documentation, collaborating, testing, learning new libraries, debugging, ... basically everything. Without this skill you will always be struggling uphill.
  2. To understand the practical relationship between implementation and behavior.
    Each time you study and replicate a step in our code, your implementation will not be identical to ours. You might use different DOM accessors or structure your control flow differently. But no matter how you implement your functions, your application will have the same behavior and specifications as ours. This is called refactoring.

Take your time on this project, the better you understand these two points the easier the next project will be.


Learning Objectives

  • Application = User Interactions + Data.
    • "Code" isn't anywhere in that definition.
  • An application is it's behavior, not it's implementation
  • Using specs to study and replicate an application
  • Refactoring: Changing the source without breaking the behavior



  1. Fork+clone this repository and clear the README so you can use it for notes.
  2. Follow the instructions in the README on our account (since you cleared it on your clone). We recommend filling out all of the files in place on your cloned copy. You must reuse our HTML (exactly as it is, no changes allowed). You will be rewriting the JS file for each folder. Once you have replicated each version you can move on to the next step: improving the application's architecture.
  3. The code provided does not have proper separation of concerns like you learned about in CleanCalc (UI/logic separation). Refactor TicTacToe6 into the 3-layered handler/logic architecture you learned in cleancalc.
  4. Add some logic to see who won.
  5. Create an empty repository on your account and build it into full repo with 8+ version releases (7 for the versions provided, and 1+ for your refactor into logic/handler architecture). Be sure to have a full & polished repository with documentation, tests, and a live demo. The simplest way to do this will be to create a new directory on your computer, and for each version in TicTacToe:
    1. Copy paste everything for that version (original code, specs, your code, html, ..) into the new repository.
    2. Add, commit, tag. Push to your repository
    3. Delete everything, and repeat.
  6. Finishing touches: Add some tests for the logic, put a live demo, link the code & demo to your portfolio, fill out the readme, ... Make it complete and pretty.



Template Repository

Tictactoe Videos:

Demo Repositories:

Interacting with Code:


Extra Practice

Explore the projects on Open the ones that interest you and try to replicate them using the method from this project.

results matching ""

    No results matching ""