<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>생리주기별 맞춤 운동 처방</title> <style> body { font-family: 'Arial', sans-serif; margin: 20px; background-color: #f9f9f9; color: #333; display: flex; flex-direction: column; align-items: center; } .container { background-color: white; padding: 20px 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); width: 100%; max-width: 500px; } h2 { color: #d6336c; /* 포인트 색상 */ text-align: center; margin-bottom: 20px; } h3 { color: #555; margin-top: 25px; border-bottom: 1px solid #eee; padding-bottom: 5px; } p, label { font-size: 16px; line-height: 1.6; } label { display: block; margin-top: 15px; margin-bottom: 5px; font-weight: bold; color: #333; } input[type=date], input[type=number] { font-size: 16px; padding: 10px; border: 1px solid #ddd; border-radius: 4px; width: calc(100% - 22px); /* padding and border */ box-sizing: border-box; } input[type=submit] { background-color: #d6336c; /* 포인트 색상 */ color: white; border: none; border-radius: 4px; cursor: pointer; padding: 12px 20px; font-size: 16px; width: 100%; margin-top: 20px; transition: background-color 0.3s ease; } input[type=submit]:hover { background-color: #c2255c; /* 어두운 포인트 색상 */ } #result { background-color: #f0f9ff; border-left: 6px solid #2196F3; /* 파란색 계열로 변경 */ margin-top: 20px; padding: 15px; border-radius: 4px; line-height: 1.7; } #result.error { background-color: #ffebee; border-left-color: #f44336; /* 빨간색 */ color: #c62828; /* 어두운 빨간색 텍스트 */ } .info-text { font-size: 14px; color: #777; margin-bottom: 15px; text-align: center; } </style> </head> <body> <div class="container"> <h2>생리주기별 맞춤 운동 처방 계산기</h2> <p class="info-text">아래 정보를 입력하고 '운동 처방 확인하기' 버튼을 클릭하세요.</p> <form id="exerciseForm"> <label for="lastPeriodDate">마지막 생리 시작일:</label> <input type="date" id="lastPeriodDate" name="lastPeriodDate" required> <label for="cycleLength">평균 생리주기 길이 (일):</label> <input type="number" id="cycleLength" name="cycleLength" min="21" max="35" value="28" required> <label for="todayDate">오늘 날짜:</label> <input type="date" id="todayDate" name="todayDate" required> <input type="submit" value="운동 처방 확인하기"> </form> <h3>오늘의 운동 처방:</h3> <div id="result"> <p>정보를 입력 후 버튼을 눌러주세요.</p> </div> </div> <script> // YYYY-MM-DD 형식의 문자열을 Date 객체로 변환하는 헬퍼 함수 function parseDateToLocal(dateString) { if (!/^\d{4}-\d{2}-\d{2}$/.test(dateString)) { return new Date(NaN); } const parts = dateString.split('-'); const year = parseInt(parts[0], 10); const month = parseInt(parts[1], 10) - 1; const day = parseInt(parts[2], 10); const d = new Date(year, month, day); if (d.getFullYear() === year && d.getMonth() === month && d.getDate() === day) { return d; } return new Date(NaN); } function calculateExercise() { // 결과를 표시할 HTML 요소를 먼저 가져옴 var resultElement = document.getElementById("result"); // 중요: resultElement가 실제로 존재하는지 확인 if (!resultElement) { console.error("Error in calculateExercise: HTML element with id='result' not found."); alert("페이지 오류: 결과를 표시할 공간('result' ID)을 찾을 수 없습니다. HTML 코드를 확인해주세요."); return; // resultElement가 없으면 함수 실행 중단 } var lastPeriodDateStr = document.getElementById("lastPeriodDate").value; var cycleLengthInput = document.getElementById("cycleLength").value; var todayDateStr = document.getElementById("todayDate").value; // 이전 결과 및 스타일 초기화 resultElement.innerHTML = ""; resultElement.className = ""; // 클래스 초기화 (error 클래스 제거 등) // 1. 입력 값 유효성 검사 if (!lastPeriodDateStr || !cycleLengthInput || !todayDateStr) { resultElement.innerHTML = "모든 필수 정보를 입력해주세요."; resultElement.classList.add("error"); return; } var cycleLength = parseInt(cycleLengthInput, 10); if (isNaN(cycleLength) || cycleLength < 21 || cycleLength > 35) { resultElement.innerHTML = "평균 생리주기 길이는 21일에서 35일 사이의 숫자로 입력해주세요."; resultElement.classList.add("error"); return; } var lastPeriodStart = parseDateToLocal(lastPeriodDateStr); var today = parseDateToLocal(todayDateStr); if (isNaN(lastPeriodStart.getTime())) { resultElement.innerHTML = "마지막 생리 시작일의 날짜 형식이 올바르지 않습니다. (YYYY-MM-DD 형식으로 입력)"; resultElement.classList.add("error"); return; } if (isNaN(today.getTime())) { resultElement.innerHTML = "오늘 날짜의 형식이 올바르지 않습니다. (YYYY-MM-DD 형식으로 입력)"; resultElement.classList.add("error"); return; } if (today < lastPeriodStart) { resultElement.innerHTML = "오늘 날짜는 마지막 생리 시작일보다 이전일 수 없습니다."; resultElement.classList.add("error"); return; } // 2. 주기일 계산 var timeDiff = today.getTime() - lastPeriodStart.getTime(); var daysElapsed = Math.floor(timeDiff / (1000 * 60 * 60 * 24)); var cycleDay = (daysElapsed % cycleLength) + 1; // 3. 생리 주기에 따른 운동 처방 var phase, lowerBody, spine, upperBody; if (cycleDay >= 1 && cycleDay <= 5) { phase = '월경기'; lowerBody = '하체순환 운동'; spine = '척추 안정화 운동'; upperBody = '상체순환 운동'; } else if (cycleDay >= 6 && cycleDay <= 13) { phase = '난포기'; lowerBody = '하체강화 운동'; spine = '척추 강화 운동'; upperBody = '상체강화 운동'; } else if (cycleDay === 14) { phase = '배란기'; lowerBody = '하체강화 운동 (고강도 가능)'; spine = '척추 강화 운동 (고강도 가능)'; upperBody = '상체강화 운동 (고강도 가능)'; } else { phase = '황체기'; lowerBody = '하체균형 운동'; spine = '척추 움직임 향상 운동'; upperBody = '상체균형 운동'; } // 4. 결과 표시 var resultText = '<strong>현재 주기 단계:</strong> ' + phase + '<br>' + '<strong>오늘의 하체 운동:</strong> ' + lowerBody + '<br>' + '<strong>오늘의 척추 운동:</strong> ' + spine + '<br>' + '<strong>오늘의 상체 운동:</strong> ' + upperBody + '<br><br>' + '<small>(계산된 주기일: ' + cycleDay + '일차)</small>'; resultElement.innerHTML = resultText; } // 페이지 로드 시 실행될 함수들 window.onload = function() { // 1. "오늘 날짜" 입력 필드에 현재 날짜를 기본값으로 설정 var todayForInput = new Date(); var yyyy = todayForInput.getFullYear(); var mm = String(todayForInput.getMonth() + 1).padStart(2, '0'); var dd = String(todayForInput.getDate()).padStart(2, '0'); var todayDateInputElement = document.getElementById('todayDate'); if (todayDateInputElement) { todayDateInputElement.value = yyyy + '-' + mm + '-' + dd; } else { console.warn("Warning: 'todayDate' input element not found."); } // 2. 폼 제출 이벤트 리스너 설정 var exerciseFormElement = document.getElementById("exerciseForm"); if (exerciseFormElement) { exerciseFormElement.addEventListener("submit", function(event) { event.preventDefault(); // 폼 기본 제출(새로고침) 방지 calculateExercise(); // 운동 처방 계산 함수 호출 }); } else { console.error("Error: Form with id='exerciseForm' not found. Submission handling will not work."); // 사용자에게 알릴 필요가 있다면, alert 또는 다른 방식으로 오류 표시 가능 // alert("페이지 구성 오류: 'exerciseForm'을 찾을 수 없어 운동 처방 기능을 실행할 수 없습니다."); } }; </script> </body> </html>