Labs

JavaScript Calculator (uses ES6 with the Babel transpiler)

I built this JS calculator as an excuse to experiment with vanilla Javascript, and use some of the new ES6 syntax. Here, I've used the new arrow function syntax, as well as defining vars and constants with let and const. I'm using flexbox to layout the buttons, and I used a handy CSS feature, the attr() function. This function allows you to pass any attribute on an element to the 'content' property of a pseudo element (such as :before or :after). I used this to output a data attribute to the screen while debugging. Handy stuff.

It uses the Babel transpiler to convert ES6 code features back to ES5, which is supported in all the common browsers.

See the Pen Calculator ES6 by Richard (@richardhuf) on CodePen.


Signup form with rotating card

A signup form that uses CSS 3D transforms and perspective to flip over, like a card, when submitted. The trickiest part was getting both card faces to be the same height with fluid content, using flexbox.

See the Pen Signup form rotating card by Richard (@richardhuf) on CodePen.


Media List - PHP App

A PHP application designed to query IMDB, get movie information and save a list of your DVD and Blu-ray collection to a database. Uses the OMDB API, MySQL and PDO for database connection and is hosted on Heroku. Also has the ability for users to create their own accounts. Written from scratch.

View Media List App


Accordion in pure CSS

See the Pen Pure CSS accordion by Richard (@richardhuf) on CodePen.

Experimenting with particle.js

See the Pen particles.js demo by Richard (@richardhuf) on CodePen.