[Feature Request]: Nutrition Tracking

[meghanakn473]

Is there an existing issue for this?

• [X] I have searched the existing issues

Feature Description

IT allows users to log their meals by entering food items, portion sizes, and meal types through a user-friendly interface. Once logged, the application fetches nutritional information from a database or API, calculates total calories and macronutrients, and updates the user's daily intake on their dashboard. Users can review their meal history, edit or delete entries, and receive notifications if they approach their caloric goals. This feature promotes healthier eating habits by providing users with insights into their nutrition and helping them stay aligned with their dietary goals.

Use Case

Sarah, a 28-year-old fitness enthusiast aiming to lose 10 pounds, uses the app's nutrition tracking feature to log her meals and receive instant nutritional information. The app sends reminders, provides visual insights into her eating habits, and connects her with a supportive community. This feature empowers Sarah to make informed dietary choices and enhances her accountability, increasing her chances of achieving her weight loss goal before her beach vacation.

Benefits

No response

Add ScreenShots

No response

Priority

High

Record

• [X] I have read the Contributing Guidelines
• [X] I'm a GSSOC-EXT contributor
• [X] I'm a HACKTOBERFEST contributor
• [X] I have starred the repository

[meghanakn473]

@jeevan10017 please assign me this issue i want to work on it

[jeevan10017]

@meghanakn473 go ahead 👍

[meghanakn473]

hey @jeevan10017 i have almost implemented the feature....im not able to fetch the meal data from the api... could u guide me on next steps..

im getting like this

[jeevan10017]

hey @jeevan10017 i have almost implemented the feature....im not able to fetch the meal data from the api... could u guide me on next steps..

im getting like this

@GAVINESHWAR

[meghanakn473]

hey @jeevan10017 i have almost implemented the feature....im not able to fetch the meal data from the api... could u guide me on next steps.. im getting like this

@GAVINESHWAR

??

[jeevan10017]

He is the mentor of this repository under Gssoc-24 ext

[meghanakn473]

hey @jeevan10017 i have almost implemented the feature....im not able to fetch the meal data from the api... could u guide me on next steps..

im getting like this

@GAVINESHWAR please suggest me wt i can do with

[GAVINESHWAR]

hey @jeevan10017 i have almost implemented the feature....im not able to fetch the meal data from the api... could u guide me on next steps.. im getting like this

@GAVINESHWAR please suggest me wt i can do with

@meghanakn473 I am unable to view the photo you send in the comment could you please send once again

[meghanakn473]

hey @jeevan10017 i have almost implemented the feature....im not able to fetch the meal data from the api... could u guide me on next steps.. im getting like this

@GAVINESHWAR please suggest me wt i can do with

@meghanakn473 I am unable to view the photo you send in the comment could you please send once again

[GAVINESHWAR]

@meghanakn473 , please check the api is working correctly or not and see the whether the syntax of the code is correct or not

async function getData() { try { const response = await fetch('https://api.example.com/data'); // Make the API call const data = await response.json(); // Wait for the response to be converted to JSON console.log(data); // Handle the data from the API } catch (error) { console.error('Error:', error); // Handle any errors } }

getData(); // Call the async function

this is the general syntax for getting the data from the external API

Please go through my repository where i used api for fetching data .

https://github.com/GAVINESHWAR/Photos_Search_Engine/blob/main/script.js

I hope this will help you

[meghanakn473]

@meghanakn473 , please check the api is working correctly or not and see the whether the syntax of the code is correct or not

async function getData() { try { const response = await fetch('https://api.example.com/data'); // Make the API call const data = await response.json(); // Wait for the response to be converted to JSON console.log(data); // Handle the data from the API } catch (error) { console.error('Error:', error); // Handle any errors } }

getData(); // Call the async function

this is the general syntax for getting the data from the external API

Please go through my repository where i used api for fetching data .

https://github.com/GAVINESHWAR/Photos_Search_Engine/blob/main/script.js

I hope this will help you

this is my data fetching function from nutritionix.com

const API_URL = 'https://trackapi.nutritionix.com/v2/natural/nutrients';

export const fetchNutritionData = async (foodItem) => { try { const response = await axios.post(API_URL, { query: foodItem }, { headers: { 'x-app-id': APP_ID, 'x-app-key': API_KEY, 'Content-Type': 'application/json', } } ); return response.data.foods; // Return array of foods with nutrition data } catch (error) { console.error('Error fetching data:', error); return null; } };

please guide me if smtg is wrong @GAVINESHWAR

[GAVINESHWAR]

@meghanakn473 please check weather you the access key entered correctly or not , please check weather you have the access to fetch the data. Fo getting the data from the external api you should have the access for that you need the access key which given when you login to the Platform where your fetching data .

const apikey = "da98fb0490a97bf9117726694d9d82cb"; const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=";

// search box const searchBox = document.querySelector(".search input"); const searchBtn = document.querySelector(".search button"); const weatherIcon = document.querySelector(".weather-icon");

async function checkWeather(city) { const response = await fetch(apiUrl + city + &appid=${apikey}); // fetching the api if (response.status==404){ document.querySelector(".error").style.display = "block"; document.querySelector(".weather").style.display = "none"; alert("Invalid City Name"); }else{ var data = await response.json(); // /using the data in it

console.log(data);

see in this code i am using access key for fetching the data

[meghanakn473]

@meghanakn473 please check weather you the access key entered correctly or not , please check weather you have the access to fetch the data. Fo getting the data from the external api you should have the access for that you need the access key which given when you login to the Platform where your fetching data .

Yes sir I'm having access to Fetch data and also crossed checked the api key Everything is correct

[GAVINESHWAR]

@meghanakn473 please check weather you the access key entered correctly or not , please check weather you have the access to fetch the data. Fo getting the data from the external api you should have the access for that you need the access key which given when you login to the Platform where your fetching data .

Yes sir I'm having access to Fetch data and also crossed checked the api key Everything is correct @meghanakn473 Please send me complete api code of it , because the code you mention above I didn't observe any access key it it

[meghanakn473]

i hv put the api id and api key in .env file.

REACT_APP_NUTRITIONIX_APP_ID='466e8d9a' REACT_APP_NUTRITIONIX_API_KEY=' b1975484d742bede95d2098e323b2bba'

and fetched it in this way

import axios from 'axios';

// Replace with your Nutritionix App ID and API Key

const APP_ID = process.env.REACT_APP_NUTRITIONIX_APP_ID; const API_KEY = process.env.REACT_APP_NUTRITIONIX_API_KEY;

const API_URL = 'https://trackapi.nutritionix.com/v2/natural/nutrients';

export const fetchNutritionData = async (foodItem) => { try { const response = await axios.post(API_URL, { query: foodItem }, { headers: { 'x-app-id': APP_ID, 'x-app-key': API_KEY, 'Content-Type': 'application/json', } } ); return response.data.foods; // Return array of foods with nutrition data } catch (error) { console.error('Error fetching data:', error); return null; } };

@GAVINESHWAR please check and review

[GAVINESHWAR]

import axios from 'axios';

const APP_ID = process.env.REACT_APP_NUTRITIONIX_APP_ID; const API_KEY = process.env.REACT_APP_NUTRITIONIX_API_KEY;

const API_URL = 'https://trackapi.nutritionix.com/v2/natural/nutrients';

export const fetchNutritionData = async (foodItem) => { try { // Make POST request to Nutritionix API const response = await axios.post( API_URL, { query: foodItem }, // Send the food item as 'query' { headers: { 'x-app-id': APP_ID, // Nutritionix App ID from env 'x-app-key': API_KEY, // Nutritionix API Key from env 'Content-Type': 'application/json', // Specify JSON format }, } );

return response.data.foods;

} catch (error) { console.error('Error fetching data:', error); return null; } };

@meghanakn473 , please go through this code i hope this will work

[meghanakn473]

Sure I'll check and update

[meghanakn473]

import axios from 'axios';

const APP_ID = process.env.REACT_APP_NUTRITIONIX_APP_ID; const API_KEY = process.env.REACT_APP_NUTRITIONIX_API_KEY;

const API_URL = 'https://trackapi.nutritionix.com/v2/natural/nutrients';

export const fetchNutritionData = async (foodItem) => { try { // Make POST request to Nutritionix API const response = await axios.post( API_URL, { query: foodItem }, // Send the food item as 'query' { headers: { 'x-app-id': APP_ID, // Nutritionix App ID from env 'x-app-key': API_KEY, // Nutritionix API Key from env 'Content-Type': 'application/json', // Specify JSON format }, } );

return response.data.foods;

} catch (error) { console.error('Error fetching data:', error); return null; } };

@meghanakn473 , please go through this code i hope this will work

tried it, but the result is same ntg changed @GAVINESHWAR

[GAVINESHWAR]

import axios from 'axios'; const APP_ID = process.env.REACT_APP_NUTRITIONIX_APP_ID; const API_KEY = process.env.REACT_APP_NUTRITIONIX_API_KEY; const API_URL = 'https://trackapi.nutritionix.com/v2/natural/nutrients'; export const fetchNutritionData = async (foodItem) => { try { // Make POST request to Nutritionix API const response = await axios.post( API_URL, { query: foodItem }, // Send the food item as 'query' { headers: { 'x-app-id': APP_ID, // Nutritionix App ID from env 'x-app-key': API_KEY, // Nutritionix API Key from env 'Content-Type': 'application/json', // Specify JSON format }, } );

return response.data.foods;

} catch (error) { console.error('Error fetching data:', error); return null; } }; @meghanakn473 , please go through this code i hope this will work

tried it, but the result is same ntg changed @GAVINESHWAR

Remove .env

[meghanakn473]

@GAVINESHWAR hey it worked, so shd i add api keys directly in file or keep it in .env

[GAVINESHWAR]

@GAVINESHWAR hey it worked, so shd i add api keys directly in file or keep it in .env Ok @meghanakn473