JavaScript Calories App


This post will be for the current and future students of my course that I will release soon about JavaScript. Now in this course we will create smaller projects and this is like reference for them

JavaScript Calories App - Architecture, Modules, Functions, Objects , Project Walkthroug

This post is for everyone even if you are not a student in my JavaScript course. This post will teach you about having clear modular architecture to build small and large applications. Our next chapter will be very important for us as future professional developers. Now if you look at my course description for JavaScript and the Dice game you can see that we didn't have any planing or layouts available before coding the game. What we did had was a simple HMTL Markup with nice front end design but we didn't have any Architecture.

JavaScript Architectrue

Now we need to have something in front of us in order to create a powerful and fast JavaScript Application. We need to set our goals because without goals we can't be programmers, actually, we can't achieve anything without proper goals set in advance.

Lets Start Thinking Before Doing Anything Else

For this project the HTML Markup and Starting CSS and starting JavaScript code will be given. So we will not cover how the HTML markup and CSS/ Sass is coded but this is a JavaSript course and our main concern here is to learn how to write JavaScript code

Lets Look What We Can Do With Our App


First we can choose to add calories. So I have created this app so we can add calories through food or drinks and burn calories through exercise. So you will have two options for selecting either food or exercise in our application.

select png

Second we need to input what food we have eaten and its calories. We can also choose the number of portions as well.


Thrid we need to press the button that is simple font awesome check icon and after that, we should be store the values somewhere for the food, quantity, and calories. The calories accept the decimal values

Where is Our Result?

So the result will be printed in a couple of separated windows in our app. Based on our selection the result will be stored in food or exercise panel or window. After that this will be updated in the main app with the calories, remaining, percentage and etc


Lets Add Exercise and see the exercise window before showing the main panel


The result is printed in the exercise window and green dot is displayed near the food or exercise btn

And Finally the main window will look like this

burny-picture4.png result.png

On top of the app there is a date with current day, year, and percentage. It is important to know that I have chosen to have average calories so we can start our daily app with 2,300 calories, of course, you can change this as per your needs. Now adding the calories through food will decrease that 2300 cal. and exercising will add calories. You can get the logic from the images provided here and in the list bellow

  • 1. We start with 2,300
  • 2. We ate the food of 260 cal and that leaves 2,040. Result: 2,300-260 = 2,040
  • 3. We burned 150.57 calories and that increased the amount. Result: 2,040 + 150.57 = 2,191
  • 4. The percentage is calculated when we subtract the calories we add minus the calories we burned in this example it will be 260-150 = 111. So after that, we divide that result with the minimum calories per day and multiply by 100. In short : (111/2300)*100 = this will give us 4.8 but we can round it to 5 percent.

Lets see the To Do List for the first part


Architecture Setup

For our application we will use modules to not just this application but much bigger application. Modular Architecture is the most important in every programming language and they are essential for developers like us to develop large and robust applications.

Modular Architecture Basic Definition

Modular architecture refers to the design of any system composed of separate components that can be connected together. The essence and usability of the modular architecture are that you can replace or add any one component (module) without affecting the rest of the system. We need modules for maintaining large chunks of code, also we can reuse the same code where we need.

Modules Enable Data Encapsulation

Data encapsulation is also known as data hiding so its a machine that is used to keep the data hidden from the user. Therefore the user can only perform a restricted set of operations on the hidden modules and functions. The users can use public functions and through them make a connection to the private or hidden functions and modules.

The Question Here is how we can apply modules to our application

So we will have three modules in our application.

  • First Module will be the Main App Controller Module. In this module, we will call other modules public functions and this will be a connection to other modules.
  • Second Module will be App UI Module where we are going to have all functions that are in direct link with Graphical User Interface
  • Third Module will be Calculation Module where we are going to have all functions that are in direct link with data manipulation like calculating the calories and etc.

Second To-Do List

After we have completed the first to-do list we need to start thinking about what we will do next. And the simple answer is to delete the item from our storage and delete the item from the Graphical User Interface and to calculate again the total calories. After every delete, we need to calibrate our calories for that day and also again display those changes in the app.


Third and Final To-Do List

Now in the last step we will do some cosmetic changes to our app, we will need to display the current year, day, month and also we need to have good formatting for the numbers to include comma if they are thousands and to have two decimal spaces.


Final Architecture Design with Methods

to-do3 final architecture

Now for anyone reading my post this is part of the JavaScript Course from Scratch to Advanced.

About TheodoreCoding

TheodoreCoding is site where we publish all of our web development articles, courses and YouTube Content. This content is owned by Rick Sekuloski, which is owner of this site and the courses and Youtube Channel. Here people can find relevant information regarding any news from IT world, latest web development techniques and etc. Our goal is simple to create fun and interesting content for our viewers. Here you can find udemy coupons for some courses or promotions.