nmcolome / quantified-self Goto Github PK

This app's intent is to give users a space to see how many calories they have consumed in a day. Not only that! It also allows you to compare how the calories consumed compare to their goals! Watch out, text turns red if you eat too much!

The page loads to a calorie counter. You'll see a list of foods on the left. Click the checkbox for any food you've eaten for a particular meal, then click the meal button to add it to that meal. WATCH IN AWE AS THE FOOD MAGICALLY APPEARS IN THE TABLE FOR THAT FOOD!!! OMG, AND THE CALORIES UPDATE TOO!!! Did you see that sweet color changing action when you ate too many calories for a meal? Neat.

Did you add a food to a meal that you didn't actually eat? Click the red x next to any food to remove it from the meal.

Is that dern food list too long to read everything you might want to eat? I hear you. Use the filter feature just above the foods list to find the food you're looking for. SO FREAKIN' SWEET!!!

Does that food list not show a food you're interested in eating? Don't slack off! You still need to count those calories! Just click the 'New Food' button to be taken to the foods page.

On the foods page, you can add a food using the add food table. Be careful, if you don't have a food name and a calorie count for that food, you will be shamed!

Too many foods on the foods list? Click the red x next to any food to delete it from your food options.

Return to your calorie counter by clicking on Calorie Counter in the navbar at the top.

Checkout the live version of the app at: https://squeemishly.github.io/

Frontend:

• Vanilla Javascript
• JQuery

Backend: Consumes an api built in Express, Node, and Knex. Checkout that repository here: https://github.com/nmcolome/qs-js-api