< Back to portfolio

Free Code Camp – Front End Projects (Advanced)

Tech stack: HTML, CSS, JavaScript

These are the advanced front-end development projects which are required for the Free Code Camp Front End certification. They are the calculator, pomodoro timer, a tic tac toe game, a Simon game.

Simon game

Overall

I always enjoy making projects that are closer to software development than web development & design. It’s a good change of pace as I mainly do web development work. These projects were relatively short and rewarding to make.


Calculator

 

Calculator

The first project was the calculator. This only needed to be a simple, desk-like calculator, as making anything like a standard scientific calculator would be an extreme undertaking and require tons of testing and quality control. Like most desk calculators, it performs each operation in the order of input, not following BODMAS / PEDMAS. It also has simple features such as addition, subtraction, multiplication and division.

The challenge with the calculator was programming all the cases for user input. For example, in this particular calculator, typing a different operator overwrites the previous one. There was also the need to not allow multiple dots in a number, not allow operators before a number has been inputted, and so on.

Making the calculator reminded me of the importance of planning. I thought that this would have been a very simple project, so I skipped the planning and dove right in. But I quickly got reminded that a little bit of planning would have been very beneficial and it would have quickly regained its cost in terms of time, even for a project as simple as this. The main time save would have been in outlining all cases of user input and behaviour ahead of time.

Visit project


Pomodoro clock

Pomodoro timer

A pomodoro session is a time-management method used for productivity. A common example is to set yourself a timer for 25 minutes where you do something productive, such as study or work. When that time is up you take a 5-minute break or so.

The benefits of the technique are considered to be:

  • Good time management – It’s easier to study in 25-minute sessions or so and take small breaks, than just studying whenever you “feel like it”.
  • Beat procrastination – A common reason for procrastination is having a large, daunting, task in front of you which you’re trying to avoid. Pomodoro helps combat that because you only have to work for 25 minutes. Knowing that you don’t have to spend hours on a project makes it easier to get started.
  • Potentially better way to work – In addition to the time management and procrastination benefits, some people may find that breaking up work into chunks makes it more productive overall.

Personally, I don’t particularly use the pomodoro technique except maybe to help beat procrastination. I find it much more effective to keep working indefinitely, until I feel that I require a break. I subscribe more to the camp of working while you’re “in the zone” and not artificially stopping after a set time.

Making the pomodoro app was very smooth. A little bit of planning helped make it one of the smoothest things I have ever programmed.

Visit project


Calculator

Tic tac toe

This is just your standard tic tac toe game. The main challenge with this was keeping track of correct state changes and logic depending on whether one or two players were playing the game.

The two-player version was the easier one to program, not requiring any AI and not needing to block user input at any time. But with one player, I needed to program the AI and also block user input during the AI’s turn (in case the user tries to make another move during the computer’s turn, either accidentally or on purpose).

Visit project


Simon game

Simon game

This was my favorite of the four projects. It involved the most things both from a visual perspective and a logic perspective. Neither was very complicated, it was more the amount of things that needed to be done compared to the other projects.

On the visual side, there needed to be different colors for every button, depending on whether the button was “active”, “playing” or even if it allowed interaction. For example, the color buttons don’t allow interaction when the game is playing back the correct order, or for the second that they’re active after the player has just pressed one. I chose to implement “non-interactivity” with the CSS property “pointer-events”. I found it much simpler than the JavaScript code it would otherwise require.

From the logic side, the main considerations were:

  • Performing the correct action based on whether “strict mode” was enabled.
  • Completely resetting the game the instant the “start” button is pressed.
  • Setting delays, intervals, timings and animations so that the game and visuals flow smoothly.

Visit project


Conclusion

I really enjoyed making these programs. Fundamentally, I find making programs like these very similar to making a website, but the difference in way of thinking and the way they are made is refreshing. In the future, I plan to make much larger scope apps.

< Back to portfolio

^