카테고리 없음
스파르타 AI-8기 TIL(1/15)-TeamProject
kimjunki-8
2025. 1. 15. 21:44
오늘은 발표 준비 및 발표를 하였습니다.
그리고 오늘은 이제 마지막 칼로리 계산 부분 구현을 해야합니다.
<!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>
대략 이렇게 구성이 되어있지만 내일은 수정을 더 해야할 것 같습니다.