-
11일 메이킹 챌린지 - 아홉수 (3일차)개발일지 2021. 7. 21. 20:36
- 비만도 계산 , 결과 버튼을 캘린더 아래에 배치
- 식단추천 추가
3일차 상황 <!Doctype html> <html lang="ko"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <!-- 구글폰트 --> <link href="https://fonts.googleapis.com/css?family=Stylish&display=swap" rel="stylesheet"> <title>코시국에 운동하기</title> <!-- style --> <style type="text/css"> * { font-family: "Stylish", sans-serif; } .wrap { width: 900px; margin: auto; } .textbox { width: 100%; overflow: hidden; font-size: 20px; padding: 8px 0; } .comment { color: blue; font-weight: bold; } #post-box { width: 500px; margin: 20px auto; padding: 50px; border: black solid; border-radius: 5px; } td { width: 50px; height: 50px; text-align: center; font-size: 20px; font-family: 굴림; border: 2px border-color: #3333FF; border-radius: 8px; /*모서리 둥글게*/ } .check { width: 900px; height: 300px; background-color: #E9ECEF; } .infor-box { width: 280px; position: relative; display: block; left: 35%; top: 20%; } .infor-box button { float: left; margin-left: 40%; } .btn botton{ float: left; margin-right: 10px; display: block; } .smtitle { text-align: center; margin-top: 10px; } .result_total{ width: 900px; height: 450px; border: 1px solid blue; } </style> <script> $(document).ready(function () { showArticles(); }); function openClose() { if ($("#post-box").css("display") == "block") { $("#post-box").hide(); $("#btn-post-box").text("캘린더 열기"); } else { $("#post-box").show(); $("#btn-post-box").text("캘린더 닫기"); } } function postArticle() { let url = $('#post-url').val() let comment = $('#post-comment').val() $.ajax({ type: "POST", url: "/memo", data: {url_give: url, comment_give: comment}, success: function (response) { // 성공하면 alert(response["msg"]); window.location.reload() } }) } function showArticles() { $.ajax({ type: "GET", url: "/memo", data: {}, success: function (response) { let articles = response['all_articles'] } }) } </script> <script type="text/javascript"> var today = new Date();//오늘 날짜//내 컴퓨터 로컬을 기준으로 today에 Date 객체를 넣어줌 var date = new Date();//today의 Date를 세어주는 역할 function prevCalendar() {//이전 달 // 이전 달을 today에 값을 저장하고 달력에 today를 넣어줌 //today.getFullYear() 현재 년도//today.getMonth() 월 //today.getDate() 일 //getMonth()는 현재 달을 받아 오므로 이전달을 출력하려면 -1을 해줘야함 today = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate()); buildCalendar(); //달력 cell 만들어 출력 } function nextCalendar() {//다음 달 // 다음 달을 today에 값을 저장하고 달력에 today 넣어줌 //today.getFullYear() 현재 년도//today.getMonth() 월 //today.getDate() 일 //getMonth()는 현재 달을 받아 오므로 다음달을 출력하려면 +1을 해줘야함 today = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate()); buildCalendar();//달력 cell 만들어 출력 } function buildCalendar() {//현재 달 달력 만들기 var doMonth = new Date(today.getFullYear(), today.getMonth(), 1); //이번 달의 첫째 날, //new를 쓰는 이유 : new를 쓰면 이번달의 로컬 월을 정확하게 받아온다. //new를 쓰지 않았을때 이번달을 받아오려면 +1을 해줘야한다. //왜냐면 getMonth()는 0~11을 반환하기 때문 var lastDate = new Date(today.getFullYear(), today.getMonth() + 1, 0); //이번 달의 마지막 날 //new를 써주면 정확한 월을 가져옴, getMonth()+1을 해주면 다음달로 넘어가는데 //day를 1부터 시작하는게 아니라 0부터 시작하기 때문에 //대로 된 다음달 시작일(1일)은 못가져오고 1 전인 0, 즉 전달 마지막일 을 가져오게 된다 var tbCalendar = document.getElementById("calendar"); //날짜를 찍을 테이블 변수 만듬, 일 까지 다 찍힘 var tbCalendarYM = document.getElementById("tbCalendarYM"); //테이블에 정확한 날짜 찍는 변수 //innerHTML : js 언어를 HTML의 권장 표준 언어로 바꾼다 //new를 찍지 않아서 month는 +1을 더해줘야 한다. tbCalendarYM.innerHTML = today.getFullYear() + "년 " + (today.getMonth() + 1) + "월"; /*while은 이번달이 끝나면 다음달로 넘겨주는 역할*/ while (tbCalendar.rows.length > 2) { //열을 지워줌 //기본 열 크기는 body 부분에서 2로 고정되어 있다. tbCalendar.deleteRow(tbCalendar.rows.length - 1); //테이블의 tr 갯수 만큼의 열 묶음은 -1칸 해줘야지 //30일 이후로 담을달에 순서대로 열이 계속 이어진다. } var row = null; row = tbCalendar.insertRow(); //테이블에 새로운 열 삽입//즉, 초기화 var cnt = 0;// count, 셀의 갯수를 세어주는 역할 // 1일이 시작되는 칸을 맞추어 줌 for (i = 0; i < doMonth.getDay(); i++) { /*이번달의 day만큼 돌림*/ cell = row.insertCell();//열 한칸한칸 계속 만들어주는 역할 cnt = cnt + 1;//열의 갯수를 계속 다음으로 위치하게 해주는 역할 } /*달력 출력*/ for (i = 1; i <= lastDate.getDate(); i++) { //1일부터 마지막 일까지 돌림 cell = row.insertCell();//열 한칸한칸 계속 만들어주는 역할 cell.innerHTML = i;//셀을 1부터 마지막 day까지 HTML 문법에 넣어줌 cnt = cnt + 1;//열의 갯수를 계속 다음으로 위치하게 해주는 역할 if (cnt % 7 == 1) {/*일요일 계산*/ //1주일이 7일 이므로 일요일 구하기 //월화수목금토일을 7로 나눴을때 나머지가 1이면 cnt가 1번째에 위치함을 의미한다 cell.innerHTML = "<font color=#F79DC2>" + i //1번째의 cell에만 색칠 } if (cnt % 7 == 0) {/* 1주일이 7일 이므로 토요일 구하기*/ //월화수목금토일을 7로 나눴을때 나머지가 0이면 cnt가 7번째에 위치함을 의미한다 cell.innerHTML = "<font color=skyblue>" + i //7번째의 cell에만 색칠 row = calendar.insertRow(); //토요일 다음에 올 셀을 추가 } /*오늘의 날짜에 노란색 칠하기*/ if (today.getFullYear() == date.getFullYear() && today.getMonth() == date.getMonth() && i == date.getDate()) { //달력에 있는 년,달과 내 컴퓨터의 로컬 년,달이 같고, 일이 오늘의 일과 같으면 cell.bgColor = "#FAF58C";//셀의 배경색을 노랑으로 } } } </script> </head> <body> <div class="wrap"> <div class="jumbotron"> <h1 class="display-4">코시국에 운동하기!</h1> <p class="lead">코시국에 집콕하여 살이 늘어난분들에게 운동방법을 소개합니다.</p> <br> <button onclick="openClose()" id="btn-post-box" type="button" class="btn btn-primary">캘린더 닫기</button> <br> <hr class="my-4"> </div> <div id="post-box"> <h3 align="center">캘린더</h3> <table id="calendar" border="3" align="center" style="border-color:#3333FF "> <tr><!-- label은 마우스로 클릭을 편하게 해줌 --> <td><label onclick="prevCalendar()"><</label></td> <td align="center" id="tbCalendarYM" colspan="5"> yyyy년 m월 </td> <td><label onclick="nextCalendar()">> </label></td> </tr> <tr> <td align="center"><font color="#F79DC2">일</td> <td align="center">월</td> <td align="center">화</td> <td align="center">수</td> <td align="center">목</td> <td align="center">금</td> <td align="center"><font color="skyblue">토</td> </tr> </table> <script language="javascript" type="text/javascript"> buildCalendar();// </script> </div> <div class="check"> <div class="infor-box"> <h2 class="smtitle">비만도 계산</h2> <div class="input-group mb-3"> <span class="input-group-text" id="inputGroup-sizing-default">키</span> <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default"> </div> <div class="input-group mb-3"> <span class="input-group-text" id="inputGroup-sizing-default">몸무게</span> <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default"> </div> <button type="button" class="btn btn-secondary">조회</button> <br> </p> </div> </div> <div class="result_total">결과,식단,운동제안</div> </div> </body> </html>'개발일지' 카테고리의 다른 글
11일 메이킹 챌린지 - 아홉수(5일차) (0) 2021.07.24 11일 메이킹 챌린지 - 아홉수 (4일차) (0) 2021.07.22 웹 개발 종합반 - 5주차 (0) 2021.07.21 11일 메이킹 챌린지 - 아홉수 (2일차) (0) 2021.07.20 11일 메이킹 챌린지- 아홉수 (1일차) (0) 2021.07.19