Random HTML Projects

A collection of small projects created from scratch with HTML, CSS, and JavaScript

Debounce Demo

I created this project to better understand different debounce functions. I was creating an instant search bar, but I didn't want the search to run after every single new character.

Image Upload

I needed to collect pictures from a lot of people for an end-of-the-year slideshow. I wanted to make it as easy as possible for people, but I didn't want to use social media apps because of image compression and having the pictures in different places. This demo doesn't actually upload the pictures anywhere. It waits one second before saying the upload is successful and says that the upload failed every 3rd picture.

Lights

This was a side project to figure out how to make interactive lights while creating a family feud game.

Circles

I was working on an OBS plugin to control a PTZ camera where I had to create a virtual joystick with adjustable sensitivity. I decided to make a prototype in HTML since it was the easiest way to play around with the values and see what results they give.

Clock

A clock inspired by a youtube video about optimized, accurate javascript counters. Once initialized, it doesn't skip seconds (a common problem when using setInterval for clocks and counters) and doesn't update when it doesn't need to (only once per second and not at all when the tab isn't being used)

DVD Logo

Inspired by The Office. Uses HTML canvas. Settings are in the top right corner

Message Encoder/Decoder

I had an assignment at school where I had to decode a message by answering a list of questions correctly. It took me way too long to decode the message by hand, so I created this in case we would have a similar assignment in the future. We didn't.

Scalable Tik-tak-toe

Not as fun as I was expecting it to be. Basically impossible to beat another person on anything bigger than 3x3.