complete README.md

README.md

@@ -28,7 +28,7 @@
 </p>
 
 # About The Project
-A simple <i>knowledge based system</i> using Fuzzy Logic to provide weight-loss guide including a diet plan and a workout plan based on user's current state.
+A simple <i>knowledge based system</i> using Fuzzy Logic to provide weight-loss guide consist of a diet plan and a workout plan based on user's current state.
 
 > **Warning**: The diagnosis of body fatness and the weight-loss plan generated by this application is just imitation for programming purpose. You <b>should not</b> follow them. To get the right instructions, you should use actual weight-loss applications, or better yet, go to the doctor.
 
@@ -39,6 +39,7 @@ A simple <i>knowledge based system</i> using Fuzzy Logic to provide weight-loss
 * [![HTML5][HTML5-shield]][HTML5-url]
 * [![CSS3][CSS3-shield]][CSS3-url]
 * [![JavaScript][JavaScript-shield]][JavaScript-url]
+* [![Bootstrap][Bootstrap-shield]][Bootstrap-url]
 * [![MySQL][MySQL-shield]][MySQL-url]
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
@@ -63,7 +64,7 @@ Add necessary libraries to the project by right-clicking on the Libraries folder
 
 Open MySQL and create a database according to the scripts in <b>*.sql</b> files in [/web/sql](/web/sql).
 
-Open the <b>DAO.java</b> class in [src/java/eatandfit/dao](src/java/eatandfit/dao) and change the information about the datasource to fit your own settings.
+Open the <b>DAO.java</b> class in [/src/java/eatandfit/dao](/src/java/eatandfit/dao) and change the information about the datasource to fit your own settings.
 
 Back to NetBeans and run the application. If this is the first time you use Tomcat, NetBeans may display a dialog asking you to choose a web server for the application. Click "Add" and refer to the directory where Tomcat installed.
 
@@ -74,17 +75,57 @@ After that, the application will run on port 8080 by default. A new tab in your
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 # Key Features
+* Get and validate user input
+* Process input by Fuzzy Logic to determine user's current state
+* Provide a weight-loss plan based on user's state:
+  * A diet plan consist of 3 different types of eating days per week: low, moderate and high carb
+  * A workout plan of cardio and gym
+* A detailed page about each dish in the diet, consist of nutrition info visualized by an interactable pie chart, recipe and steps to cook
+* A detailed page about each exercise in the workout plan, consist of a video guide, overview and detailed instructions
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 # Usage
+<i>This is a simple animation to illustrate the features of the application. The colors is wrong because of the limit of the tool I used. You can see the actual colors in the video below</i>
+
+<p align="center">
+    <img src="/web/images/animation.gif">
+</p>
+
+- First, from the home page, I click the "<b><i>Bắt đầu</i></b>" button to start.
+- A form consist of two radio button is displayed for selecting sex. In this example, I pretend to be a <i>woman</i>.
+- After submit the sex, another form is displayed for entering current height and weight (in centimeters and kilograms, respectively). I intend to provide wrong data to illustrate data validation:
+  - Leave the fields blank
+  - Enter an improper value
+  - Enter a negative number
+  - Enter non-numeric characters
+- Then, I enter a height of 155 cm and a weight of 40 kg, which my Fuzzy Logic considers to be "<i>underweight</i>". The application display a message to advise me to gain weight, not to lose weight.
+- I go back and enter a height of 155 cm and a weight of 50 kg, which my Fuzzy Logic considers to be "<i>normal</i>". The application display a message to advise me to maintain that healthy weight.
+- I go back again and enter a height of 155 cm and a weight of 65 kg, which my Fuzzy Logic considers to be "<i>pre-obese</i>". The application display another form to ask me whether I am new to weight-loss or not. I choose to be a beginner.
+- Finally, a detailed weight-loss plan is displayed, consisting of:
+  - A diet plan with three menus for low, moderate, and high carb eating days. Each menu consists of nutrition info; a pie chart represent the percentage of calories from carbs, fat and protein; and dish for each meal. If I click on a dish, a detailed page for that dish is displayed. I can see the dish's image, it's nutrition info, recipe and steps to cook.
+  - A workout plan of cardio and gym. If I click on an exercise, a detailed page for that exercise is display. It provides an video guide, overview and specific instructions to do the exercise.
+
+<i>And this short video, which converted to gif, will show the effect that can't be presented by the animation above:</i>
+
+<p align="center">
+    <img src="/web/images/video.gif">
+</p>
+
+- Now you can see the actual colors of the website, it's brighter than the colors in the animation.
+- You can interact with the pie chart by holding the mouse on each slice to see it's details; or click to explode it.
+- The slice represents carbs is exploded by default to emphasize the percent calories from carbs, which determine the diet is low, moderate, or high carb.
+- Look at the lay out and colors of the chart, does it look like the website's logo, huh?
+- The exercise video guide from [<b>Muscle & Strength</b>](https://www.muscleandstrength.com/) is very good, right?
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 # References
+I want to say a big thanks to [<b>Eat This Much</b>](https://www.eatthismuch.com/) and [<b>Muscle & Strength</b>](https://www.muscleandstrength.com/). I used some of their knowledge in diet and workout to build this project, but I also adjusted these knowledge a bit to match my programming idea. So, again:
 
-# Contact
+> **Warning**: <b>DO NOT</b> trust in the plan in this application. You should go to [<b>Eat This Much</b>](https://www.eatthismuch.com/) and [<b>Muscle & Strength</b>](https://www.muscleandstrength.com/)'s website to see the <b>RIGHT</b> instructions.
 
+# Contact
 You can contact me via:
 * [![GitHub][GitHub-shield]][GitHub-url]
 * [![LinkedIn][LinkedIn-shield]][LinkedIn-url]
@@ -109,6 +150,8 @@ You can contact me via:
 [CSS3-url]: https://www.w3.org/Style/CSS/
 [JavaScript-shield]: https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E
 [JavaScript-url]: https://www.ecma-international.org/
+[Bootstrap-shield]: https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white
+[Bootstrap-url]: https://getbootstrap.com/
 [MySQL-shield]: https://img.shields.io/badge/MySQL-005C84?style=for-the-badge&logo=mysql&logoColor=white
 [MySQL-url]: https://www.mysql.com/
 
@@ -121,4 +164,4 @@ You can contact me via:
 [Facebook-shield]: https://img.shields.io/badge/Facebook-%231877F2.svg?style=for-the-badge&logo=Facebook&logoColor=white
 [Facebook-url]: https://www.facebook.com/Khiet.To.Official/
 [Twitter-shield]: https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge&logo=Twitter&logoColor=white
-[Twitter-url]: https://twitter.com/KhietTo
+[Twitter-url]: https://twitter.com/KhietTo

nbproject/private/private.xml

@@ -3,6 +3,7 @@
     <editor-bookmarks xmlns="http://www.netbeans.org/ns/editor-bookmarks/2" lastBookmarkId="0"/>
     <open-files xmlns="http://www.netbeans.org/ns/projectui-open-files/2">
         <group>
+            <file>file:/G:/Workspace/Code%20Studio/NetBeansProjects/eat-and-fit/web/exercise.jsp</file>
             <file>file:/G:/Workspace/Code%20Studio/NetBeansProjects/eat-and-fit/web/start.jsp</file>
             <file>file:/G:/Workspace/Code%20Studio/NetBeansProjects/eat-and-fit/src/java/eatandfit/controller/PlanController.java</file>
             <file>file:/G:/Workspace/Code%20Studio/NetBeansProjects/eat-and-fit/web/dish.jsp</file>