Night of the Living Skulls

Celebrate Dia de los Muertos and Halloween while abiding by the CDC guidelines using this build your own Calavera mask. Design your own sugar skull then upload the image to create a custom face mask!

Comment

Inspiration

COVID-19 has greatly impacted the way we celebrate some of our favorite events. With Dia de los Muertos and Halloween coming up soon, we wanted a great way to celebrate these events while promoting CDC guidelines.

What it does

Night of the Living Skulls allows individuals to decorate their own Calavera using multiple fun decorations and colors. The unique image can then be printed out and worn as-is, or uploaded to another service, such as Vistaprint, in order to create a custom facemask! Other ideas include using the design as a pattern for custom fabrics.

How we built it

We built this using HTML5, CSS3, Javascript, jQuery, jQuery UI, Visual Studio Code, Git, and GitHub. We used screen sharing in order to peer-program and bounce ideas and solutions throughout the process.

Challenges we ran into

Within the 24-hour period, we tried multiple different methods to bring our sugar skull mask idea to life. We were initially very excited to try out React since many developers talk about it but found that there was so much confusion, just with downloading. After spending far more hours than we intended on understanding React, with help from mentors, we decided we were too new or rusty with our Javascript skills, and switched to using jQuery. Additionally, we intended to create decorative shapes using a canvas/jCanvas and custom graphics but were unable to integrate them together. Therefore, we decided to use royalty-free images from Shutterstock.

Accomplishments that we're proud of

We are beyond proud of what we accomplished in 24 hours! The biggest source of pride comes from being able to drag, drop, and clone the decorative images. Between the decorative images and the canvas element, which was converted to a column layout, it was amazing seeing the two being integrated and working with the drag and drop decorations.

What we learned

Completing a hackathon project in 24 hours is no easy feat! Above all, we learned patience and flexibility. We had to exercise patience when learning or attempting something new or when trying out different ways of coding elements. Flexibility was key when we had to pivot our plans and use a different library or come up with a different way of integrating features. Additionally, we also learned new ways of tackling complex coding situations, and strengthened our Javascript skills!

What's next for Night of the Living Skulls

We plan on expanding on this idea and adding more features. We will enable a toggle button to display the bottom half of the mask for the creation of face masks to cover the nose and mouth, integrate a color picker for decorations and customization, and allow for saving and exporting of images for the creation of custom face masks.

Share this project:

Updates