I was inspired by the hackathon theme of magic! I wanted to make a project that specifically focused on sharing magic tricks for kids.

What it does

Junior Houdini is a catalogue of different beginner-friendly magic tricks. The catalogue is set up like flashcards with each card focusing on an individual trick. The user can hover over a trick that they're interested in, and the card will "flip over" to reveal the directions of the trick.

How I built it

I built Junior Houdini using (HTML/CSS/JS). I also used Google Fonts.

Challenges I ran into

I had trouble figuring out how to make a flashcard have two sides. I initially tried setting it up with JS, but I did some research and discovered that I could make flashcards purely with CSS.

Accomplishments that we're proud of

I'm proud of learning new CSS attributes and how to apply them. Considering I joined this hackathon a bit late, I do wish that I had more time to add more features. But, I'm still happy with the concept of my project and how I was able to implement it anyway.

What I learned

I learned a few new CSS attributes and how to apply them. In addition to creating flashcard effects for the first time, I got to see how to make a glowing animation on text.

I also got to learn a bunch of new magic tricks on the way!

What's next for Junior Houdini

I definitely want to add more magic tricks to the catalogue. I also think it would be cool to add some new features, like an interactive image map with different props and tricks the user can click on to learn more information.

Built With

Share this project: