500 lines
17 KiB
JavaScript
500 lines
17 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function () {
|
|
var healthForm = document.getElementById("healthForm");
|
|
var submitBtn = document.getElementById("submitBtn");
|
|
var questionContainer = document.getElementById("questionContainer");
|
|
var resultBmr = document.getElementById("result");
|
|
var calValue = document.getElementById("cal-value");
|
|
var calValueText = document.createElement("h1");
|
|
// var part2Result = document.getElementById("part2result");
|
|
var resultContainer = document.getElementById("result-container");
|
|
var caloriesRecord = document.createElement("div");
|
|
var goalChoice = document.getElementsByName("goal_weight");
|
|
var formTitle = document.getElementById("form-title");
|
|
var barChartContainer = document.getElementById("container");
|
|
|
|
//input value
|
|
|
|
//var dailyCalorie = document.getElementsByClassName("part3");
|
|
|
|
//calculate bmr
|
|
function bmrFunction() {
|
|
var age = document.getElementById("ageInput").value;
|
|
var gender = document.getElementById("genderInput").value;
|
|
var height = document.getElementById("heightInput").value;
|
|
var weight = document.getElementById("weightInput").value;
|
|
var activityLevel = document.getElementById("activityLevelInput").value;
|
|
|
|
var genderMultiplier = 0;
|
|
if (gender === "male") {
|
|
genderMultiplier = 1;
|
|
}
|
|
|
|
var activityLevelMultiplier = 0;
|
|
if (activityLevel === "sedentary") {
|
|
activityLevelMultiplier = 1.2;
|
|
} else if (activityLevel === "lightlyActive") {
|
|
activityLevelMultiplier = 1.375;
|
|
} else if (activityLevel === "moderatelyActive") {
|
|
activityLevelMultiplier = 1.55;
|
|
} else if (activityLevel === "veryActive") {
|
|
activityLevelMultiplier = 1.72;
|
|
} else if (activityLevel === "superActive") {
|
|
activityLevelMultiplier = 1.9;
|
|
}
|
|
|
|
const result =
|
|
9.99 * weight +
|
|
6.25 * height -
|
|
4.92 * age +
|
|
(166 * genderMultiplier - 161);
|
|
|
|
const bmrresult = result * activityLevelMultiplier;
|
|
return bmrresult;
|
|
}
|
|
|
|
//submit bmr form and click function
|
|
healthForm.addEventListener("submit", function (event) {
|
|
event.preventDefault();
|
|
var name = document.getElementById("nameInput").value;
|
|
var resultBmr = document.getElementById("result");
|
|
var age = document.getElementById("ageInput").value;
|
|
var gender = document.getElementById("genderInput").value;
|
|
var height = document.getElementById("heightInput").value;
|
|
var weight = document.getElementById("weightInput").value;
|
|
var activityLevel = document.getElementById("activityLevelInput").value;
|
|
|
|
resultBmr.innerHTML = ""; // 清空结果元素的内容
|
|
formTitle.innerHTML = "";
|
|
|
|
var resultText = document.createElement("h3");
|
|
resultText.innerHTML = `<p>Hello! ${name}.</p>
|
|
<p>Your daily calorie intake: </p>
|
|
<div id="intake-contain"></div>
|
|
<button id="edit">Edit & Calculate again</button>
|
|
|
|
<div class="threeBtn">
|
|
<form>
|
|
<p>Which goal would you like to achieve?</p>
|
|
<input type="radio" id="maintain" name="goal_weight" value="maintain-weight">
|
|
<label for="html">Maintain Weight (+- 0cal)</label><br>
|
|
<input type="radio" id="loss" name="goal_weight" value="loss-weight">
|
|
<label for="css">Loss Weight (- 300cals)</label><br>
|
|
<input type="radio" id="gain" name="goal_weight" value="gain-weight">
|
|
<label for="javascript">Gain Weight (+ 300cals)</label></form>
|
|
</div>
|
|
<div id="saveBtn-contain"></div>
|
|
`;
|
|
resultBmr.appendChild(resultText);
|
|
healthForm.style.display = "none";
|
|
|
|
const intakeContain = document.getElementById("intake-contain");
|
|
const intakeNum = document.createElement("h2");
|
|
intakeNum.innerText = `${Math.round(bmrFunction())}cal`;
|
|
intakeContain.appendChild(intakeNum);
|
|
|
|
localStorage.setItem("user", name);
|
|
localStorage.setItem("userAge", age);
|
|
localStorage.setItem("userGender", gender);
|
|
localStorage.setItem("userHeight", height);
|
|
localStorage.setItem("userWeight", weight);
|
|
localStorage.setItem("userActivityLevel", activityLevel);
|
|
localStorage.setItem("bmrResult", bmrFunction());
|
|
|
|
// localStorage.getItem("user");
|
|
// JSON.parse(localStorage.getItem("userAge"));
|
|
// JSON.parse(localStorage.getItem("userGender"));
|
|
// JSON.parse(localStorage.getItem("userHeight"));
|
|
// JSON.parse(localStorage.getItem("userWeight"));
|
|
// JSON.parse(localStorage.getItem("userActivityLevel"));
|
|
// JSON.parse(localStorage.getItem("bmrResult"));
|
|
|
|
function btn1() {
|
|
//var maintainWeight = document.getElementById("maintain-weight");
|
|
return (intakeNum.innerText = `${Math.round(bmrFunction())}cal`);
|
|
}
|
|
|
|
function btn2() {
|
|
//var lossWeight = document.getElementById("loss-weight");
|
|
return (intakeNum.innerText = `${Math.round(bmrFunction()) - 300}cal`);
|
|
}
|
|
|
|
function btn3() {
|
|
//var gainWeight = document.getElementById("gain-weight");
|
|
return (intakeNum.innerText = `${Math.round(bmrFunction()) + 300}cal`);
|
|
}
|
|
|
|
var editBtn = document.getElementById("edit");
|
|
editBtn.addEventListener("click", function clickFn() {
|
|
healthForm.style.display = "block";
|
|
resultBmr.style.display = "none";
|
|
resultText.innerHTML = "";
|
|
});
|
|
|
|
var maintainWeight = document.getElementById("maintain");
|
|
maintainWeight.addEventListener("click", btn1);
|
|
|
|
var lossWeight = document.getElementById("loss");
|
|
lossWeight.addEventListener("click", btn2);
|
|
|
|
var gainWeight = document.getElementById("gain");
|
|
gainWeight.addEventListener("click", btn3);
|
|
|
|
var goalvalue;
|
|
|
|
for (var i = 0; i < goalChoice.length; i++) {
|
|
goalChoice[i].addEventListener("click", function () {
|
|
if (this.value === "maintain-weight") {
|
|
goalvalue = Math.round(bmrFunction()) + 0;
|
|
} else if (this.value === "loss-weight") {
|
|
goalvalue = Math.round(bmrFunction()) - 300;
|
|
} else if (this.value === "gain-weight") {
|
|
goalvalue = Math.round(bmrFunction()) + 300;
|
|
}
|
|
});
|
|
}
|
|
|
|
var saveBtnContain = document.getElementById("saveBtn-contain");
|
|
var saveBtn = document.createElement("button");
|
|
saveBtn.innerText = "Save";
|
|
saveBtn.id = "saveBtn";
|
|
saveBtnContain.appendChild(saveBtn);
|
|
saveBtn.addEventListener("click", function () {
|
|
resultText.innerHTML = `<p>Your daily calorie intake: </p>
|
|
<h2>${goalvalue}cals</h2>
|
|
<button id="edittwo">Edit & Calculate again</button>
|
|
`;
|
|
calValueText.innerText = `${goalvalue}cal`;
|
|
calValue.appendChild(calValueText);
|
|
});
|
|
|
|
var editBtnTwo = document.getElementById("edittwo");
|
|
editBtnTwo.addEventListener("click", function clickFn() {
|
|
healthForm.style.display = "block";
|
|
calValue.style.display = "none";
|
|
resultText.innerHTML = "";
|
|
});
|
|
});
|
|
|
|
// Clear input fields
|
|
// document.getElementById("ageInput").value = "";
|
|
// document.getElementById("heightInput").value = "";
|
|
// document.getElementById("weightInput").value = "";
|
|
|
|
//Hide form and show question
|
|
|
|
questionContainer.style.display = "block";
|
|
|
|
// foodSubmitBtn.addEventListener("click", function () {
|
|
// var foodIntake = foodInput.value;
|
|
|
|
// // Clear input field
|
|
// foodInput.value = "";
|
|
|
|
// // Process food intake data
|
|
// console.log("Food Intake:", foodIntake);
|
|
// });
|
|
|
|
// function addFoodCa(x, y) {
|
|
// var calBar = document.createElement("div");
|
|
// calBar.classList.add("calBar");
|
|
// calBar.innerHTML = `<div>${x}</div><div>${y}</div>`;
|
|
// caloriesRecord.appendChild(calBar);
|
|
// }
|
|
|
|
//calculate food calorie
|
|
const calculateBtn = document.getElementById("calculate-btn");
|
|
calculateBtn.addEventListener("click", fetchData);
|
|
|
|
async function fetchData() {
|
|
const foodWeightInput = document.getElementById("food-weight-input");
|
|
const unitSelect = document.getElementById("unit-select");
|
|
const foodNameInput = document.getElementById("food-name-input");
|
|
|
|
const query = `${foodWeightInput.value}${unitSelect.value} ${foodNameInput.value}`;
|
|
|
|
try {
|
|
const res = await fetch(
|
|
"https://api.api-ninjas.com/v1/nutrition?query=" + query,
|
|
{
|
|
headers: {
|
|
"X-Api-Key": "HQR305Z28JdtTlSD7bzr2g==syWXu3chI7wcfy3N",
|
|
"Content-Type": "application/json",
|
|
},
|
|
}
|
|
);
|
|
const data = await res.json();
|
|
console.log(data);
|
|
|
|
resultContainer.innerHTML = "";
|
|
|
|
// Display the data in the result container
|
|
var foodResultText = document.createElement("div");
|
|
foodResultText.className = "foodresult";
|
|
foodResultText.innerHTML = `
|
|
<div>
|
|
<h2>Results:</h2>
|
|
</div>
|
|
<div class="result-header">
|
|
<div>Name:</div>
|
|
<div>Brisket</div>
|
|
</div>
|
|
|
|
<div class="line result-row" id="serving_size">
|
|
<div>Serving Size:</div>
|
|
<div>${data[0].serving_size_g}g</div>
|
|
</div>
|
|
<div class="line result-row" id="foodname">
|
|
<div>Name:</div>
|
|
<div>${data[0].name}</div>
|
|
</div>
|
|
<div class="line result-row" id="serving_size">
|
|
<div>Serving Size:</div>
|
|
<div>${data[0].serving_size_g}g</div>
|
|
</div>
|
|
<div class="line result-row" id="calories">
|
|
<div>Calories:</div>
|
|
<div>${data[0].calories} cal</div>
|
|
</div>
|
|
<div class="line result-row">
|
|
<div>Protein:</div>
|
|
<div>${data[0].protein_g} g</div>
|
|
</div>
|
|
<div class="line result-row">
|
|
<div>Fiber:</div>
|
|
<div>${data[0].fiber_g} g</div>
|
|
</div>
|
|
<div class="line result-row">
|
|
<div>Total Fat:</div>
|
|
<div>${data[0].fat_total_g} g</div>
|
|
</div>
|
|
<div class="line result-row">
|
|
<div>Saturated Fat:</div>
|
|
<div>${data[0].fat_saturated_g} g</div>
|
|
</div>
|
|
<div class="line result-row">
|
|
<div>Cholesterol:</div>
|
|
<div>${data[0].cholesterol_mg} g</div>
|
|
</div>
|
|
<div class="line result-row">
|
|
<div>Total Carbohydrates:</div>
|
|
<div>${data[0].carbohydrates_total_g} g</div>
|
|
</div>
|
|
|
|
<div class="result-footer">
|
|
<button type="button" class="foodbtn" id="recordbtn">
|
|
Save in the intake list
|
|
</button>
|
|
</div.
|
|
`;
|
|
|
|
resultContainer.appendChild(foodResultText);
|
|
|
|
foodWeightInput.value = "";
|
|
|
|
foodNameInput.value = "";
|
|
|
|
var part2Result = document.getElementById("part2Result");
|
|
|
|
var recordbtn = document.getElementById("recordbtn");
|
|
recordbtn.addEventListener("click", function clickFn() {
|
|
//part2Result.style.backgroundColor = "#c7a5fa";
|
|
foodResultText.style.display = "none";
|
|
|
|
caloriesRecord.className = "calorierecord";
|
|
caloriesRecord.innerHTML = `
|
|
<button id="back">Back</button>
|
|
<h3>Calories Tracking Record</h3>
|
|
<div class="recorddate"></div><br>
|
|
<div class="nameCal">
|
|
<div>Name</div>
|
|
<div>Calories</div>
|
|
</div>
|
|
`;
|
|
foodIntakeRecording(data[0].name, data[0].calories);
|
|
sumUp();
|
|
//localStorage.setItem(`${new Date()}`, sumUp2());
|
|
taketheLastData(getCurrentDateFromDate(new Date()), sumUp2());
|
|
resultContainer.appendChild(caloriesRecord);
|
|
|
|
//calValueText.innerText = `${goalvalue - sumUp2()}cal`;
|
|
|
|
// var back = document.getElementById("back");
|
|
// back.addEventListener("click", function clickFn() {
|
|
// foodResultText.style.display = "block";
|
|
// foodResultText.style.backgroundColor = "#5cf089";
|
|
// caloriesRecord.style.display = "none";
|
|
// });
|
|
});
|
|
} catch (err) {
|
|
console.log("ERR:", err);
|
|
}
|
|
}
|
|
|
|
let allFoodRecord = [];
|
|
|
|
function foodIntakeRecording(foodName, calories) {
|
|
let food = {};
|
|
food["Name"] = foodName;
|
|
food["Calories"] = calories;
|
|
allFoodRecord.push(food);
|
|
localStorage.setItem("dataBag", JSON.stringify(allFoodRecord));
|
|
genTable();
|
|
}
|
|
|
|
function sumUp() {
|
|
const totalCalories = allFoodRecord.reduce(
|
|
(accumulator, currentValue) => accumulator + currentValue.Calories,
|
|
0
|
|
);
|
|
|
|
const totalCal = document.createElement("div");
|
|
totalCal.className = "totalcal";
|
|
totalCal.innerHTML = `<div>Total Calories: ${totalCalories}</div>`;
|
|
caloriesRecord.appendChild(totalCal);
|
|
}
|
|
|
|
function sumUp2() {
|
|
const totalCalories = allFoodRecord.reduce(
|
|
(accumulator, currentValue) => accumulator + currentValue.Calories,
|
|
0
|
|
);
|
|
|
|
return totalCalories;
|
|
}
|
|
|
|
function genTable() {
|
|
//caloriesRecord.innerHTML = "";
|
|
|
|
for (let i = 0; i < allFoodRecord.length; i++) {
|
|
const foodItem = document.createElement("div");
|
|
foodItem.className = "fooditem";
|
|
foodItem.innerHTML = `
|
|
<div>${allFoodRecord[i].Name}${allFoodRecord[i].Calories}</div>
|
|
`;
|
|
caloriesRecord.appendChild(foodItem);
|
|
}
|
|
}
|
|
|
|
let wholeDayRecord = [];
|
|
|
|
function taketheLastData(x, y) {
|
|
let dailydata = {};
|
|
dailydata["date"] = x;
|
|
dailydata["totalCalories"] = y;
|
|
wholeDayRecord.push(dailydata);
|
|
localStorage.setItem(
|
|
"dataBag",
|
|
JSON.stringify(wholeDayRecord[wholeDayRecord.length - 1])
|
|
);
|
|
genBar();
|
|
}
|
|
|
|
function genBar() {
|
|
for (let i = 0; i < wholeDayRecord.length; i++) {
|
|
const barcontainer = document.createElement("div");
|
|
barcontainer.className = "barcontainer";
|
|
|
|
const barHeight = generateBarHeight(
|
|
wholeDayRecord[wholeDayRecord.length - 1].totalCalories
|
|
);
|
|
|
|
barcontainer.innerHTML = `
|
|
<div class="bar" style="height: ${barHeight}%"></div>
|
|
<div class="day">${wholeDayRecord[wholeDayRecord.length - 1].date}</div>
|
|
<div class="totalcalnum">${
|
|
wholeDayRecord[wholeDayRecord.length - 1].totalCalories
|
|
}</div>
|
|
`;
|
|
|
|
barChartContainer.appendChild(barcontainer);
|
|
}
|
|
}
|
|
|
|
//date
|
|
const dateContainer = document.getElementById("dateContainer");
|
|
const prevButton = document.getElementById("prevButton");
|
|
const nextButton = document.getElementById("nextButton");
|
|
const currentDateElement = document.getElementById("currentDate");
|
|
|
|
function generateBarHeight(totalCalories) {
|
|
// 在这里根据总热量数据计算柱状图的高度百分比
|
|
// 您可以根据实际需求来定义计算逻辑
|
|
// 这里简单地将总热量数据除以一个固定值来获取百分比
|
|
const maxHeight = 100; // 最大高度百分比
|
|
const maxValue = 3000; // 最大的总热量值
|
|
const barHeight = (totalCalories / maxValue) * maxHeight;
|
|
console.log();
|
|
return barHeight;
|
|
}
|
|
|
|
// 调用生成柱状图的函数
|
|
genBar();
|
|
|
|
// function generateBarHeight() {
|
|
// var max = 3500;
|
|
// var percentage = (sumUp2 / max) * 100;
|
|
// return percentage;
|
|
// }
|
|
|
|
// document.getElementById("bar1").style.height = generateBarHeight() + "%";
|
|
// document.getElementById("bar2").style.height = generateBarHeight() + "%";
|
|
// document.getElementById("bar3").style.height = generateBarHeight() + "%";
|
|
// document.getElementById("bar4").style.height = generateBarHeight() + "%";
|
|
// document.getElementById("bar5").style.height = generateBarHeight() + "%";
|
|
// document.getElementById("bar6").style.height = generateBarHeight() + "%";
|
|
// document.getElementById("bar7").style.height = generateBarHeight() + "%";
|
|
|
|
// var currentDate = new Date();
|
|
// document.getElementById("day1").innerHTML = currentDate.getDate() - 6;
|
|
// document.getElementById("day2").innerHTML = currentDate.getDate() - 5;
|
|
// document.getElementById("day3").innerHTML = currentDate.getDate() - 4;
|
|
// document.getElementById("day4").innerHTML = currentDate.getDate() - 3;
|
|
// document.getElementById("day5").innerHTML = currentDate.getDate() - 2;
|
|
// document.getElementById("day6").innerHTML = currentDate.getDate() - 1;
|
|
// document.getElementById("day7").innerHTML = currentDate.getDate();
|
|
|
|
function getCurrentDateFromMounthandYear(date) {
|
|
const year = date.getFullYear();
|
|
const month = new Intl.DateTimeFormat("en-US", {
|
|
month: "short",
|
|
}).format(date);
|
|
const day = String(date.getDate()).padStart(2, "0");
|
|
return `${month}${year}`;
|
|
}
|
|
|
|
function getCurrentDateFromDate(date) {
|
|
const year = date.getFullYear();
|
|
const month = new Intl.DateTimeFormat("en-US", {
|
|
month: "short",
|
|
}).format(date);
|
|
const day = String(date.getDate()).padStart(2, "0");
|
|
return `${day}`;
|
|
}
|
|
|
|
function updateDate() {
|
|
const currentDate = new Date();
|
|
currentDateElement.textContent =
|
|
getCurrentDateFromMounthandYear(currentDate);
|
|
updateWeekChart(currentDate);
|
|
}
|
|
|
|
function goToPreviousDay() {
|
|
const currentDate = new Date(currentDateElement.textContent);
|
|
currentDate.setDate(currentDate.getDate() - 1);
|
|
currentDateElement.textContent = getCurrentDateFromDate(currentDate);
|
|
updateWeekChart(currentDate);
|
|
}
|
|
|
|
function goToNextDay() {
|
|
const currentDate = new Date(currentDateElement.textContent);
|
|
currentDate.setDate(currentDate.getDate() + 1);
|
|
currentDateElement.textContent = getCurrentDateFromDate(currentDate);
|
|
updateWeekChart(currentDate);
|
|
}
|
|
|
|
prevButton.addEventListener("click", goToPreviousDay);
|
|
nextButton.addEventListener("click", goToNextDay);
|
|
|
|
updateDate();
|
|
});
|