Inspiration
SpookSpark came from my love of neon vibes, quirky humor, and a little bit of spookiness. I wanted to make something that could give people a fun, mysterious, and slightly eerie feeling just by clicking a button. It is perfect for sharing quotes, getting some Halloween energy, or just enjoying random haunted fun. The neon glow comes from my fascination with bright colors in dark spaces, and I wanted to create something that instantly catches the eye and feels visually exciting.
What it does
SpookSpark is a spooky quote generator that delivers haunted, funny, and mysterious messages with a single click. Every quote pops up with glowing text, little floating ghosts, and smooth animations to make it feel alive. It is a mix of fun, humor, and mystery, all wrapped up in a visually striking neon theme.
How we built it
I built SpookSpark using HTML, CSS, and JavaScript. The HTML sets up the page structure with a container for the quotes and buttons. CSS adds the glowing neon text, floating ghost animations, and foggy background effects. JavaScript randomly picks a quote from an array each time the button is clicked and triggers animations to make it appear in a lively way.
To pick a random quote, I used this simple logic: index = Math.floor(Math.random() × quotes.length) This makes sure every quote has the same chance of showing up.
Challenges we ran into
The hardest parts were making the neon glow look good on all screen sizes, timing the animations so they felt smooth but not slow, and keeping the text readable while keeping the spooky aesthetic. I had to tweak the glow and background effects multiple times, but it was fun experimenting and finding the right balance.
Accomplishments that we're proud of
SpookSpark is my first hackathon project, so honestly just getting everything working felt like a big win. I’m proud of how the neon glow and spooky effects turned out, and I’m really happy that the quote generator feels smooth and fun to use. Seeing the idea in my head actually come to life was the best part.
What we learned
Since this was my first hackathon, I learned a lot about staying focused, planning features, and not freaking out when something breaks. I picked up new tricks in HTML, CSS, and JavaScript, especially around animations and randomization. Mostly, I learned that even small projects take patience and that it’s okay to figure things out as you go.
What's next for SpookSpark
Right now I’m keeping it open. Since this was my first hackathon project, I want to explore a bit and see what direction feels right. If I continue it, I might add more themes, more quotes, or maybe make the interface a little more interactive. For now, I’m excited for whatever the next step turns into.
Log in or sign up for Devpost to join the conversation.