오늘은 발표 준비 및 발표를 하였습니다.
그리고 오늘은 이제 마지막 칼로리 계산 부분 구현을 해야합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Food Intake Analyzer</title>
<style>
body {
margin: 0;
font-family: 'Arial', sans-serif;
display: flex;
height: 100vh;
color: #f8f9fa;
background: linear-gradient(to bottom, #1c1c1e, #2c2c2e);
}
.sidebar {
width: 30%;
background-color: #343a40;
padding: 20px;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
gap: 15px;
}
.sidebar h2 {
color: #ffc107;
margin-bottom: 10px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form-group input, .form-group select {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #495057;
border-radius: 5px;
background-color: #2c2c2e;
color: #f8f9fa;
}
.form-group input:focus, .form-group select:focus {
outline: none;
border-color: #ffc107;
}
.submit-btn {
background-color: #ffc107;
border: none;
padding: 12px;
font-size: 18px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.submit-btn:hover {
background-color: #ffcd39;
}
.results-panel {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
gap: 20px;
}
.results-panel h2 {
color: #ffc107;
border-bottom: 2px solid #495057;
padding-bottom: 5px;
}
.result-box {
background-color: #495057;
padding: 15px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.result-box p {
margin: 0;
}
#dynamic-results {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="sidebar">
<h2>Food Intake Form</h2>
<div class="form-group">
<label for="food">Food Name:</label>
<input type="text" id="food" placeholder="Enter food name">
</div>
<div class="form-group">
<label for="time">Time of Intake:</label>
<select id="time">
<option value="breakfast">Breakfast</option>
<option value="lunch">Lunch</option>
<option value="dinner">Dinner</option>
</select>
</div>
<div class="form-group">
<label for="age">Your Age:</label>
<input type="number" id="age" placeholder="Enter your age">
</div>
<div class="form-group">
<label for="diet">On a Diet?</label>
<select id="diet">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<button class="submit-btn" id="analyze-btn">Analyze</button>
</div>
<div class="results-panel">
<h2>Analysis Results</h2>
<div id="dynamic-results"></div>
</div>
<script>
document.getElementById('analyze-btn').addEventListener('click', function () {
const time = document.getElementById('time').value;
const resultsContainer = document.getElementById('dynamic-results');
resultsContainer.innerHTML = ''; // 기존 결과 초기화
// 동적 텍스트 박스 생성
const inputBox = document.createElement('div');
inputBox.classList.add('form-group');
if (time === 'lunch') {
const label = document.createElement('label');
label.innerText = 'What did you eat during Morning?';
inputBox.appendChild(label);
const input = document.createElement('input');
input.type = 'text';
input.placeholder = 'Enter foods consumed during Morning';
input.id = 'previous-food';
input.classList.add('dynamic-input');
inputBox.appendChild(input);
} else if (time === 'dinner') {
const morningLabel = document.createElement('label');
morningLabel.innerText = 'What did you eat during Morning?';
inputBox.appendChild(morningLabel);
const morningInput = document.createElement('input');
morningInput.type = 'text';
morningInput.placeholder = 'Enter foods consumed during Morning';
morningInput.id = 'morning-food';
morningInput.classList.add('dynamic-input');
inputBox.appendChild(morningInput);
const lunchLabel = document.createElement('label');
lunchLabel.innerText = 'What did you eat during Lunch?';
inputBox.appendChild(lunchLabel);
const lunchInput = document.createElement('input');
lunchInput.type = 'text';
lunchInput.placeholder = 'Enter foods consumed during Lunch';
lunchInput.id = 'lunch-food';
lunchInput.classList.add('dynamic-input');
inputBox.appendChild(lunchInput);
} else {
const label = document.createElement('label');
label.innerText = `What did you eat before ${time}?`;
inputBox.appendChild(label);
const input = document.createElement('input');
input.type = 'text';
input.placeholder = `Enter food consumed before ${time}`;
input.id = 'previous-food';
input.classList.add('dynamic-input');
inputBox.appendChild(input);
}
resultsContainer.appendChild(inputBox);
// 분석 요청 버튼 생성
const analyzeButton = document.createElement('button');
analyzeButton.innerText = 'Submit for Analysis';
analyzeButton.classList.add('submit-btn');
analyzeButton.addEventListener('click', function () {
const previousFood = document.getElementById('previous-food')?.value;
const morningFood = document.getElementById('morning-food')?.value;
const lunchFood = document.getElementById('lunch-food')?.value;
if (time === 'dinner' && (!morningFood || !lunchFood)) {
alert('Please enter the foods you ate during Morning and Lunch!');
return;
} else if (!previousFood) {
alert('Please enter the food you ate before!');
return;
}
// 데이터 백엔드로 전송
fetch('/analyze-food', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ time, morningFood, lunchFood, previousFood }),
})
.then(response => response.json())
.then(data => {
// 결과 표시
resultsContainer.innerHTML = `
<div class="result-box">
<p><strong>Analysis:</strong> ${data.analysis}</p>
<p><strong>Recommendations:</strong> ${data.recommendations}</p>
</div>
`;
})
.catch(error => {
console.error('Error:', error);
alert('Failed to analyze the data. Please try again later.');
});
});
resultsContainer.appendChild(analyzeButton);
});
</script>
</body>
</html>
대략 이렇게 구성이 되어있지만 내일은 수정을 더 해야할 것 같습니다.