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