diff --git a/givefortune/gitUpdate.bat b/givefortune/gitUpdate.bat new file mode 100644 index 00000000..37dc8ac1 --- /dev/null +++ b/givefortune/gitUpdate.bat @@ -0,0 +1,7 @@ +git status . + +@pause + +git add . +git commit -m"update givefortune," +start git push \ No newline at end of file diff --git a/givefortune/notes.md b/givefortune/notes.md new file mode 100644 index 00000000..31e0fce5 --- /dev/null +++ b/givefortune/notes.md @@ -0,0 +1 @@ +helloworld diff --git a/givefortune/task1/source/u-QhJMXmcPK/index.html b/givefortune/task1/source/u-QhJMXmcPK/index.html new file mode 100644 index 00000000..09b1751a --- /dev/null +++ b/givefortune/task1/source/u-QhJMXmcPK/index.html @@ -0,0 +1,174 @@ + + + + CalTally + + + + + + +
+
+ +

+ Welcome
to
+ CalTally +

+
+
+

Calculate Total Daily Energy Expenditure

+
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+ + + +
+ +
+
+
+ +
+ +
+
+

Today

+ +
+
+
+
+
+
+

Weekly Report

+
+ + + +
+ +
+
+ + + diff --git a/givefortune/task1/source/u-QhJMXmcPK/index.js b/givefortune/task1/source/u-QhJMXmcPK/index.js new file mode 100644 index 00000000..410e7761 --- /dev/null +++ b/givefortune/task1/source/u-QhJMXmcPK/index.js @@ -0,0 +1,456 @@ +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 = `

Hello! ${name}.

+

Your daily calorie intake:

+
+ + +
+
+

Which goal would you like to achieve?

+ +
+ +
+ +
+
+
+ `; + 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 = `

Your daily calorie intake:

+

${goalvalue}cals

+ + `; + 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 = `
${x}
${y}
`; + // 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 = ` +

Results:

+
Name: ${data[0].name}
+
Serving Size: ${data[0].serving_size_g}g
+
Calories: ${data[0].calories} cal
+
Protein: ${data[0].protein_g} g
+
Fiber: ${data[0].fiber_g} g
+
Total Fat: ${data[0].fat_total_g} g
+
Saturated Fat: ${data[0].fat_saturated_g} g
+
Cholesterol: ${data[0].cholesterol_mg} g
+
Total Carbohydrates: ${data[0].carbohydrates_total_g} g
+ + `; + + 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 = ` + +

Calories Tracking Record

+

+
+
Name
+
Calories
+
+ `; + 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 = `
Total Calories: ${totalCalories}
`; + 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 = ` +
${allFoodRecord[i].Name}${allFoodRecord[i].Calories}
+ `; + 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 = ` +
+
${wholeDayRecord[wholeDayRecord.length - 1].date}
+
${ + wholeDayRecord[wholeDayRecord.length - 1].totalCalories + }
+ `; + + 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(); +}); diff --git a/givefortune/task1/source/u-QhJMXmcPK/style.css b/givefortune/task1/source/u-QhJMXmcPK/style.css new file mode 100644 index 00000000..7981fa71 --- /dev/null +++ b/givefortune/task1/source/u-QhJMXmcPK/style.css @@ -0,0 +1,391 @@ +* { + font-family: "Mali", cursive; + font-size: small; + font-weight: 400; +} + +.big-container { + background-image: ; + background-color: contain; + border-radius: 50px; + grid-gap: 20px; + padding: 5px; + width: 1000px; + height: 750px; + display: grid; + grid-template-columns: 32% 30% 45%; + grid-template-rows: 25% 45% 18%; +} + +.title { + text-align: center; + font-size: 30px; +} + +.welcome { + background-color: #ffffff; + display: flex; + border-radius: 50px; + width: 75%; + height: 105%; + grid-row: 1 / 2; + padding: 0px 40px; + box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7); +} + +.part1 { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #ffffff; + padding: 0px 40px; + width: 75%; + height: 110%; + grid-row: 2 / 4; + border-radius: 50px; + line-height: 10px; + box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7); +} + +h3 { + margin-top: 5px; + margin-bottom: 15px; + text-align: center; + font-size: 18px; + font-weight: 700; + line-height: normal; +} + +.form-group { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 10px; + flex-grow: 1; +} + +.form-group label { + text-align: left; + width: 70%; + font-family: "Mali", cursive; +} + +.form-control { + background-color: #f0f0f0; + padding: 5px; + border-radius: 8px; + border: 1px solid #707070; + width: 70%; +} + +.bmrbtn { + border-radius: 50px; + padding: 10px; + border: none; + background-color: #9162f3; + color: white; + width: 70%; + margin-top: 10px; +} + +p { + font-size: 20px; + font-weight: 300; +} + +#edit { + border-radius: 10px; + padding: 10px; + border: none; + background-color: #d9caf8; + width: 90%; + font-weight: bold; + margin: 30px, 0; +} + +.threeBtn { + display: flex; + width: 100%; + font-size: 20px; + align-items: center; + gap: 10px; +} + +.three { + border-radius: 10px; + padding: 20px; + border: none; + background-color: #9ffd98; + width: 40%; + color: #000000; + font-weight: bold; +} + +#save { + border-radius: 10px; + padding: 5px; + border: none; + background-color: #000000; + width: 50%; + color: #ffffff; + font-weight: bold; + position: relative; + margin-top: 40px; + font-size: 15px; +} + +.part2 { + background-color: #74f5fd; + border-radius: 50px; + padding: 20px; + grid-column: 2 / 3; + grid-row: 1 / 3; + height: 40%; + width: 100%; + line-height: 15px; + box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7); +} + +.calorie { + background-color: rgba(255, 255, 255, 0.3); + padding: 3px; + border-radius: 8px; + border: 1px solid rgb(0, 0, 0); +} + +.apiInput { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 5px; + flex-grow: 1; +} + +.apiInput select { + margin-top: 5px; +} + +.foodbtn { + border-radius: 50px; + padding: 10px; + border: none; + background-color: #000000; + color: white; + width: 70%; + margin-top: 10px; +} + +#part2result { + background-color: #9ffd98; + padding: 15px 15px; + border-radius: 50px; + grid-column: 2 / 3; + grid-row: 2 / 4; + width: 85%; + height: 93%; + margin-top: 60px; + box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7); +} + +#result-container { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 10px; + flex-grow: 1; +} + +h2 { + font-size: 30px; + font-weight: 700; + margin-top: 60px; +} + +#foodname { + font-size: 22px; +} + +.line { + font-size: 16px; + border-bottom: 2px dotted #42329b; + width: 80%; + margin-bottom: -1px; + color: #707070; + font-weight: 300; +} + +#recordbtn button { + border-radius: 15px; + padding: 10px; + border: none; + background-color: #000000; + width: 80%; + color: #ffffff; + margin-top: 20px; + font-weight: bold; + margin: 10px, 0; +} + +.intakeListbtn { + border-radius: 15px; + padding: 10px; + border: none; + background-color: #d9caf8; + width: 70%; + color: #000000; + font-weight: bold; + margin-top: 10px; +} + +.recorddate { + border-radius: 15px; + padding: 10px; + border: none; + background-color: #844eda; + width: 180px; + height: 50px; + color: #ffffff; +} + +.nameCal { + display: flex; + justify-content: space-around; + background-color: #ffffff; + margin-bottom: 5px; +} + +.calBar { + display: flex; + justify-content: space-around; + background-color: #ffffff; +} + +.part3 { + background-color: #ffffff; + border-radius: 50px; + padding: 8px 30px; + grid-column: 3 / 4; + grid-row: 1 / 3; + height: 41vh; + width: 40vh; + box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7); + margin-bottom: 15px; +} + +.date { + display: flex; + justify-content: space-between; +} + +.datebtn { + border: 0px; + background-color: #ffffff; +} + +#dateContainer { + position: absolute; + display: flex; + align-items: center; + top: 10px; + right: 10px; +} + +#currentDate { + font-size: 20px; /* Change the font size as desired */ + font-family: "Mali", cursive; +} + +.text { + font-size: 50px; + width: 100%; + text-align: center; +} +.container { + width: 500px; + height: 500px; + overflow: hidden; + position: relative; + margin: 50px auto; +} +.barcontainer { + background-color: #181818; + border-radius: 20px; + position: relative; + transform: translateY(-50%); + top: 80px; + margin-left: 10px; + width: 20px; + height: 150px; + float: left; + border: darken(#98afc7, 40%) 3px solid; +} + +.bar { + background-color: #9bc9c7; + position: absolute; + bottom: 0; + width: 100%; + height: 80%; + border-radius: 20px; + border-top: 6px solid #fff; + box-sizing: border-box; + animation: grow 1.5s ease-out forwards; + transform-origin: bottom; +} +@keyframes grow { + from { + transform: scaleY(0); + } +} +.today { + font-size: 30px; + font-weight: 700; +} + +#cal-value { + position: relative; + font-size: x-large; + text-align: center; +} + +#back { + border-radius: 10px; + padding: 5px; + border: none; + background-color: #ffffff; + width: 30%; + color: #000000; + font-weight: bold; + position: relative; + top: 10px; +} + +.part4 { + background-color: #ffffff; + border-radius: 50px; + padding: 8px 30px; + grid-column: 3 / 4; + grid-row: 2 / 3; + height: 50vh; + width: 40vh; + position: relative; + top: 90px; + right: 3px; + margin-top: 50px; + box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7); +} + +.weekly-report { + font-size: 20px; + font-weight: 700; + text-align: left; +} +/* button { + background: none; + border: none; + cursor: pointer; + font-size: 30px; + color: #000; + padding: 0; + margin: 0 30px;} /* Add margin between buttons */ diff --git a/givefortune/task1/source/u-ySeJGp_it/IMG_4651.jpeg b/givefortune/task1/source/u-ySeJGp_it/IMG_4651.jpeg new file mode 100644 index 00000000..959af28e Binary files /dev/null and b/givefortune/task1/source/u-ySeJGp_it/IMG_4651.jpeg differ diff --git a/givefortune/task1/source/u-ySeJGp_it/IMG_4654.jpeg b/givefortune/task1/source/u-ySeJGp_it/IMG_4654.jpeg new file mode 100644 index 00000000..83d52639 Binary files /dev/null and b/givefortune/task1/source/u-ySeJGp_it/IMG_4654.jpeg differ diff --git a/givefortune/task1/source/u-ySeJGp_it/IMG_4657.jpeg b/givefortune/task1/source/u-ySeJGp_it/IMG_4657.jpeg new file mode 100644 index 00000000..ee2c7b82 Binary files /dev/null and b/givefortune/task1/source/u-ySeJGp_it/IMG_4657.jpeg differ diff --git a/givefortune/task1/testweb-draft1/index.html b/givefortune/task1/testweb-draft1/index.html new file mode 100644 index 00000000..9cfb8c7c --- /dev/null +++ b/givefortune/task1/testweb-draft1/index.html @@ -0,0 +1,249 @@ + + + + + + + + CalTally + + + + + + + +
+
+
+ +
+ + +

+ Welcome
to
+ CalTally +

+
+ + + +
+
+ + +
+

+ Calculate Total Daily Energy Expenditure +

+
+
+
+ + +
+ + + +
+ + +
+
+ + + + +
+
+ + +
+
/
+
+ + +
+
+ +
+ + + +
+ + +
+ +
+ + +
+ +
+ + +
+ + + + + +
+
+
+ + +
+
+
+
+ + + +
+
+ +
+
+ +
+
+ + +
+
+
+
+ +
+
+

Today

+ +
+
+
+
+ +
+
+ +
+
+

Weekly Report

+
+ + + +
+ +
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/givefortune/task1/testweb-draft1/index.js b/givefortune/task1/testweb-draft1/index.js new file mode 100644 index 00000000..feb14035 --- /dev/null +++ b/givefortune/task1/testweb-draft1/index.js @@ -0,0 +1,499 @@ +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 = `

Hello! ${name}.

+

Your daily calorie intake:

+
+ + +
+
+

Which goal would you like to achieve?

+ +
+ +
+ +
+
+
+ `; + 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 = `

Your daily calorie intake:

+

${goalvalue}cals

+ + `; + 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 = `
${x}
${y}
`; + // 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 = ` +
+

Results:

+
+
+
Name:
+
Brisket
+
+ +
+
Serving Size:
+
${data[0].serving_size_g}g
+
+
+
Name:
+
${data[0].name}
+
+
+
Serving Size:
+
${data[0].serving_size_g}g
+
+
+
Calories:
+
${data[0].calories} cal
+
+
+
Protein:
+
${data[0].protein_g} g
+
+
+
Fiber:
+
${data[0].fiber_g} g
+
+
+
Total Fat:
+
${data[0].fat_total_g} g
+
+
+
Saturated Fat:
+
${data[0].fat_saturated_g} g
+
+
+
Cholesterol:
+
${data[0].cholesterol_mg} g
+
+
+
Total Carbohydrates:
+
${data[0].carbohydrates_total_g} g
+
+ +