rheanath - Stardance

Ship

For my first hackathon (United Hacks V7), I built Cursorletics, a website that helps users improve their cursor skills through interactive training drills. The current version includes a Speed Drill that tests clicking speed and a Reaction Drill that tests reflexes. I'm very proud that I was able to create two fully interactive drills within a timely manner, especially since I'm much more experienced with HTML and CSS compared to JavaScript.

To try out Cursorletics, simply choose either the Speed Drill or the Reaction Drill from the homepage. Each drill begins with a short instruction screen before the game starts, and your results will be displayed once you finish. I hope you have fun trying it out, and thank you for checking out my solo project! :)

1 devlog
3h

Try project → See source code →

Open comments for this post

@rheanath on Cursorletics · 4 days ago

3h 1m 9s logged

Cursorletics Devlog #1

What I built:
I built Cursorletics, a website that helps users improve their cursor skills through interactive drills, for my first hackathon (United Hacks V7). The current version includes two training drills: a Speed Drill that tests users’ clicking speed and a Reaction Drill that tests users’ reflexes.

What broke:
There were some bugs while I was working on Cursorletics. One silly cosmetic bug I resolved had to do with the sparkles that appear after a user clicks on the screen. At first, the sparkles did appear wherever I clicked the screen. However, once I scrolled down, the sparkles were appearing nowhere near my cursor (it was now offset). Yikes!

Another bug I quickly resolved had to do with Bootstrap. The orange buttons changed into the default blue for a second whenever I click it.

What did I learn:
Working on Cursorletics gave me much more experience with using both JavaScript and Bootstrap as well as coding within a timely manner (no procrastination!).

A decision I made:
One decision I made while working on Cursorletics was to keep the entire website centered around an orange palette. Originally, I was planning to use a blue palette, but I ended up using an orange palette because it makes the website look more bold and energetic.

Something that surprised me:
I was surprised by how my two training drills successfully worked out, especially since I am more used to web designing (HTML and CSS). It was really cool that I was able to add interactive elements.

Aesthetic and design:
Apart from the orange palette I discussed earlier, I also wanted to include my own artwork (made in MediBang Paint Pro) within the website as well. I made sure that the website overall is welcoming and engaging!

Thank you for reading my devlog! Take care! :)