Since currently you cannot go out to trick-and-treat and see other people's costumes, we have brought the costumes to you! We created a website that lets you play around and dress up with different outfits.

What it does

Our app recreates the full Halloween experience! No need to go out for Halloween anymore; we've brought the costumes to you. Mix and match your favorite pieces to create over 15600 different outfits!

How we built it

Built using HTML, CSS, and Javascript, with the libraries JQuery and Bootstrap. Graphics made in Adobe Photoshop.

Challenges we ran into

This was Emily's first hackathon and Tracy's second. As this was only our first and second hackathon ever, our past experience in coding and hackathons was only in Python, and shifting to Javascript was a huge leap. We were beginners in Javascript, and this was our first major project that was coded in Javascript. The narrow time frame we had really pushed us to our limits and helped us work together to create a truly fantastic product. We attempted to go above and beyond in user accessibility by creating a website for this hack, something that we have never done before for a hackathon. Drawing the clothes took a lot of time. All 40 of our graphics were painstakingly hand-drawn. Down the road, we eventually figured out that we had to superimpose all of the clothing items onto the model; the image had to be the same size as the model and also be transparent. This was a setback because we had to go back and adjust all of the image sizings. Also, we had to figure out how to program the buttons to efficiently switch to the next item without having to list them all out. We eventually devised a way to solve this by adding all of the images onto the model and selecting which photos to turn invisible and visible.

Accomplishments that we're proud of

We are proud of our finished product, a website where you can try on different outfits. It made us really happy that we could format the images to look good when stacked on other clothing items, and we were proud of overcoming that setback. We are also really proud that we managed to find a way to solve the issue of changing the clothing image when the corresponding button was clicked, without having to list the name of every picture (which would be very time-consuming considering there are 38 different clothing items!). This hack was a learning experience, and we would definitely do a hackathon like this again!

What we learned

It was our first time building a dress-up website like this, and we can totally use the Bootstrap and JQuery knowledge applied here in many other website-related projects. For our next hackathon, we will probably utilize Javascript and those libraries as well!

What's next for Costume Maker

If people really like this website, we will expand their clothing selection and improve user accessibility and appearance. We are looking for more pants and perhaps a back button.

Share this project: