/tic-tac-toe

Primary LanguageJavaScript

Tic-Tac-Toe

Abstract:

I built a tic-tac-toe game from scratch! Not only does this project display fluency in HTML, CSS, and JavaScript, but it also features a unique design and allows users to play the classic game on their browser. As with the classic tic-tac-toe game, this game allows users to place their token in an empty box, determine if a winning combination or a draw condition exists, and update the player's wins. The game can be played on the following site: https://soy-park.github.io/tic-tac-toe/

Installation Instructions:

  1. Fork the repository
  2. Copy SSH key on GitHub inside the code dropdown
  3. Using the terminal, run git clone [SSH key here]
  4. Run command cd tic-tac-toe to move into project directory
  5. Run command open index.html to launch the application in the web browser

Preview of App:

Image

Context:

This project was completed during the sixth week at Turing School of Software and Design. It took approximately 25 hours to complete.

Contributor(s):

Soyeon Park @soy-park

Learning Goals:

  • Solidify and demonstrate your understanding of:
    • DRY JavaScript
    • Event delegation to handle similar event listeners
  • Understand the difference between the data model and how the data is displayed on the DOM
  • Iterate through/filter DOM elements using for loops
  • Use your problem solving process to break down large problems, solve things step by step, and trust yourself to not rely on an outside “answer” to a logical challenge

Wins + Challenges:

Wins:
  • Trusing in myself to complete this project with few help and more research
  • Using JavaScript to update the data model before updating DOM
  • Appropriate use of event delegation
  • Having fun with HTML layout and CSS styling
Challenges:
  • Asking for help
  • Being patient with myself
  • Making functions more dynamic

I resolved these challenges by going out of my comfort zone to ask for help from my "rock" when necessary, and taking breaks and pacing myself by creating a plan for what to accomplish each day. In terms of handling technical challenges, I used parameters/argument and event.target.id to make functions more dynamic.