top of page

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.

Screenshot 2024-04-12 at 1.42.40 AM.png

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:)

Screenshot 2024-04-12 at 2.20.09 AM.png

Live Site

(Works on both mobile and desktop)

bottom of page