Inspiration
Big ups to the YouTube channel Fireship for explaining a bunch of cool stuff I wanted to learn how to do. Specific stuff can be found in comments surrounding any corresponding code.
And less of a literal creative inspiration and more of a motivation kind of inspiration, I'm really glad to have been led by everyone helping out with the Bloom projects. From the workshops to the discord, there was an abundance of places to go for help. I had no experience prior to this project so it means a ton that I was able to
What it does
The website features a simple list of cards which shift around as the cursor hovers over them. The cards feature flavors with buttons that can be clicked on, changing the theme of the website as well as the accompanying text.
How I built it
After pumping out the HTML, I turned to CSS to create a list of cards that had the interactive hovering function I wanted to create. I couldn't have done this without watching Fireship's video, which I linked in a comment preceding the code in question. Once I finished setting those up, I created separate classes for each given theme, differentiating them by color, background color, and similar features. I then used javascript to select the various buttons on the cards, adding an event listener so that each button could replace the class of the body depending on which button was clicked. I also changed the display of different portions of text in the HTML so that they would only show up alongside the corresponding flavor.
Challenges I ran into
Changing properties of the cards themselves was something I found to be much more complicated than I expected once I got to it. I had to settle for changing colors alone, even though I was hoping to go nuts with the borders, fonts, and other text features to really sell that vibe of visually expressing a taste.
Accomplishments that I'm proud of
I was overjoyed by how quickly I started to be able to find mistakes in code and figure out what was wrong whenever I reloaded the website and saw it go hogwild. I was really happy with implementing transitions on the fly in a way that made things look a bunch smoother.
I'm excited to have learned how to implement a theme switcher. It's something that I see more and more every day in my regular time spent on the internet so I'm sure it'll be a useful thing to know moving forward.
What I learned
Apart from specific projects, there's a LOT of passive learning to be done through YouTube!
More specifically, I found out how to quickly variables (and even variables within variables) in CSS, how to use logic in javascript, and tricks for making websites feel a lot more interactive, specifically with hover pseudoclasses and event listeners.
What's next for Ice Creamy Themey Themes!
If I can, I'm thinking to rewrite blocks of code to make it much easier to change some aesthetic features of the website. I'd like each different flavor to have it's own personality, not just a color palette. I wasn't able to change any aspects of the individual cards on the fly besides the colors, and I ended up feeling a bit underwhelmed. But with some restructuring, I bet I can make it work.
Log in or sign up for Devpost to join the conversation.