Codepen December Challenge: "Winter Festival" with WebDataRocks

Svitlana Lorman — Mon, 23 Dec 2024 16:36:01 +0000

Ho, ho, ho, dear developers! 🎅

As the holiday season approaches, I want to thank the DEV community for being a constant source of inspiration, motivation, and useful information throughout the year.
It's amazing how often a simple spark of creativity from this community turns into something magical in my projects. Take styling pivot tables, for instance—it can sometimes feel like untangling a string of Christmas lights. 🎁✨ But with the right motivation and a sprinkle of holiday spirit, even this task becomes a creative adventure.
That’s why, this December, my colleague and I joined the “Winter Festival” CodePen Challenge—the perfect event to experiment and grow. Thus, I’m excited to share the results of our creative three-week journey!
To make things even more interesting, we focused entirely on our team’s product—WebDataRocks, a free JavaScript library for creating pivot tables. Its user-friendly interface, extensive features, and high level of customisation make it an excellent choice for creative and functional tasks like this challenge.
By crafting holiday-themed dashboards, we aimed to showcase the versatility of WebDataRocks and push our own creative boundaries and explore fresh ideas in the process.
I hope you’ll enjoy the results as much as we enjoyed crafting them!

< Snowflakes />
The challenge starts with the ultimate winter theme—snowflakes!❄️ Although New York hadn’t seen any snow when we were working on this task, we took data from a weather prediction app and visualized it using the WebDataRocks Pivot Table. It revealed that freezing temperatures and snowy days were in store for New York City.
The pivot table is a fantastic tool for analyzing predictive datasets and effortlessly uncovering trends and insights. To add a festive touch to this project, we also incorporated a gentle snowfall animation, bringing the season’s magic to life! 🌨✨

< Celebration />
In the second week, participants were invited to celebrate and throw a party in the browser! And no party is complete without music, right? Thus, we analyzed the Billboard Top 100 Christmas Carol and visualized the data using the WebDataRocks Pivot Table. To make the project even more festive, we chose a striped teal color theme and, with a touch of CSS, added a fireworks animation.

< Wrap It Up />

In the final week, the task was to wrap up the presents, duties, or anything else that needed to be completed before the end of the year. We chose to wrap up an analysis of how much people spend on online purchases of various items—from clothes to decorations—during Christmas sales. With WebDataRocks Pivot Table we could effortlessly visualize the result and calculate the average spend for each category.
For this week's challenge, participants were provided with a starter template that included an emoji-wrapped present. Inspired by this, we added a magical unwrapping animation using CSS and JavaScript, bringing an extra touch of festive fun to the project.

< Conclusion / >
And that’s it for now! These three weeks brought some Christmas vibes into our busy lives and gave our team a wonderful opportunity to practice and refine our web development skills. It was a fantastic way to conclude the year by combining data analysis with holiday cheer!
Wishing you all happy holidays and joyful coding journeys! 🎄🎉

Codepen October Challenge: Halloween Edition with WebDataRocks

Svitlana Lorman — Wed, 27 Nov 2024 16:21:26 +0000

Hello, fellow coders! We all know that styling tables can be quite a tricky task. Thus, I decided to bring a little joy to the routine during Halloween. So, with this challenge in mind, I took part in the November CodePen challenge. Since this is my first article here, I’m incredibly excited to share the results of our efforts with you. But before we dive into dashboards, let's take a moment to explore what this monthly coding event is all about.

< Overview of the CodePen Challenge / >
Participants are treated to a new coding challenge every week that will turn their creative gears! One week, it’s a tricky problem to solve, the next is a fresh challenge to conquer. 🌟
As time passes, we find ourselves in October—the spookiest month of the year! 🎃 And just like Halloween, this month's challenges are a little scary and cozy. Or vise-versa 😉
Recently, for my project, I’ve been actively using a free library for pivot tables — WebDataRocks. To make the CodePen tasks more challenging, I decided to limit myself and take on the challenge of completing it using only this component.

While you’re checking out the results, we hope you’ll have just as much fun as I had while crafting these eerie-sweet tasks! 👻

< Halloween Pumpkins / >

Our journey begins with a genuinely Halloween-inspired vegetable – the pumpkin!🍂🎃 By applying custom styles, we gave the data sections a spooky twist, swapped out familiar icons on the grid for Halloween-themed ones, and had fun with the chart. We ensured viewers wouldn't have to guess which dataset they were dealing with. Charts are excellent for working with reports and data analytics: they organize the information, keep things visually engaging without overwhelming, and add a stylish flair—the perfect combo! They’re also great for infographics, making complex data easily understandable at a glance.

I highly advise you to check the current pumpkin price if you want to buy one. 🎃

< Halloween Costumes / >
One of the most beloved parts of celebrating Halloween is dressing up as spooky characters. On the 'scariest' night of 2024, my colleagues and I transformed into various creatures, each more terrifying than the last! Later, I stumbled upon a Halloween Survey dataset, which inspired me to explore the most popular costume choices. To analyze the trends, I designed a pivot table to track the costume selections from the dataset. This turned into a fun and insightful way to uncover what people wore this year, blending spooky creativity with structured data analysis! 🎃👻

Personally, in 2024, I was turned into a vampire for a night 🧛🏻‍♀️. And if you want to find the Halloween character, you can use the filters:

< Halloween Movies / >
The third week’s theme was about Halloween Movies! 🎬
If you’ve ever craved that spine-chilling feeling when your heart races, look no further—check out our pen showcasing the most successful Halloween movies of all time. It's a treat for those who love a good scare and want to dive into the top films that have kept us on the edge of our seats over the years! 🎃

I highly recommend saving this pivot table to your device, just in case you're in the mood for a creepy movie marathon 👻

< Tricks and Treats / >
In the final week, we were served the ultimate Halloween-themed challenge! (and not just in code, but that’s a whole other story) I stumbled upon this dataset, called “Pick Your Favourite Candy in Autumn (Spooky season)”, which was made to figure out what people of all ages and backgrounds want to get and eat during the Halloween season. So, I decided to have fun with it and created a pivot table showcasing all the top Halloween treats. With filters that actually work, anyone can quickly find what they’re into—because who doesn’t love a little Halloween organization? 🍬

< Conclusion / >
All in all, that’s how our October journey with CodePen came to life. This month’s challenge wasn’t just about cranking out lines of code—it was about sparking creative ideas, having fun with the design, and enjoying every step of the process. From styling data dashboards to capturing Halloween’s charm, each task added spooky fun that kept us engaged and inspired. It perfectly blended technical skill, imagination, and a little Halloween mischief!

DEV Community: Svitlana Lorman

Codepen December Challenge: "Winter Festival" with WebDataRocks

Codepen October Challenge: Halloween Edition with WebDataRocks