목차 - 링크
출산 예정일 & 임신주수 계산기 링크 : https://forhappywomen.github.io/nodejs_test_steem/index.html
안녕하세요.
요즘 무더위에 치져 글을 띄엄띄엄 쓰고 있는 @forhappywomen 입니다.
오늘은 산부인과와 다소 거리가 먼 내용을 써볼까 합니다.
사회 생활을 하거나 진료를 볼 때, 컴퓨터에 대해서 아는게 하나도 없음을 자주 느끼곤 했습니다. 컴퓨터라고는 엑셀과 파워포인트에 그림과 숫자 넣는 정도밖에 하지 못하는 전 늘 답답했었죠. 특히 최근 1년간 알게 된 몇몇 분의 도움으로 새로운 세계에 눈을 뜨게 되고 컴퓨터 언어에 관심을 가지게 되면서. (@bramd, @junn, @nhj12311, @segypark, @verygoodsurgeon 님 감사합니다.) 배움에 대한 갈증은 더욱 더 심해졌습니다.
어떻게 시작해야할지 몰라 뒤로 미루고 있던 저는 『생활코딩』이라는 신문물을 접하곤 스폰지에 물흡수하듯 강의를 쭉 들었습니다. 개발자분들의 대화를 조금이라도 이해하는데 도움이 될까 싶어서 시간이 될때마다 이고잉님이 하시는 생활코딩 (https://Opentutorials.org)에서 html, 자바스크립트, CSS 를 공부해보았습니다.
하지만 수업을 듣는 것과 만드는 것은 전혀 다른 이야기였습니다. 수 많은 내용중에 겨우 1+1 계산정도의 자바스크립트와 html 을 배웠기 때문에 모바일 앱, 웹앱, 스팀샵, 스팀앱 과 같은 경지는 절대 엄두도 못내고 포기했었습니다.
“됐어~. 직업도 아닌데, 의사소통할 정도만 배우면 됐지. 너가 만들 필요가 없는 일이야~”
라고 스스로를 위로하고 있던 중 『생활코딩』 강의 중 《보편적이지 않은 코딩》에 내용에 대해서 들었습니다.
보편적이지 않은 코딩 (2017-08-05 12:12:48 | 공개 ) 출처: https://opentutorials.org/course/2897
…
소프트웨어 제작을 마음 먹으면 보편적인 것을 만들려고 합니다. 이건 좀 비현실적인 것 같습니다. 자기가 쓸려고 만든 소프트웨어는 복잡하지 않습니다. 자기가 조심해서 쓰면 되기 때문이죠. 남을 위해서 만든 소프트웨어는 복잡합니다. 이런 말이 있습니다.
“고양이가 키보드 위로 지나가도 문제 없도록 코딩하라”
고양이에게도 안전한 것을 만들기 위해서는 많은 것을 해야 합니다. 본질은 작은데 본질이 현실에서 존재하기 위해서는 본질보다 훨씬 거대한 것이 필요합니다. 이런 복잡성을 입문자가 감당하는 것은 어려운 일이 아닐까요?
…
자기가 쓰려고 만든 것에서 충분한 보편성을 확인했을 때 그것을 타인도 사용할 수 있도록 조심스럽게 확장하는 것이 자연스러운 것 같습니다. 보편적인 것에 대한 관심은 자연스러운 것이지만 처음부터 보편적일 수는 없는 것 같습니다. 개별성이 모이면 일정한 패턴이 생기고, 그 패턴에서 보편성을 발견해서 모두를 위한 것을 추구하는 것이 좀 더 자연스러워 보입니다.
위 글을 읽고, 강의를 듣고선 내가 쓸 프로그램을 만들어야겠다고 결심했습니다. 어렵지도 않고, 복잡하지도 않고, 디자인도 고려치 않고 UI/UX를 고려치 않는 프로그램을 날 위해 만들어야겠다. 라고 결심한 나는 어떤 프로그램을 만들지 생각하다보니, 외래에서 늘 사용하는 프로그램이 떠올랐습니다. 그것은 바로 임신예정일 계산기 및 임신주수 계산기였습니다.
- 출산 예정일 & 임신주수 계산기 링크 : https://forhappywomen.github.io/nodejs_test_steem/index.html
1. 마지막 생리시작일을 이용하여 예정일 확인하기
위의 링크를 이용해서 들어가면 아이폰 기준으로 아래 화면이 나오는데, 마지막 생리 시작일을 입력 혹은 달력에서 선택하고, 생리주기를 입력한 후 계산버튼을 누르면 예정일이 나오게 됩니다. (Wow!!)
2. 예정일은 알고 있는데, 그때가 몇 주인지 궁금해!
출산 예정일 & 임신주수 계산기 링크 : https://forhappywomen.github.io/nodejs_test_steem/index.html
같은 사이트를 이용합니다. 예정일에 본인의 예정일을 입력하고, 확인하고 싶은 날짜를 직접 입력합니다. (달력 입력하는 거 아니에요~ UI/UX를 고려치 않은 저를 위한 보편적이지 않은 코딩입니다.)
예정일과 확인하고 싶은 날짜를 입력하고 ‘주수확인 버튼’을 누르면!!! 그 때의 임신주수값이 나오게 됩니다!! (Wow!!)
3. 이게 끝입니다… ㅋㅋ;
다행히도 저에게 더 이상 필요한 내용이 없어요. 원형탈모를 유발할 정도의 어려운 내용은 없었지만, 소문자 대문자 입력만 틀려도 작동이 안되는 프로그램을 처음 접하면서 너무 고생했네요 ㅠ_ ㅠ 개발자님들 리스펙트!!!
언젠가 또 저에게 필요한 프로그램이 생기면 또 만들어보겠습니다.
『나의 보편적이지 않은 코딩- 출산예정일&임신주수 계산기』은 이것으로 마치겠습니다.
ps> 코드는… 왠지 넣어보고 싶어서 넣었어요 ㅋㅋ 개발자분들이 코드를 넣어놓으시면 왠지 있어보이더라구요 ㅋㅋㅋ 그리고 혹시 보시고 고쳐주시는 천사가 있으실까 싶어서… 넣어둡니다. ㅋㅋ;
<!DOCTYPE html>
<html>
<head>
<title>달력</title>
<style type="text/css">
td{
width: 2em;
height: 2em;
text-align: center;
font-size: 2rem;
font-family: 굴림;
border:2px border-color:#3333FF;
border-radius: 8px;/*모서리 둥글게*/
}
body { font-size : 3em;
}
input {
width : 40%;
height : 2em;
font-size: 1em;
}
</style>
<script type="text/javascript">
var today = new Date();
var date = new Date();
function prevCalendar() {
today = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
buildCalendar();
};
function nextCalendar() {
today = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
buildCalendar();
};
function buildCalendar(){
var doMonth = new Date(today.getFullYear(),today.getMonth(),1);
var lastDate = new Date(today.getFullYear(),today.getMonth()+1,0);
var tbCalendar = document.getElementById("calendar");
var tbCalendarYM = document.getElementById("tbCalendarYM");
tbCalendarYM.innerHTML = today.getFullYear() + "년 " + (today.getMonth() + 1) + "월";
while (tbCalendar.rows.length > 2) {
tbCalendar.deleteRow(tbCalendar.rows.length-1);
//테이블의 tr 갯수 만큼의 열 묶음은 -1칸 해줘야지
//30일 이후로 담을달에 순서대로 열이 계속 이어진다.
};
var row = null;
row = tbCalendar.insertRow();
//테이블에 새로운 열 삽입//즉, 초기화
var cnt = 0;
for (i=0; i<doMonth.getDay(); i++) {
cell = row.insertCell();//열 한칸한칸 계속 만들어주는 역할
cnt = cnt + 1;//열의 갯수를 계속 다음으로 위치하게 해주는 역할
};
/*달력 출력*/
for (i=1; i<=lastDate.getDate(); i++) {
cell = row.insertCell();
cell.innerHTML = "<label id = \"select"+i+"\" onclick=\"selectDay("+i+")\">"+ i + "</label>";
cnt = cnt + 1;
if (cnt % 7 == 1) {cell.innerHTML = "<label id = \"select"+i+"\" onclick=\"selectDay("+i+")\">"+"<font color=#F79DC2>" + i + "</label>"};
if (cnt%7 == 0){
cell.innerHTML = "<label id = \"select"+i+"\" onclick=\"selectDay("+i+")\">" + "<font color=skyblue>" + i + "</label>";
row = calendar.insertRow();
};
/*오늘의 날짜에 노란색 칠하기*/
if (today.getFullYear() == date.getFullYear()
&& today.getMonth() == date.getMonth()
&& i == date.getDate()) {
cell.bgColor = "#FAF58C";
};
};
};
function selectDay(selectedDate){
document.getElementById("select"+selectedDate).style.color = "green";
var mm = today.getMonth() + 1 ;
var dd = selectedDate ;
var yy = today.getFullYear();
if(dd<10) {dd = '0'+dd};
if(mm<10) {mm = '0'+mm};
document.getElementById("lmp").value = yy + '-'+ mm +'-'+ dd;
};
//색깔 제거하는 기능이 왜 안될까...
function lmpcalc() {
var myDate = new Date();
var today = new Date();
var lmpDate = document.getElementById("lmp").valueAsDate;
var lmpMonth = lmpDate.getMonth() + 1;
var lmpDay = lmpDate.getDate() ;
var lmpYear = lmpDate.getFullYear();
var mensInterval = parseInt(document.getElementById("mens").value);
//edcDate
var edcDate = new Date(lmpDate);
edcDate.setDate(edcDate.getDate()+ 280 + mensInterval-28);
var edcMonth = edcDate.getMonth() + 1;
var edcDay = edcDate.getDate() ;
var edcYear = edcDate.getFullYear();
if(edcDay<10) {edcDay = '0'+edcDay};
if(edcMonth<10) {edcMonth = '0'+edcMonth};
document.getElementById("edcDate").value = edcYear + '-'+ edcMonth +'-'+ edcDay;
document.getElementById("gaResult").innerHTML = "";
};
function gacalc(){
};
// function todaycalc(){
// var today = new Date();
// var mm = today.getMonth() +1 ;
// var dd = today.getDate() ;
// var yy = today.getFullYear();
// if(dd<10) {dd = '0'+dd};
// if(mm<10) {mm = '0'+mm};
// document.getElementById("checkDate").value = yy + '-'+ mm +'-'+ dd;
// };
function gacalc(){
var cdMs = document.getElementById("checkDate").valueAsDate;
var edMs = document.getElementById("edcDate").valueAsDate;
var gapMs = (edMs.getTime()-cdMs.getTime())/1000/60/60/24;
var gaWeek = parseInt((280-gapMs)/7);
var gaDay = parseInt((280-gapMs)%7);
document.getElementById("gaResult").innerHTML = gaWeek +'주'+ gaDay + '일';
};
</script>
</head>
<body>
<p>
<label for="party">마지막 생리 시작일</label>
직접입력<input type="date" id="lmp" name = "lmpDate" value = "" required></br>
<script> var today = new Date();
var mm = today.getMonth() +1 ;
var dd = today.getDate() ;
var yy = today.getFullYear();
if(dd<10) {dd = '0'+dd};
if(mm<10) {mm = '0'+mm};
document.getElementById("lmp").value = yy + '-'+ mm +'-'+ dd;
</script>
</p>
<table id="calendar" border="3" style="border-color:black" width = "80%">
<tr>
<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>
<form name="lmpform">
<div>
<label for="party">생리주기</label>
<input type="number" placeholder="21~40일 사이로 입력" id = "mens" name = "mensInterval" value = "28" min = "21" max = "40" required></br>
<input type="button" value="계산" onclick ='lmpcalc();'></br>
<label for="party">예정일</label>
<input type="date" id="edcDate" name = "edcDate" value ="" required></br>
<label for="party">확인하고 싶은 날짜</label>
<input type="date" id="checkDate" name = "checkDate" value ="" required></br>
<!-- <input class ="smbx" type="button" value="오늘" onclick ="todaycalc();"> -->
<script> var today = new Date();
var mm = today.getMonth() +1 ;
var dd = today.getDate() ;
var yy = today.getFullYear();
if(dd<10) {dd = '0'+dd};
if(mm<10) {mm = '0'+mm};
document.getElementById("checkDate").value = yy + '-'+ mm +'-'+ dd;
</script>
<input type="button" value="주수확인" onclick ="gacalc();"></br>
</div>
</form>
<div>
<!-- <a id="lmpResult">마지막생리시작일:입력해주세요</a></br> -->
임신주수 : <a id="gaResult"></a></br>
</div>
</body>
</html>
</html>
