004_comission/givefortune
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update,

Browse Source
This commit is contained in:
louiscklaw
2025-02-01 02:01:26 +08:00
parent a767348238
commit 5bc945e8af
129 changed files with 71057 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
task1/source/u-QhJMXmcPK/index.html Normal file
View File

@@ -0,0 +1,174 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>CalTally</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mali:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="big-container">
<div class="welcome">
<iframe src="https://giphy.com/embed/wMQX4lLIYRTKE" width="60" height="200" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
<h1 class="title">
Welcome <br />to<br />
CalTally
</h1>
</div>
<div class="part1">
<h3 id="form-title">Calculate Total Daily Energy Expenditure</h3>
<form id="healthForm">
<div class="form-group">
<label for="nameInput">Nickname:</label><br />
<input
type="text"
min="1"
class="form-control"
id="nameInput"
required
/>
</div>
<div class="form-group">
<label for="ageInput">Age:</label><br />
<input
type="number"
min="0"
class="form-control"
id="ageInput"
required
/>
</div>
<div class="form-group">
<label for="genderInput">Gender:</label><br />
<select id="genderInput" class="form-control">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div class="form-group">
<label for="heightInput">Height (cm):</label><br />
<input
type="number"
min="0"
class="form-control"
id="heightInput"
required
/>
</div>
<div class="form-group">
<label for="weightInput">Weight (kg):</label><br />
<input
type="number"
min="0"
class="form-control"
id="weightInput"
required
/>
</div>
<div class="form-group">
<label for="activityLevelInput">Activity Level:</label><br/>
<select
class="calorie"
id="activityLevelInput"
class="form-control"
>
<option value="sedentary">
Sedentary (little or no exercise)
</option>
<option value="lightlyActive">
Lightly Active (light exercise/sports 1-3 days/week)
</option>
<option value="moderatelyActive">
Moderately Active (moderate exercise/sports 3-5 days/week)
</option>
<option value="veryActive">
Very Active (hard exercise/sports 6-7 days/week)
</option>
<option value="superActive">
Super Active (very hard exercise/sports & physical job or
training)
</option>
</select>
</div>
<br />
<button type="submit" class="bmrbtn" id="submitBtn">
Calculate TDEE
</button>
</form>
<div id="result"></div>
</div>
<div class="part2" id="questionContainer" style="display: none">
<h3>What did you eat today?</h3>
<label>Food Weight:</label
><input type="number" class="calorie" id="food-weight-input" autocomplete="name" />
<select class="calorie" id="unit-select">
<option class="unit" value="g">g</option>
<option class="unit" value="oz">oz</option>
<option class="unit" value="lb">lb</option>
</select>
<br />
<label>Food Name: </label
><input type="text" class="calorie" id="food-name-input" autocomplete="name" />
<button type="button" class="foodbtn" id="calculate-btn">
Get the Calories
</button>
</div>
<div id="part2result"><div id="result-container"></div></div>
<div class="part3">
<div class="date">
<h1 class="today">Today</h1>
</div>
<div id="cal-value">
</div>
</div>
<div class="part4">
<div id="container">
<p>Weekly Report</p>
<div id="dateContainer">
<button class="datebtn" id="prevButton">&lt;</button>
<span id="currentDate"></span>
<button class="datebtn" id="nextButton">&gt;</button>
</div>
<!-- <div class="barcontainer">
<div class="bar" id="bar1" style="height: 50%"></div>
<div class="day" id="day1"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar2"style="height: 50%"></div>
<div class="day" id="day2"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar3"style="height: 50%"></div>
<div class="day" id="day3"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar4"style="height: 50%"></div>
<div class="day" id="day4"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar5" style="height: 50%"></div>
<div class="day" id="day5"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar6"style="height: 50%"></div>
<div class="day" id="day6"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar7" style="height: 50%"></div>
<div class="day" id="day7"></div>
</div> -->
</div>
</div>
<script src="./index.js"></script>
</body>
</html>

456
task1/source/u-QhJMXmcPK/index.js Normal file
View File

@@ -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 = `<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 = `
<h2>Results:</h2>
<div class="line" id="foodname">Name: ${data[0].name}</div>
<div class="line" id="serving_size">Serving Size: ${data[0].serving_size_g}g</div>
<div class="line" id="calories">Calories: ${data[0].calories} cal</div>
<div class="line" >Protein: ${data[0].protein_g} g</div>
<div class="line" >Fiber: ${data[0].fiber_g} g</div>
<div class="line" >Total Fat: ${data[0].fat_total_g} g</div>
<div class="line" >Saturated Fat: ${data[0].fat_saturated_g} g</div>
<div class="line" >Cholesterol: ${data[0].cholesterol_mg} g</div>
<div class="line" >Total Carbohydrates: ${data[0].carbohydrates_total_g} g</div>
<button id="recordbtn">Save in the intake list</button>
`;
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();
});

391
task1/source/u-QhJMXmcPK/style.css Normal file
View File

@@ -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 */

BIN
task1/source/u-ySeJGp_it/IMG_4651.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 KiB

BIN
task1/source/u-ySeJGp_it/IMG_4654.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 MiB

BIN
task1/source/u-ySeJGp_it/IMG_4657.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 MiB

249
task1/testweb-draft1/index.html Normal file
View File

@@ -0,0 +1,249 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>CalTally</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mali:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="content-container">
<div class="content-column">
<div style="padding: 1rem;">
<!-- content start -->
<div class="welcome">
<iframe src="https://giphy.com/embed/wMQX4lLIYRTKE" width="60" height="120" frameBorder="0" class="giphy-embed"
allowFullScreen></iframe>
<h1 class="title">
Welcome <br />to<br />
CalTally
</h1>
</div>
<!-- content end -->
</div>
<div style="margin-top: 0.2rem; padding: 0.5rem;">
<!-- content start -->
<div class="part1">
<h3 id="form-title">
Calculate Total Daily Energy Expenditure
</h3>
<div class="part1-body">
<form id="healthForm">
<div class="form-group">
<label for="nameInput">Nickname:</label>
<input type="text" min="1" class="form-control" id="nameInput" required />
</div>
<!--
<div class="form-group">
<label class="nickname-label" for="nameInput">Nickname:</label>
<input type="text" min="1" class="form-control" id="nameInput" required style="border: 1px solid black ;"/>
</div>
-->
<div class="form-group">
<label for="ageInput">Age:</label>
<input type="number" min="0" class="form-control" id="ageInput" required />
</div>
<div class="form-group">
<label for="genderInput">Gender:</label>
<!--
<select id="genderInput" class="form-control">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
-->
<div class="gender-selector">
<div>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">Male</label>
</div>
<div>/</div>
<div>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">Female</label>
</div>
</div>
</div>
<div class="form-group">
<label for="heightInput">Height (cm):</label>
<input type="number" min="0" class="form-control" id="heightInput" required />
</div>
<div class="form-group">
<label for="weightInput">Weight (kg):</label>
<input type="number" min="0" class="form-control" id="weightInput" required />
</div>
<div class="form-group">
<label for="activityLevelInput">Activity Level:</label>
<select class="calorie" id="activityLevelInput" class="form-control">
<option value="sedentary">
Sedentary (little or no exercise)
</option>
<option value="lightlyActive">
Lightly Active (light exercise/sports 1-3 days/week)
</option>
<option value="moderatelyActive">
Moderately Active (moderate exercise/sports 3-5 days/week)
</option>
<option value="veryActive">
Very Active (hard exercise/sports 6-7 days/week)
</option>
<option value="superActive">
Super Active (very hard exercise/sports & physical job or
training)
</option>
</select>
</div>
<div class="form-footer">
<button type="submit" class="bmrbtn" id="submitBtn">
Calculate TDEE
</button>
</div>
</form>
</div>
</div>
<!-- content end -->
</div>
</div>
<div class="content-column">
<div style="padding: 1rem;">
<!-- content start -->
<div class="part2" id="questionContainer" style="display: none">
<div>
<div>
<h3>What did you eat today?</h3>
</div>
<div class="input-label">
<label>Food Weight:</label>
</div>
<div class="weight-group">
<input type="number" min="1" class="form-control" id="food-weight-input" required />
<div style="width: 80px;">
<select class="calorie" id="unit-select" class="form-control">
<option class="unit" value="g">g</option>
<option class="unit" value="oz">oz</option>
<option class="unit" value="lb">lb</option>
</select>
</div>
</div>
<div class="input-label">
<label>Food Name: </label>
</div>
<div>
<input type="text" class="form-control" id="food-name-input" required />
</div>
<div>
<button type="button" class="foodbtn" id="calculate-btn">
Get the Calories
</button>
</div>
</div>
</div>
<!-- content end -->
</div>
<div style="margin-top: 0.2rem; padding: 0.5rem;">
<!-- content start -->
<div id="part2result">
<div id="result-container">
</div>
</div>
<!-- content end -->
</div>
</div>
<div class="content-column">
<div style="padding: 1rem;">
<!-- content start -->
<div class="part3">
<div class="date">
<h1 class="today">Today</h1>
</div>
<div id="cal-value">
</div>
</div>
<!-- content end -->
</div>
<div style="margin-top: 0.2rem; padding: 0.5rem;">
<!-- content start -->
<div class="part4">
<div id="container" class="weekly-report-container">
<p>Weekly Report</p>
<div id="dateContainer">
<button class="datebtn" id="prevButton">&lt;</button>
<span id="currentDate"></span>
<button class="datebtn" id="nextButton">&gt;</button>
</div>
<!--
<div class="barcontainer">
<div class="bar" id="bar1" style="height: 50%"></div>
<div class="day" id="day1"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar2"style="height: 50%"></div>
<div class="day" id="day2"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar3"style="height: 50%"></div>
<div class="day" id="day3"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar4"style="height: 50%"></div>
<div class="day" id="day4"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar5" style="height: 50%"></div>
<div class="day" id="day5"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar6"style="height: 50%"></div>
<div class="day" id="day6"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar7" style="height: 50%"></div>
<div class="day" id="day7"></div>
</div> -->
</div>
</div>
<!-- content end -->
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>

499
task1/testweb-draft1/index.js Normal file
View File

@@ -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 = `<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();
});

560
task1/testweb-draft1/style.css Normal file
View File

@@ -0,0 +1,560 @@
* {
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%; */
/* grid-row: 1 / 2; */
padding: 20px 40px;
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
}
.part1 {
background-color: #ffffff;
/* grid-row: 2 / 4; */
/* display: flex; */
/* flex-direction: column; */
/* justify-content: center; */
/* align-items: center; */
padding: 20px 20px;
/* width: 75%; */
/* height: 110%; */
border-radius: 50px;
/* line-height: 10px; */
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
}
.part1-body {
}
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: 100%;
font-family: "Mali", cursive;
}
.form-group input {
margin-top: 0.5rem;
}
.form-control {
background-color: #f0f0f0;
padding: 5px;
border-radius: 8px;
border: 1px solid #707070;
width: calc(100% - 10px);
}
.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;
}
.old-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);
}
.part2 {
background-color: #74f5fd;
border-radius: 50px;
padding: 20px;
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
/* width: 100%; */
/* max-width: 300px; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.part2>div>div{
display: flex;
flex-direction: row;
justify-content:center;
align-items: center;
}
.part2 div.input-label {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
}
.part2 input {
margin-top:0.5rem;
}
.calorie {
background-color: rgba(255, 255, 255, 0.3);
padding: 3px;
border-radius: 8px;
border: 1px solid rgba(180, 134, 134, 0.3);
width:100%;
}
.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;
min-height: 300px;
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;
min-height: 300px;
/* 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 20px;
/* 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);
min-height: 300px;
}
.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 */
.gender-selector {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1rem;
}
.form-group .nickname-label{
width: 100%;
}
.form-footer {
display: flex;
flex-direction: row;
justify-content: center;
}
.tile {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 3rem;
}
.tile>div{
width: 33%;
}
.weight-group {
}
.weight-group input {
margin-bottom: 5px;
margin-right: 0.5rem;
}
.result-header {
width: 100%;
display: flex;
flex-direction : row;
justify-content: space-between;
}
.result-header div {
font-size:2rem;
}
.result-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px dotted grey;
}
.result-row div {
font-size: 1.1rem;
}
.foodresult {
width: 100%;
}
#result-container div.result-footer {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 1rem;
}
.content-container{
width: 1000px;
height: 750px;
display: flex;
flex-direction: row;
}
/*
.content-container div {
width: 33%;
min-height: 100px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
} */
.content-column {
width: 33%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.weekly-report-container {
display: flex;
flex-direction: row;
justify-content:space-between;
font-size: 1.5rem;
}
.weekly-report-container p{
font-weight: bold;
}

251
task1/testweb-draft2/index.html Normal file
View File

@@ -0,0 +1,251 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>CalTally</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mali:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="content-container">
<div class="content-column">
<div style="padding: 1rem;">
<!-- content start -->
<div class="welcome-container">
<div class="welcome">
<iframe src="https://giphy.com/embed/wMQX4lLIYRTKE" width="60" height="120" frameBorder="0"
class="giphy-embed" allowFullScreen></iframe>
<h1 class="title">
<span>Welcome</span>
<span>to</span>
<span>CalTally</span>
</h1>
</div>
</div>
<!-- content end -->
</div>
<div style="margin-top: 0.2rem; padding: 0.5rem;">
<!-- content start -->
<div class="part1">
<h3 id="form-title">
Calculate Total Daily Energy Expenditure
</h3>
<div class="part1-body">
<form id="healthForm">
<div class="form-group">
<label for="nameInput">Nickname:</label>
<input type="text" min="1" class="form-control" id="nameInput" required />
</div>
<!--
<div class="form-group">
<label class="nickname-label" for="nameInput">Nickname:</label>
<input type="text" min="1" class="form-control" id="nameInput" required style="border: 1px solid black ;"/>
</div>
-->
<div class="form-group">
<label for="ageInput">Age:</label>
<input type="number" min="0" class="form-control" id="ageInput" required />
</div>
<div class="form-group">
<label for="genderInput">Gender:</label>
<!--
<select id="genderInput" class="form-control">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
-->
<div class="gender-selector">
<div>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">Male</label>
</div>
<div>/</div>
<div>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">Female</label>
</div>
</div>
</div>
<div class="form-group">
<label for="heightInput">Height (cm):</label>
<input type="number" min="0" class="form-control" id="heightInput" required />
</div>
<div class="form-group">
<label for="weightInput">Weight (kg):</label>
<input type="number" min="0" class="form-control" id="weightInput" required />
</div>
<div class="form-group">
<label for="activityLevelInput">Activity Level:</label>
<select class="calorie" id="activityLevelInput" class="form-control">
<option value="sedentary">
Sedentary (little or no exercise)
</option>
<option value="lightlyActive">
Lightly Active (light exercise/sports 1-3 days/week)
</option>
<option value="moderatelyActive">
Moderately Active (moderate exercise/sports 3-5 days/week)
</option>
<option value="veryActive">
Very Active (hard exercise/sports 6-7 days/week)
</option>
<option value="superActive">
Super Active (very hard exercise/sports & physical job or
training)
</option>
</select>
</div>
<div class="form-footer">
<button type="submit" class="bmrbtn" id="submitBtn">
Calculate TDEE
</button>
</div>
</form>
</div>
</div>
<!-- content end -->
</div>
</div>
<div class="content-column">
<div style="padding: 1rem;">
<!-- content start -->
<div class="part2" id="questionContainer" style="display: none">
<div>
<div>
<h3>What did you eat today?</h3>
</div>
<div class="input-label">
<label>Food Weight:</label>
</div>
<div class="weight-group">
<input type="number" min="1" class="form-control" id="food-weight-input" required />
<div style="width: 80px;">
<select class="calorie" id="unit-select" class="form-control">
<option class="unit" value="g">g</option>
<option class="unit" value="oz">oz</option>
<option class="unit" value="lb">lb</option>
</select>
</div>
</div>
<div class="input-label">
<label>Food Name: </label>
</div>
<div>
<input type="text" class="form-control" id="food-name-input" required />
</div>
<div>
<button type="button" class="get_the_calories_btn" id="calculate-btn">
Get the Calories
</button>
</div>
</div>
</div>
<!-- content end -->
</div>
<div style="margin-top: 0.2rem; padding: 0.5rem;">
<!-- content start -->
<div id="part2result">
<div id="result-container">
</div>
</div>
<!-- content end -->
</div>
</div>
<div class="content-column">
<div style="padding: 1rem;">
<!-- content start -->
<div class="part3">
<div class="date">
<h1 class="today">Today</h1>
</div>
<div id="cal-value">
</div>
</div>
<!-- content end -->
</div>
<div style="margin-top: 0.2rem; padding: 0.5rem;">
<!-- content start -->
<div class="part4">
<div id="container" class="weekly-report-container">
<p>Weekly Report</p>
<div id="dateContainer">
<button class="datebtn" id="prevButton">&lt;</button>
<span id="currentDate"></span>
<button class="datebtn" id="nextButton">&gt;</button>
</div>
<!--
<div class="barcontainer">
<div class="bar" id="bar1" style="height: 50%"></div>
<div class="day" id="day1"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar2"style="height: 50%"></div>
<div class="day" id="day2"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar3"style="height: 50%"></div>
<div class="day" id="day3"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar4"style="height: 50%"></div>
<div class="day" id="day4"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar5" style="height: 50%"></div>
<div class="day" id="day5"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar6"style="height: 50%"></div>
<div class="day" id="day6"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar7" style="height: 50%"></div>
<div class="day" id="day7"></div>
</div> -->
</div>
</div>
<!-- content end -->
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>

500
task1/testweb-draft2/index.js Normal file
View File

@@ -0,0 +1,500 @@
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() {
alert("helloworld");
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();
});

BIN
task1/testweb-draft2/snapshot.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

564
task1/testweb-draft2/style.css Normal file
View File

@@ -0,0 +1,564 @@
* {
font-family: "Mali", cursive;
font-size: small;
font-weight: 400;
}
.title span{
font-size: 2rem;
font-weight: bold;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.welcome-container {
display: flex;
flex-direction: row;
justify-content: center;
}
.welcome {
width: 100%;
border-radius: 10px;
display: flex;
gap:2rem;
/* width: 75%; */
/* grid-row: 1 / 2; */
padding: 20px 40px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.part1 {
background-color: #ffffff;
/* grid-row: 2 / 4; */
/* display: flex; */
/* flex-direction: column; */
/* justify-content: center; */
/* align-items: center; */
padding: 20px 20px;
/* width: 75%; */
/* height: 110%; */
border-radius: 10px;
/* line-height: 10px; */
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.part1-body {}
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: 100%;
font-family: "Mali", cursive;
}
.form-group input {
margin-top: 0.5rem;
}
.form-control {
background-color: #f0f0f0;
padding: 5px;
border-radius: 8px;
border: 1px solid #707070;
width: calc(100% - 10px);
}
.bmrbtn {
border-radius: 10px;
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;
}
.old-part2 {
background-color: #74f5fd;
border-radius: 10px;
padding: 20px;
grid-column: 2 / 3;
grid-row: 1 / 3;
height: 40%;
width: 100%;
line-height: 15px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.part2 {
background-color: #74f5fd;
border-radius: 10px;
padding: 20px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
/* width: 100%; */
/* max-width: 300px; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.part2>div>div {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.part2 div.input-label {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
}
.part2 input {
margin-top: 0.5rem;
}
.calorie {
background-color: rgba(255, 255, 255, 0.3);
padding: 3px;
border-radius: 8px;
border: 1px solid rgba(180, 134, 134, 0.3);
width: 100%;
}
.apiInput {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 5px;
flex-grow: 1;
}
.apiInput select {
margin-top: 5px;
}
.get_the_calories_btn {
border-radius: 10px;
padding: 10px;
border: none;
background-color: #121212;
color: white;
width: 70%;
margin-top: 10px;
}
#part2result {
background-color: #F5F5F5;
min-height: 300px;
padding: 15px 15px;
border-radius: 10px;
/* grid-column: 2 / 3; */
/* grid-row: 2 / 4; */
/* width: 85%; */
/* height: 93%; */
/* margin-top: 60px; */
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
#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: 10px;
padding: 8px 30px;
min-height: 300px;
/* grid-column: 3 / 4; */
/* grid-row: 1 / 3; */
/* height: 41vh; */
/* width: 40vh; */
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
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: 10px;
padding: 8px 20px;
/* grid-column: 3 / 4; */
/* grid-row: 2 / 3; */
/* height: 50vh; */
/* width: 40vh; */
/* position: relative; */
/* top: 90px; */
/* right: 3px; */
/* margin-top: 50px; */
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
min-height: 300px;
}
.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 */
.gender-selector {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1rem;
}
.form-group .nickname-label {
width: 100%;
}
.form-footer {
display: flex;
flex-direction: row;
justify-content: center;
}
.tile {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 3rem;
}
.tile>div {
width: 33%;
}
.weight-group {}
.weight-group input {
margin-bottom: 5px;
margin-right: 0.5rem;
}
.result-header {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.result-header div {
font-size: 2rem;
}
.result-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px dotted grey;
}
.result-row div {
font-size: 1.1rem;
}
.foodresult {
width: 100%;
}
#result-container div.result-footer {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 1rem;
}
.content-container {
width: 1000px;
height: 750px;
display: flex;
flex-direction: row;
}
/*
.content-container div {
width: 33%;
min-height: 100px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
} */
.content-column {
width: 33%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.weekly-report-container {
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 1.5rem;
}
.weekly-report-container p {
font-weight: bold;
}

249
task1/testweb/index.html Normal file
View File

@@ -0,0 +1,249 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>CalTally</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mali:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="content-container">
<div class="content-column">
<div style="padding: 1rem;">
<!-- content start -->
<div class="welcome">
<iframe src="https://giphy.com/embed/wMQX4lLIYRTKE" width="60" height="120" frameBorder="0" class="giphy-embed"
allowFullScreen></iframe>
<h1 class="title">
Welcome <br />to<br />
CalTally
</h1>
</div>
<!-- content end -->
</div>
<div style="margin-top: 0.2rem; padding: 0.5rem;">
<!-- content start -->
<div class="part1">
<h3 id="form-title">
Calculate Total Daily Energy Expenditure
</h3>
<div class="part1-body">
<form id="healthForm">
<div class="form-group">
<label for="nameInput">Nickname:</label>
<input type="text" min="1" class="form-control" id="nameInput" required />
</div>
<!--
<div class="form-group">
<label class="nickname-label" for="nameInput">Nickname:</label>
<input type="text" min="1" class="form-control" id="nameInput" required style="border: 1px solid black ;"/>
</div>
-->
<div class="form-group">
<label for="ageInput">Age:</label>
<input type="number" min="0" class="form-control" id="ageInput" required />
</div>
<div class="form-group">
<label for="genderInput">Gender:</label>
<!--
<select id="genderInput" class="form-control">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
-->
<div class="gender-selector">
<div>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">Male</label>
</div>
<div>/</div>
<div>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">Female</label>
</div>
</div>
</div>
<div class="form-group">
<label for="heightInput">Height (cm):</label>
<input type="number" min="0" class="form-control" id="heightInput" required />
</div>
<div class="form-group">
<label for="weightInput">Weight (kg):</label>
<input type="number" min="0" class="form-control" id="weightInput" required />
</div>
<div class="form-group">
<label for="activityLevelInput">Activity Level:</label>
<select class="calorie" id="activityLevelInput" class="form-control">
<option value="sedentary">
Sedentary (little or no exercise)
</option>
<option value="lightlyActive">
Lightly Active (light exercise/sports 1-3 days/week)
</option>
<option value="moderatelyActive">
Moderately Active (moderate exercise/sports 3-5 days/week)
</option>
<option value="veryActive">
Very Active (hard exercise/sports 6-7 days/week)
</option>
<option value="superActive">
Super Active (very hard exercise/sports & physical job or
training)
</option>
</select>
</div>
<div class="form-footer">
<button type="submit" class="bmrbtn" id="submitBtn">
Calculate TDEE
</button>
</div>
</form>
</div>
</div>
<!-- content end -->
</div>
</div>
<div class="content-column">
<div style="padding: 1rem;">
<!-- content start -->
<div class="part2" id="questionContainer" style="display: none">
<div>
<div>
<h3>What did you eat today?</h3>
</div>
<div class="input-label">
<label>Food Weight:</label>
</div>
<div class="weight-group">
<input type="number" min="1" class="form-control" id="food-weight-input" required />
<div style="width: 80px;">
<select class="calorie" id="unit-select" class="form-control">
<option class="unit" value="g">g</option>
<option class="unit" value="oz">oz</option>
<option class="unit" value="lb">lb</option>
</select>
</div>
</div>
<div class="input-label">
<label>Food Name: </label>
</div>
<div>
<input type="text" class="form-control" id="food-name-input" required />
</div>
<div>
<button type="button" class="foodbtn" id="calculate-btn">
Get the Calories
</button>
</div>
</div>
</div>
<!-- content end -->
</div>
<div style="margin-top: 0.2rem; padding: 0.5rem;">
<!-- content start -->
<div id="part2result">
<div id="result-container">
</div>
</div>
<!-- content end -->
</div>
</div>
<div class="content-column">
<div style="padding: 1rem;">
<!-- content start -->
<div class="part3">
<div class="date">
<h1 class="today">Today</h1>
</div>
<div id="cal-value">
</div>
</div>
<!-- content end -->
</div>
<div style="margin-top: 0.2rem; padding: 0.5rem;">
<!-- content start -->
<div class="part4">
<div id="container" class="weekly-report-container">
<p>Weekly Report</p>
<div id="dateContainer">
<button class="datebtn" id="prevButton">&lt;</button>
<span id="currentDate"></span>
<button class="datebtn" id="nextButton">&gt;</button>
</div>
<!--
<div class="barcontainer">
<div class="bar" id="bar1" style="height: 50%"></div>
<div class="day" id="day1"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar2"style="height: 50%"></div>
<div class="day" id="day2"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar3"style="height: 50%"></div>
<div class="day" id="day3"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar4"style="height: 50%"></div>
<div class="day" id="day4"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar5" style="height: 50%"></div>
<div class="day" id="day5"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar6"style="height: 50%"></div>
<div class="day" id="day6"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar7" style="height: 50%"></div>
<div class="day" id="day7"></div>
</div> -->
</div>
</div>
<!-- content end -->
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>

499
task1/testweb/index.js Normal file
View File

@@ -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 = `<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();
});

560
task1/testweb/style.css Normal file
View File

@@ -0,0 +1,560 @@
* {
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%; */
/* grid-row: 1 / 2; */
padding: 20px 40px;
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
}
.part1 {
background-color: #ffffff;
/* grid-row: 2 / 4; */
/* display: flex; */
/* flex-direction: column; */
/* justify-content: center; */
/* align-items: center; */
padding: 20px 20px;
/* width: 75%; */
/* height: 110%; */
border-radius: 50px;
/* line-height: 10px; */
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
}
.part1-body {
}
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: 100%;
font-family: "Mali", cursive;
}
.form-group input {
margin-top: 0.5rem;
}
.form-control {
background-color: #f0f0f0;
padding: 5px;
border-radius: 8px;
border: 1px solid #707070;
width: calc(100% - 10px);
}
.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;
}
.old-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);
}
.part2 {
background-color: #74f5fd;
border-radius: 50px;
padding: 20px;
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
/* width: 100%; */
/* max-width: 300px; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.part2>div>div{
display: flex;
flex-direction: row;
justify-content:center;
align-items: center;
}
.part2 div.input-label {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
}
.part2 input {
margin-top:0.5rem;
}
.calorie {
background-color: rgba(255, 255, 255, 0.3);
padding: 3px;
border-radius: 8px;
border: 1px solid rgba(180, 134, 134, 0.3);
width:100%;
}
.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;
min-height: 300px;
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;
min-height: 300px;
/* 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 20px;
/* 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);
min-height: 300px;
}
.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 */
.gender-selector {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1rem;
}
.form-group .nickname-label{
width: 100%;
}
.form-footer {
display: flex;
flex-direction: row;
justify-content: center;
}
.tile {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 3rem;
}
.tile>div{
width: 33%;
}
.weight-group {
}
.weight-group input {
margin-bottom: 5px;
margin-right: 0.5rem;
}
.result-header {
width: 100%;
display: flex;
flex-direction : row;
justify-content: space-between;
}
.result-header div {
font-size:2rem;
}
.result-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px dotted grey;
}
.result-row div {
font-size: 1.1rem;
}
.foodresult {
width: 100%;
}
#result-container div.result-footer {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 1rem;
}
.content-container{
width: 1000px;
height: 750px;
display: flex;
flex-direction: row;
}
/*
.content-container div {
width: 33%;
min-height: 100px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
} */
.content-column {
width: 33%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.weekly-report-container {
display: flex;
flex-direction: row;
justify-content:space-between;
font-size: 1.5rem;
}
.weekly-report-container p{
font-weight: bold;
}