teamPARK / holiday-counter-recommend-activity

Go to a project
Toggle navigation Toggle navigation pinning
박종현
3357b05e 1 parent 743ce872

Update activity - rough version

Inline Side-by-side
Showing 2 changed files with 142 additions and 29 deletions
...@@ -40,7 +40,7 @@ function getTodayDate() { ...@@ -40,7 +40,7 @@ function getTodayDate() {
40 var month = ("0" + (today.getMonth() + 1)).slice(-2); 40 var month = ("0" + (today.getMonth() + 1)).slice(-2);
41 var day = ("0" + today.getDate()).slice(-2); 41 var day = ("0" + today.getDate()).slice(-2);
42 var dateString = year + "-" + month + "-" + day; 42 var dateString = year + "-" + month + "-" + day;
43 - return "2022-06-06"; // 테스트용 날짜를 입력하세요. 테스트가 끝나면 주석처리 하세요. ex) 2022-09-12, 2022-09-15, 2022-10-04 43 + return "2023-01-21"; // 테스트용 날짜를 입력하세요. 테스트가 끝나면 주석처리 하세요. ex) 2022-09-12, 2022-09-15, 2022-10-04
44 // return dateString; 44 // return dateString;
45 } 45 }
46 46
......
1 <!-- data.ejs --> 1 <!-- data.ejs -->
2 <!DOCTYPE html> 2 <!DOCTYPE html>
3 <html> 3 <html>
4 +
4 <head> 5 <head>
5 <meta charset="UTF-8"> 6 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Check the Holiday</title> 9 <title>Check the Holiday</title>
9 - <link rel="stylesheet" href="../public/css/main.css" type="text/css"> <!--style.css 파일 적용.--> 10 + <link rel="stylesheet" href="../public/css/main.css" type="text/css">
11 + <!--style.css 파일 적용.-->
10 <link rel="preconnect" href="https://fonts.googleapis.com"> 12 <link rel="preconnect" href="https://fonts.googleapis.com">
11 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 13 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 <link href="https://fonts.googleapis.com/css2?family=Tiro+Devanagari+Marathi&display=swap" rel="stylesheet"> 14 <link href="https://fonts.googleapis.com/css2?family=Tiro+Devanagari+Marathi&display=swap" rel="stylesheet">
13 <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet"> 15 <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
14 </head> 16 </head>
15 <center> 17 <center>
16 -<body> 18 +
19 + <body>
17 <div id="title">When is Next Holiday?</div> 20 <div id="title">When is Next Holiday?</div>
18 <br><br> 21 <br><br>
19 <div class="wrapper"> 22 <div class="wrapper">
...@@ -21,9 +24,19 @@ ...@@ -21,9 +24,19 @@
21 <p class="dday"> 24 <p class="dday">
22 <span> 25 <span>
23 <h2>오늘로부터 가장 가까운 휴일은</h2> 26 <h2>오늘로부터 가장 가까운 휴일은</h2>
24 - <h1><%= data[0] %></h1> 27 + <h1>
25 - <h1 style="font-size: 80px;"> D - <%= data[2] %></h1> 28 + <%= data[0] %>
26 - <h2><%= data[1][0] %><%= data[1][1] %><%= data[1][2] %><%= data[1][3] %>년 <%= data[1][4] %><%= data[1][5] %>월 <%= data[1][6] %><%= data[1][7] %>일</h2> 29 + </h1>
30 + <h1 style="font-size: 80px;"> D - <%= data[2] %>
31 + </h1>
32 + <h2>
33 + <%= data[1][0] %>
34 + <%= data[1][1] %>
35 + <%= data[1][2] %>
36 + <%= data[1][3] %>년 <%= data[1][4] %>
37 + <%= data[1][5] %>월 <%= data[1][6] %>
38 + <%= data[1][7] %>일
39 + </h2>
27 <h2> </h2> 40 <h2> </h2>
28 </span> 41 </span>
29 </p> 42 </p>
...@@ -39,9 +52,11 @@ ...@@ -39,9 +52,11 @@
39 <h2>어느새 <%= data[0] %>이(가) <font color="pink">열흘</font>도 남지 않았습니다! </h2> 52 <h2>어느새 <%= data[0] %>이(가) <font color="pink">열흘</font>도 남지 않았습니다! </h2>
40 53
41 <% } else if (data[2] << 31) { %> 54 <% } else if (data[2] << 31) { %>
42 - <h2><%= data[0] %>이(가) <font color="pink">한 달</font>도 남지 않았습니다! </h2> 55 + <h2>
56 + <%= data[0] %>이(가) <font color="pink">한 달</font>도 남지 않았습니다!
57 + </h2>
43 58
44 - <% } else if (data[2] == 0) { %> 59 + <% } else if (data[2]==0) { %>
45 <h2>오늘은 즐거운 공휴일!</h2> 60 <h2>오늘은 즐거운 공휴일!</h2>
46 61
47 <% } else { %> 62 <% } else { %>
...@@ -56,7 +71,94 @@ ...@@ -56,7 +71,94 @@
56 <!--recommend activity--> 71 <!--recommend activity-->
57 <h2> [<%= data[0] %>]에 추천하는 활동 </h2> 72 <h2> [<%= data[0] %>]에 추천하는 활동 </h2>
58 <div> 73 <div>
59 - <% if (data[1] == '20220601') { %> 74 + <% if (data[1]=='20230101' ) { %>
75 + <div id="detail">
76 + <br>
77 + <h2>새해의 첫날이며, 영어로는 New Years Day라고 한다. </h2>
78 + <h2>1. 제야의 종(보신각) :
79 + 보신각은 서울 종로구이 취치에 있는 종각으로 서울보신각종을 걸어 둘 수 있게 만든 것이다.
80 + 이 종은 1986년에 제작된 '서울대종'이며, 새해 첫날의 시작을 알리는 용도로 사용된다. </h2>
81 + <h2>2. 해돋이 :
82 + 해는 매일 뜨지만 신년의 첫 해는 특별하게 느껴진다. 새해 첫날에 해돋이를 보면서 소원을
83 + 빌어보는 건 어떨까?
84 +
85 + </h2><br>
86 + </div>
87 + <div class="frame">
88 + <button class="custom-btn btn-12" href=""><span>click!</span><span>보신각 타종신청</span></button>
89 + </div>
90 + <div class="frame">
91 + <button class="custom-btn btn-12" href=""><span>click!</span><span>일출시간</span></button>
92 + </div>
93 + <% } else if (data[1]=='20230121' ) { %>
94 + <div id="detail">
95 + <br>
96 + <h2>설날은 추석과 함께 대표적인 한국의 명절중 하나이다. 음력으로 1월1일이며
97 + 설이라고도 불린다. 현재 한국은 양력 1월 1일은 새해로 기념하고, 친척들을 만다는
98 + 전통 명절 기념은 음력 1월 1일에 한다. </h2>
99 + <h2>가족들과 함께 즐거운 설을 보내보자! </h2>
100 + <br>
101 + </div>
102 + <% } else if (data[1]=='20230301' ) { %>
103 + <div id="detail">
104 + <br>
105 + <h2>삼일절은 3·1 운동을 기념하기 위해 제정된 국경일이다. 1920년 임시 정부가 만들어진 이후
106 + 국경일로 지정되어 기념되기 시작하였다. </h2>
107 + <h2>1. 서대문형무소 역사관 :
108 + 서대문구에 위치한 역사관으로 일본이 한국의 독립운동가들을 가두기 위해 만든 감옥이다.
109 + 서대문형무소 역사관에는 이러한 역사의 흔적이 그대로 남아있다. </h2>
110 + <h2>2. 독립기념관 :
111 + 충남 천안시에 위치해 있으며 삼일절에 다양한 행사를 한다. </h2><br>
112 + </div>
113 + <div class="frame">
114 + <button class="custom-btn btn-12" href=""><span>click!</span><span>내 주변z 투표소
115 + 찾기!</span></button>
116 + </div>
117 + <% } else if (data[1]=='20230505' ) { %>
118 + <div id="detail">
119 + <br>
120 + <h2>어린이날은 미래 사회의 주인공이 될 아이들이 예쁘게 자라날 수 있도록
121 + 제정된 날로 우리나라 뿐만 아니라 다른 나라에서도 기념일로 정하고 있다.
122 + </h2>
123 + <h2>1. 롯데월드 :
124 + 서울의 대표적 명소로 서울에 거주중이라면 편하게 갈 수 있는 곳이다. 아이들이
125 + 좋아하는 테마파크가 존재한다. </h2>
126 + <h2>2. 서울 어린이 대공원 :
127 + 서울에서 제일 큰 놀이터라는 별명을 가진 공원이다. 놀이동산 뿐만 아니라 동물원까지
128 + 있어 사실상 아이들이 놀기 딱 좋은 놀이시설이다. </h2>
129 + <br>
130 + </div>
131 + <div class="frame">
132 + <button class="custom-btn btn-12" href=""><span>click!</span><span>롯데월드</span></button>
133 + </div>
134 + <div class="frame">
135 + <button class="custom-btn btn-12" href=""><span>click!</span><span>서울 어린이
136 + 대공원</span></button>
137 + </div>
138 + <% } else if (data[1]=='20230527' ) { %>
139 + <div id="detail">
140 + <br>
141 + <h2>석가모니를 기념하기 위해 제정된 법정 공휴일이다. 음력 4월 8일을 기반으로 한다. </h2>
142 + <h2>1. 봉은사
143 + 봉은사는 서울 한가운데에 있을 뿐 아니라 역과의 거리도 가까워 부담없이
144 + 방문할 수 있는 사찰 중 하나이다. 삼성동 근처에 있으며 신라 시대에 창건되었다.
145 + 부처님오신날에는 연등 축제 등 행사를 연다. </h2>
146 + <h2>2. 조계사
147 + 조계사 또한 서울 시내에 있는 사찰이다. 비록 규모는 아담하지만 우리나라의 최대
148 + 불교 종단의 본사이며 크고 아름다운 대웅전이 있다. 조계사 주변에는 불교 서적을
149 + 구할수 잇는 서점, 템플스테이, 불교용품 가게 등 불표와 관련된 것들을 취급하는 곳이 많다. </h2>
150 + <br>
151 + </div>
152 + <div class="frame">
153 + <button class="custom-btn btn-12"
154 + href=""><span>click!</span><span>봉은사</span></button>
155 + </div>
156 + <div class="frame">
157 + <button class="custom-btn btn-12"
158 + href=""><span>click!</span><span>조계사</span></button>
159 + </div>
160 +
161 + <% } else if (data[1]=='20220601' ) { %>
60 <div id="detail"> 162 <div id="detail">
61 <br> 163 <br>
62 <h2>지방선거로 지정된 날로 대한민국에서 가장 중요한 날 중 하나이다. </h2> 164 <h2>지방선거로 지정된 날로 대한민국에서 가장 중요한 날 중 하나이다. </h2>
...@@ -64,10 +166,11 @@ ...@@ -64,10 +166,11 @@
64 <br> 166 <br>
65 </div> 167 </div>
66 <div class="frame"> 168 <div class="frame">
67 - <button class="custom-btn btn-12" href=""><span>click!</span><span>내 주변 투표소 찾기!</span></button> 169 + <button class="custom-btn btn-12" href=""><span>click!</span><span>내 주변z 투표소
170 + 찾기!</span></button>
68 </div> 171 </div>
69 172
70 - <% } else if (data[1] == '20220606') { %> 173 + <% } else if (data[1]=='20220606' ) { %>
71 <div id="detail"> 174 <div id="detail">
72 <br> 175 <br>
73 <h2>현충일은 나라를 위해 희생한 순국선열과 장병들을 기리기 위해 지정된 176 <h2>현충일은 나라를 위해 희생한 순국선열과 장병들을 기리기 위해 지정된
...@@ -85,10 +188,11 @@ ...@@ -85,10 +188,11 @@
85 <br> 188 <br>
86 </div> 189 </div>
87 <div class="frame"> 190 <div class="frame">
88 - <button class="custom-btn btn-12" href=""><span>click!</span><span>button</span></button> 191 + <button class="custom-btn btn-12"
192 + href=""><span>click!</span><span>button</span></button>
89 </div> 193 </div>
90 194
91 - <% } else if (data[1] == '20220815') { %> 195 + <% } else if (data[1]=='20220815' ) { %>
92 <div id="detail"> 196 <div id="detail">
93 <br> 197 <br>
94 <h2>광복절은 대한민국이 일본으로부터 해방된 것을 기념하는 날이다</h2> 198 <h2>광복절은 대한민국이 일본으로부터 해방된 것을 기념하는 날이다</h2>
...@@ -104,10 +208,11 @@ ...@@ -104,10 +208,11 @@
104 <br> 208 <br>
105 </div> 209 </div>
106 <div class="frame"> 210 <div class="frame">
107 - <button class="custom-btn btn-12" href=""><span>click!</span><span>button</span></button> 211 + <button class="custom-btn btn-12"
212 + href=""><span>click!</span><span>button</span></button>
108 </div> 213 </div>
109 214
110 - <% } else if (data[1] == '20220909') { %> 215 + <% } else if (data[1]=='20220909' ) { %>
111 <div id="detail"> 216 <div id="detail">
112 <br> 217 <br>
113 <h2>추석은 음력 8월 15일에 치르는 행사이고, 설날과 함께 한국의 주요 연휴이다. </h2> 218 <h2>추석은 음력 8월 15일에 치르는 행사이고, 설날과 함께 한국의 주요 연휴이다. </h2>
...@@ -115,10 +220,11 @@ ...@@ -115,10 +220,11 @@
115 <br> 220 <br>
116 </div> 221 </div>
117 <div class="frame"> 222 <div class="frame">
118 - <button class="custom-btn btn-12" href=""><span>click!</span><span>button</span></button> 223 + <button class="custom-btn btn-12"
224 + href=""><span>click!</span><span>button</span></button>
119 </div> 225 </div>
120 226
121 - <% } else if (data[1] == '20221003') { %> 227 + <% } else if (data[1]=='20221003' ) { %>
122 <div id="detail"> 228 <div id="detail">
123 <br> 229 <br>
124 <h2>개천절은 대한민국의 국경일중 하나이며, 단군왕검이 고조선을 세운 것을 기념하는 날이다.</h2> 230 <h2>개천절은 대한민국의 국경일중 하나이며, 단군왕검이 고조선을 세운 것을 기념하는 날이다.</h2>
...@@ -130,25 +236,29 @@ ...@@ -130,25 +236,29 @@
130 <br> 236 <br>
131 </div> 237 </div>
132 <div class="frame"> 238 <div class="frame">
133 - <button class="custom-btn btn-12" href=""><span>click!</span><span>button</span></button> 239 + <button class="custom-btn btn-12"
240 + href=""><span>click!</span><span>button</span></button>
134 </div> 241 </div>
135 242
136 - <% } else if (data[1] == '20221010') { %> 243 + <% } else if (data[1]=='20221010' ) { %>
137 <div id="detail"> 244 <div id="detail">
138 <br> 245 <br>
139 - <h2>개천절은 대한민국의 국경일중 하나이며, 단군왕검이 고조선을 세운 것을 기념하는 날이다.</h2> 246 + <h2>한글날은 세종대왕이 훈민정음을 창제한 것을 기념하기 위해 만들어진 기념일이다. </h2>
140 - <h2>1. 인천 차이나 타운 247 + <h2>1. 서울 시청 일대
141 - '먹방 여행'뿐만 아니라, 역사 투어까지 가능한 곳이다.<br> 우리가 즐겨먹는 짜장면이 바로 인천 248 + 서울 시청 근처에는 다양한 한글날 행사가 열린다.
142 - 차이나타운에서 탄생했으며,<br> 가장 오래된 중국집이 '짜장면박물관'으로 리모델링돼 운영중이다.</h2> 249 + </h2>
143 - <h2>2. 태백 동굴 여행 250 + <h2>2. 광화문 세종대왕 동상
144 - 태백에는 많은 동굴들이 있으며, 당일치기여행으로 갈만한 곳이 많다.</h2> 251 + 세종대황 동상이 있는 광화문 광장 지하에는 세종이야기와 충무공 이야기가 전시되어 있다.
252 + 전시관 안에는 다양한 세종대왕 관련 서적이 자리하고 있다.
253 + </h2>
145 <br> 254 <br>
146 </div> 255 </div>
147 <div class="frame"> 256 <div class="frame">
148 - <button class="custom-btn btn-12" href=""><span>click!</span><span>button!</span></button> 257 + <button class="custom-btn btn-12"
258 + href=""><span>click!</span><span>button!</span></button>
149 </div> 259 </div>
150 260
151 - <% } else if (data[1] == '20221225') { %> 261 + <% } else if (data[1]=='20221225' ) { %>
152 <div id="detail"> 262 <div id="detail">
153 <br> 263 <br>
154 <h2>예수 그리스도의 탄생을 기리는 기념일이다. <br> 264 <h2>예수 그리스도의 탄생을 기리는 기념일이다. <br>
...@@ -163,12 +273,15 @@ ...@@ -163,12 +273,15 @@
163 <br> 273 <br>
164 </div> 274 </div>
165 <div class="frame"> 275 <div class="frame">
166 - <button class="custom-btn btn-12" onclick ="location.href='http://buncheon.k7788.com/index.html?Midx=366&ct_pg=781'"><span>click!</span><span>분천역 산타마을</span></button> 276 + <button class="custom-btn btn-12"
277 + onclick="location.href='http://buncheon.k7788.com/index.html?Midx=366&ct_pg=781'"><span>click!</span><span>분천역
278 + 산타마을</span></button>
167 </div> 279 </div>
168 <% } else { %> 280 <% } else { %>
169 <h2>Just Take some rest!</h2> 281 <h2>Just Take some rest!</h2>
170 <% } %> 282 <% } %>
171 </div> 283 </div>
172 -</body> 284 + </body>
173 </center> 285 </center>
286 +
174 </html> 287 </html>
...\ No newline at end of file ...\ No newline at end of file
......