Crit Clock, Go!

Check out a live demo here: https://bettyfileti.github.io/Crit-Clock-Go/

Wireframes

I wanted to revisit a script that I had written in python a few years back, called "Crit Clock, Go!" It's a fairly straight-forward calculator, that helps you quickly determine how much time each participant in a critique should have, and how long of a break you can give the group.

My original version of the script had the math setup well, but little to no interface. When picking this project back up, I wanted to emphasize the UI of the calculator and build the project as a web app.

‍

‍

Design

I was anxious to start development. Rather than stressing over design, I got a few major ideas in place, designing mobile-only, and then jumped into development. (It was more fun that way.)

Development

This was a great learning challenge for me, as I had most of the critical thinking in place. This let me focus on the process of building up HTML, Javascript functionality, and the CSS. This approach helped me solve each section, one area at a time and kept the process from feeling overwhelming. I figured out how to target the different HTML elements with javascript, which helped keep them consistent and clear for when I eventually tackled the CSS. This also presented an opportunity to learn about different built-in input areas. Utilizing these standard inputs helped me to check that the web app was accessible via tabbing.