• HTML: For describing the structure of the webpage.
  • CSS: For describing the presentation of Web pages, including colors, layout, animations, and fonts. To arrange the HTML elements with respect to the size of the device.
  • Javascript: For making the web pages more interactive.


FatSecret is a mobile application, website, and API that lets users track their nutrition, exercise, and weight. It also contains an in-depth description of each and every type of food, like how many calories are there in 1kg of rice. One can just put all his daily in-takes and check how much protein, fats, and carbohydrates he had for that particular day. There are many nutritionists and health experts available here, new users can just follow their diet charts and take benefits out of it. If one wants to share their diet plans in the form of articles or journals, he can do that also. That all, a brief intro about


Let’s walk through all the pages one by one…

  1. Open the “Home_page/fat_secret.html” file.

This is our landing page. It contains all the journals and articles that are posted by different users. One can filter out the stories according to their requirement. On the right side of the main page, there are many options that will take the user to the different sections of the page. To see how the rest of the features work, please follow.

2. To post a story.

Click over the journal under the My Journal segment from the list of options present on the right side. Provide the description of the article and if it contains an image, then provide the URL of the image and then click on the submit button. The story will be posted on the main page. To view the story, click on the My Fatsecret option.

3. To add daily intakes to the food diary and maintain exercise in the exercise diary.

Food Section
Exercise Section

Just add the items and click upon the “Add an Item” button to save that particular item. The item will get saved to two places i.e in the diary and in the profile. To see the profile just click on “View My Member Profile”.

4. To see micro-level details about each and every type of food. Click over the “Food” in the Upper bar. To see the description of any item, just click over that particular one.

5. Click on the recipe section, to try out any particular recipe.


The major challenge that I faced was in adding functionalities to the element while creating that particular element (adding posts/stories/journals to the feed page) dynamically. Since it takes time to re-render the whole DOM. So, unless the whole DOM gets re-created again, we can not add functionalities to that particular new element.

GIT-HUB Link>>