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 repl.it (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.