Your Inner Boba

V3.0 Home Page
V1.0 Questions Page + Inspect
V2.0 Home Page
V2.0 Leaderboard Page

Inspiration

Valentina: Me and Emily were in the midst of thinking up a project when I asked her what she loved.

Emily: I enthusiastically replied with “An excessive amount of bubble tea.” My wallet can confirm that.

Valentina: That's when I came up with the funny idea of doing a "Bubble Tea Personality Quiz!" We laughed at the idea and then decided we made the decision to finalize it as our project idea.

What it does

Valentina: It's a fun project we built that matches our user to a certain Bubble Tea Type! The user answers a set of 10 questions and gets a score out of 40 points. Then they are matched to one of our ten bubble teas.

Emily: The website shows a homepage that leads them to a page with questions. After it scores the choices users pick from 1 to 4. Then tally them up to match them with a bubble tea. It can also send them back to home or restart the quiz.

How we built it

Emily: As beginners to web dev, we followed a YouTube tutorial by Brian Design (https://www.youtube.com/watch?v=f4fB9Xg2JEY ) and then customized the code to fit our theme and design. We created elements using HTML, then customized them using css, and finally giving them logic and functionality with js.

Valentina: Although we hadn't had much experience with HTML, CSS, and JS before this hackathon, our prior coding experiences in Java and Python had taught us about logic and the basic functions like if statements, booleans and much more. We would also like to send our appreciation to our mentors: Vivian, Jacky, and REALLY! They aided and guided us throughout our Hackathon journey! Also, I'd like to secretly thank Emily for carrying me with HTML and JS and Rachel for the pitching!

Emily: I also would like to thank my teammates for working with me to create something I could have never completed in a day.

Challenges we ran into

Valentina: There's quite the list of challenges we encountered throughout our 24h hackathon. Our first being on deciding our project idea and the second being on how big of a project we could really take on.

Emily: We had issues with misplaced syntax because we were used to coding in another language (Java). Along with that, I mistakenly thought backticks were single quotations and that caused it to display the code as a string instead of the value of the code. Finally, a big error we faced was mistaking arrays as objects and I tried to apply array functions to an object.

Valentina: I'm not too sure (still haven't figured out why this occurs), but on CSS Replit, I couldn't use RGBA, since a square with the color usually appears when it is working. This caused the colours not to display, which was a problem that occured for quite a long period of time. Later on I changed it to RGB which worked. Also, I accidentally had a (;) semicolon in the spot of a (,) comma, which had caused the button to not turn green when clicked.

Emily: We had trouble accessing and changing elements in HTML. With the help of mentors we had code that got elements by id in javascript, but the code would not run to show the images on the website. Valentina found that when calling elements by id, you do not include a hashtag which made the code run smoothly. After, we tried to implement the same technique to change text but it would not run. Valentina again realized that we have already used the variable “name” which was causing the script to fail.

More Challenges:

Small syntax errors that were hard to locate and find
Certain elements not displaying
variables being misspelled in the code
lots of time spent on fixing errors as well

Accomplishments that we're proud of

Valentina: Definitely bringing Emily's excessive love for Boba into our project! It's my Pride to make something we love, even though shhh, secret for you, I don't drink Bubble Tea. Also the fact that this is my 2nd HTML/CSS/JS website! Hope we exceeded the expectations of everyone who supported us!

Emily: Creating a website that has cool functions and designs! It feels like something you would find on the internet instead of some of my past projects which are missing some components.

Creating a website that looks pleasing
Making our 2nd website of our lifetimes
Breaking expectations and creating a quiz-type website

Valentina: Oh, almost forgot! For officially finishing my first Hackathon Project with a team!!! Last year, we didn't get to finish the whole code for our project, but I learned a lot last time and this time as well! I also stayed up until 2AM in the morning trying to debug our code, which is something new!

What we learned

A lot of HTML, CSS, JS
inspect function on Google (for open source)
Being detail-oriented fixes bugs
Testing even more than we usually do (it's a lifesaver)
Mentors aren't scary, they help save time and are our saviors!

Valentina: A whole new language in almost 24 hours!!! A lot of HTML, CSS and JS. I learned from Emily about the inspect function on Google which was quite helpful when editing the CSS code because it showed you the individual elements and the imaginary boxes they were placed and formatted in. We learned the hard way, that trial and error is key. We did a lot, but in reality we needed to do even more during the process.

Emily: Other than learning a new language and environment, I learned life skills from my teammates and experience. I learnt how to coordinate more effectively from Rachel when she used a website that tracked when teammates were available. Additionally, I learnt from Valentina how to section work and always be careful during the process.