Mini Dev Projects
A collection of small projects that I designed and developed.
Development projects
Overview

The following projects are the required projects for the Front-end Development Certificate from FreeCodeCamp that I completed in June, 2017. FreeCodeCamp is the largest open source online community in the world teaching people how to code. The front-end curriculum covers HTML, CSS, Javascript/jQuery/Ajax, as well as practical development techniques, such as using web APIs and applying common dev frameworks/libraries (e.g. bootstrap).

Time

2017.4 - 2017.6

Role

Visual design
Development (HTML, CSS, Javascript, jQuery, Ajax)

Simon game

User stories:

  • Users can play a game of Simon.

  • Users can play in strict mode where if they get a button press wrong, it notifies them that they have done so, and the game restarts at a new random series of button presses.

  • Users can win the game by getting a series of 20 steps correct. They are notified of their victory, then the game starts over.

Sources:

Simon game

Project screenshot

Tic Tac Toe

User stories:

  • Users can play a game of Tic Tac Toe with the computer.

  • The game will reset as soon as it's over so users can play again.

  • Users can choose whether they want to play as X or O.

Sources:

Tic Tac Toe Tic Tac Toe

Project screenshot

Pomodoro clock

User stories:

  • Users can start a 25 minute pomodoro, and the timer will go off once 25 minutes has elapsed.

  • Users can reset the clock for my next pomodoro.

  • Users can customize the length of each pomodoro.

Sources:

Pomodoro clock Pomodoro clock

Project screenshot

Calculator

User stories:

  • Users can add, subtract, multiply and divide two numbers.

  • Users can clear the input field with a clear button.

  • Users can keep chaining mathematical operations together until they hit the equal button, and the calculator will tell them the correct output.

Sources:

Calculator

Project screenshot

Design quote generator

User stories:

  • Users can click a button to show me a new random quote.

  • Users can press a button to tweet out a quote.

Sources:

Design quote generator

Project screenshot

Weather app

User stories:

  • Users can see the weather in their current location.

  • Users can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather.

  • Users can push a button to toggle between Fahrenheit and Celsius.

Weather app Weather app

Project screenshot

Wiki viewer

User stories:

  • Users can search Wikipedia entries in a search box and see the resulting Wikipedia entries.

  • Users can click a button to see a random Wikipedia entry.

Sources:

Wiki viewer Wiki viewer

Project screenshot

Twitch channels

User stories:

  • Users can see whether Free Code Camp is currently streaming on Twitch.tv.

  • Users can click the status output and be sent directly to the Free Code Camp's Twitch.tv channel.

  • If a Twitch user is currently streaming, users can see additional details about what they are streaming.

  • Users will see a placeholder notification if a streamer has closed their Twitch account (or the account never existed).

Twitch channels

Project screenshot

KT film library

This is a personal project that I started to showcase all my favorite movies. Unlike previous projects, this is not a FreeCodeCamp project, but driven by my own need.

User stories:

  • Users can see a collection of movies. Each movie contains related info, such as title, runtime, year released, tagline, genre, description and trailer.

  • Users can filter on movies by genre.

  • Users can sort movies by title, runtime and release time.

KT film library KT film library

Project screenshot