JavaScript Calories App
![$images[0]['name']](/post-images/1594350920-1-To-Do-List.png)
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.
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
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
Now for anyone reading my post this is part of the JavaScript Course from Scratch to Advanced.
