Dear Reader,
I finally finished the JavaScript front-end course. That involved two last projects, which I’ll present here. Warning these are not mobile optimized and look ugly on a phone:
Pomodoro Clock:
Pomodoro clock is count-down clock, which allows you to switch between work and break sessions. You can adjust the work and play dials to choose how many minutes you want to work or play. If you press the large Session button, the count down begins. This project wasn’t that difficult to complete. The hardest thing was figuring out how to create a circle, center it and then start a timer.
TicTacToe:
This is a tictactoe board with a very “dumb” AI. It starts by allowing you to choose Xs or Os. It then continues until either you win, the computer does or a draw occurs. The AI plays a rather simple strategy:
- If the AI can win that turn it. It plays the winning move.
- If the AI will lose this turn, it will block the player from winning.
- If the AI can’t win or block a losing move, it finds the diagonal, column or row with 1 of it’s own tokens in it and no opposing token.
- If the previous 3 positions do not occur, it picks a random diagonal, column or row with no opposing token in it.
At first when I played this AI, I thought it was pretty smart. I soon realized that playing the bottom 2 corners and one of the top corners results in a win for the player every time (at least for O).
Simon Game:
Simon is an old 1990s Toy that plays a sequence of colors that the player has to match. It starts with a sequence of 1 color and increases it by one if the player matches the entire sequence without an error. It does this up to a sequence length of 20 and then declares the player a winner. The Simon game has a strict mode, which will reset the sequence to 1 on a player error.
This specific implementation took me around 4-5 hours. The difficulty came from the fact that JavaScript is asynchronous. This means code that looks sequential in the file executes at the same time. This came as a shocker to me when I pressed the start button, was immediately declared a winner and then watched the entire circle turn lightblue 2 seconds later. What had happened is all 20 sequences had played out at the same time including all… 20 + 19 + 18 … 1 button presses (2 seconds later).
To resolve this specific issue. I created an event on the color buttons. If the player had pressed the correct sequence of colored buttons to match the computer’s color sequence, it would add a new color to the color sequence and repeat it back to the player. To make sure the play timing of the color/sounds was correct, I iterated over the index multiplying each index value i by 2000 milliseconds. This ends up solving all those strange asynchronous bugs and makes the game playable.
After this project, I finally got the front-end certificate for free code camp. It was a cool 6 weeks of part-time coding. The last 2 weeks were especially exciting, because I got to do a deeper dive into JavaScript itself.
Best,
Chris
