Sonny Yan
Cute Desk Generator
Project Type: Individual Project
Time: March, 2024
Tools: HTML, CSS, JavaScript
A cute desk generator that allows users to select mix and match different colors, styles, and accessories to customizing their own adorable desk.
Design Process
I drew out the assets on Procreate, which include four types of desk-top and fifteen types of desk-bottom, all of which has seven different colors as well. I also created six types of decorations and seven types of backgrounds.
All of the coding process was conducted and hosted on Replit.
On HTML side, I created a canvas for displaying images, and inserted the key feature images as button thumbnails. On CSS side, I styled the page with customized font and color palette. I also added the hover and active effects for the buttons. On JavaScript side, it's where all of the interaction begins. In addition to the mix & match games at the bottom part of the page, I've added two additional functions on the right side of the page, one to generate a random desk combination and the other to save the current combination and download it as an image. Would also like to work on adding more features into this generator:)
(Works on both mobile and desktop)