Cooked-O-Meter

Title and 1st question

Inspiration

The idea was a mix of internet slang "cooked" and buzz feed quizzes. Cooked mean overwhelmed or burnt out. So I wanted to create a silly, retro style meter that measured how cooked someone is. I wanted it be silly but usefully. Anyone who is truly "cooked" get lock in tips at the end, turning it to an inevitable realization of where you stand, to a mini accountability tool.

What it does

It is a 5 question, self-diagnosist quiz that calculated the score from 0-200.

Quiz: 5 questions about your sleep, productivity, mindset, last time you were productive, and current energy level. With a progress bar that shows how far you are into completing it.

Results: Shows a loading screen as it calculates the result, showing a tier scale label and the description of where you land. Where the closer you are to 200, the closer you are to be cooked.

Lock-in Tips: If your score is greater than or equal to 100, you have the option to have 5 randomly generated tasks with checkbox. Once all tasks are completed, you can re-take the quiz to see if your cookness level has changed.

How we built it

Mainly structured with HTML and CSS for styling. I used Google fonts to give off a more retro theme. Javascript for logic making.

Challenges we ran into

Micro-transitions were delayed, and sometimes transform: translate end..

Accomplishments that we're proud of

Not using over complicated frameworks, I got to use all of it on vscode. I'm also proud of the aesthetic that was achieved, with the pixel font to the transitions.

The loading screen I was definitely proud of, because I did not know how to achieve it, especially since it lagged and broke my code sometimes.

What we learned

Starting everything at once Definity slowed my progress down initially, having to build a skeleton first before adding the design really helped my slow down and find the initial problems without having any stylizations blind me.

Animations really convince the clean UI/UX design despite the simplicity of the project itself.