Projects

A collection of personal projects.

Contents

• Birthday Calculator
• Block Breaker
• Catch the Monster Game
• Elliott Smith Tribute Page
• Geolocation Weather App
• Hex Colour Generator
• Ionic Contacts Manager
• Issue Tracker
• JavaScript Calculator
• Live Code Editor
• Matrix Terminal
• nickdraketabs.co.uk
• Nth Character Finder
• Pomodoro Timer
• Quotes on Design Generator
• React Map Pins
• React Wikipedia Search
• Rental Rate Converter
• Simple Clock
• This Rabbit Does Not Exist
• UK VAT Calculator

Birthday Calculator

Work out how old you will be in the year entered and what day of the week your birthday is.

Built using:

• HTML
• CSS
• JavaScript

Block Breaker

Based on the classic game Breakout.

Inspired by this tutorial.

Built using:

• HTML
• CSS
• JavaScript

Catch the Monster Game

Inspired by this tutorial.

Built using:

• HTML
• JavaScript

Nth Character Finder

Find the nth character in a word.

Built using:

• HTML
• CSS
• JavaScript
• Vue.js

Elliott Smith Tribute Page

A tribute page for the musician Elliott Smith built for freeCodeCamp.

Built using:

• HTML
• CSS
• Bootstrap

Geolocation Weather App

Simple weather app built for freeCodeCamp. It displays the local weather for the user based on browser geolocation.

Built using:

• HTML
• CSS
• JavaScript
• jQuery
• AJAX

Hex Colour Generator

Randomly generates a hex colour on user input.

Built using:

• HTML
• CSS (using BEM methodology)
• JavaScript

Ionic Contacts Manager

A contacts manager that allows users to create, edit and view contacts.

Built using:

• HTML
• Sass
• Ionic

Issue Tracker

A small tracker app that allows a user to track issues which are then saved to their browser's local storage.

Inspired by this tutorial.

Built using:

• HTML
• CSS
• JavaScript
• Bootstrap

JavaScript Calculator

A simple calculator built for freeCodeCamp.

Built using:

• HTML
• CSS
• JavaScript

Live Code Editor

An editor that lets you write HTML/CSS/JavaScript and see the results live in browser.

Built using:

• HTML
• CSS
• JavaScript

Matrix Terminal

Inspired by this scene from the movie The Matrix, a simulation of Neo's terminal. To achieve the typewriter effect I used this script.

Built using:

• HTML
• CSS
• JavaScript

nickdraketabs.co.uk

Gave the original site a facelift using CSS, replaced much of the original HTML and made it mobile-friendly.

Built using:

• HTML
• CSS
• Bootstrap
• Nunjucks
• Gulp

Pomodoro Timer

A pomodoro timer built for freeCodeCamp.

Built using:

• HTML
• CSS
• JavaScript

Quotes on Design Generator

Generates a random quote about design, built for freeCodeCamp.

Built using:

• HTML
• CSS
• jQuery

React Map Pins

A map with selectable location pins.

Built using:

• HTML
• CSS
• React

React Wikipedia Search

A Wikipedia search viewer, it returns search results in card format with an image (if available).

Built using:

• HTML
• CSS
• React

Rental Rate Converter

Convert between weekly and monthly rental rates.

Built using:

• HTML
• CSS
• JavaScript

Simple Clock

A clock that switches between analog and digital.

Built using:

• HTML
• CSS
• Vue.js

This Rabbit Does Not Exist

Displays a random photo of a rabbit generated by Stable Diffusion.

Built using:

• HTML
• CSS
• JavaScript

UK VAT Calculator

A minimal calculator for quickly calculating VAT from an input amount.

Built using:

• HTML
• CSS
• Vue.js