teamPARK / holiday-counter-recommend-activity

Go to a project
Toggle navigation Toggle navigation pinning
박규리
b9f466dd 1 parent bc7fded5

Move files for html/css/recommend-activity work

Inline Side-by-side
Showing 5 changed files with 682 additions and 0 deletions
1 +node_modules/
2 +package-lock.json
3 +.env
...\ No newline at end of file ...\ No newline at end of file
1 +{
2 + "name": "holiday-counter-recommend-activity",
3 + "version": "1.0.0",
4 + "description": "",
5 + "main": "server.js",
6 + "scripts": {
7 + "test": "echo \"Error: no test specified\" && exit 1",
8 + "start": "node server.js"
9 + },
10 + "repository": {
11 + "type": "git",
12 + "url": "http://khuhub.khu.ac.kr/teamPARK/holiday-counter-recommand-activity.git"
13 + },
14 + "author": "",
15 + "license": "ISC",
16 + "dependencies": {
17 + "dotenv": "^16.0.1",
18 + "ejs": "^3.1.8",
19 + "express": "^4.18.1",
20 + "request": "^2.88.2",
21 + "xml2js": "^0.4.23"
22 + }
23 +}
1 +.circle {
2 + margin: 0 auto;
3 + width: 500px;
4 + height: 500px;
5 + border: 15px solid rgb(163, 151, 198);
6 + border-radius: 50%;
7 + line-height: 3em;
8 +}
9 +.dday {
10 + padding: 50px 0;
11 +}
12 +
13 +.wrapper {
14 + margin: 0 auto;
15 + padding: 30px;
16 + max-width: 1170px;
17 +}
18 +h1 {
19 + font-size: 50px;
20 + color : tomato;
21 + font-family: 'Gowun Dodum', sans-serif;
22 + margin-bottom: 10px;
23 +}
24 +h2 {
25 + color :white;
26 + font-weight: lighter;
27 + font-family: 'Gowun Dodum', sans-serif;
28 +}
29 +
30 +#title {
31 + color: rgb(191, 185, 211);
32 + font-size: 70px;
33 + font-family: 'Tiro Devanagari Marathi', serif;
34 + font-weight: 600;
35 + text-shadow: 4px 2px 2px rgba(178, 104, 180, 0.61);
36 + letter-spacing: 0.05em;
37 +}
38 +#comment {
39 + width: fit-content;
40 + background-color: rgba(190, 125, 87, 0.39);
41 + border-radius: 40px 80px / 80px 40px;
42 +
43 +}
44 +#detail {
45 + width:1000px;
46 + height:fit-content;
47 + border-radius: 40px 80px / 80px 40px;
48 + background-color: rgba(190, 87, 168, 0.39);
49 +}
50 +body {
51 + margin-top: 100px;
52 + margin-bottom: 100px;
53 + margin-left: 50px;
54 + margin-right: 50px;
55 + background-color: rgb(78, 76, 76);
56 +}
57 +#background{
58 + width : 80%;
59 + height : 80%;
60 + border: 15px solid rgb(229, 220, 231);
61 + border-radius : 30px 30px / 30px 30px;
62 +
63 +}
64 +.box {
65 + margin : 50px;
66 + padding : 20px;
67 + border : 1px solid rgb(248, 239, 249);
68 + border-radius : 20px;
69 + background-color: rgb(255, 255, 255);
70 +}
71 +
72 +/* button style*/
73 +.frame {
74 + width: 90%;
75 + margin: 40px auto;
76 + text-align: center;
77 +}
78 +button {
79 + margin: 20px;
80 +}
81 +.custom-btn {
82 + width: 130px;
83 + height: 40px;
84 + color: #fff;
85 + border-radius: 5px;
86 + padding: 10px 25px;
87 + font-family: 'Lato', sans-serif;
88 + font-weight: 500;
89 + background: transparent;
90 + cursor: pointer;
91 + transition: all 0.3s ease;
92 + position: relative;
93 + display: inline-block;
94 + box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
95 + 7px 7px 20px 0px rgba(0,0,0,.1),
96 + 4px 4px 5px 0px rgba(0,0,0,.1);
97 + outline: none;
98 +}
99 +.btn-12{
100 + position: relative;
101 + right: 20px;
102 + bottom: 20px;
103 + border:none;
104 + box-shadow: none;
105 + width: 130px;
106 + height: 40px;
107 + line-height: 42px;
108 + -webkit-perspective: 230px;
109 + perspective: 230px;
110 +}
111 +.btn-12 span {
112 + background: rgb(0,172,238);
113 +background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
114 + display: block;
115 + position: absolute;
116 + width: 130px;
117 + height: 40px;
118 + box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
119 + 7px 7px 20px 0px rgba(0,0,0,.1),
120 + 4px 4px 5px 0px rgba(0,0,0,.1);
121 + border-radius: 5px;
122 + margin:0;
123 + text-align: center;
124 + -webkit-box-sizing: border-box;
125 + -moz-box-sizing: border-box;
126 + box-sizing: border-box;
127 + -webkit-transition: all .3s;
128 + transition: all .3s;
129 +}
130 +.btn-12 span:nth-child(1) {
131 + box-shadow:
132 + -7px -7px 20px 0px #fff9,
133 + -4px -4px 5px 0px #fff9,
134 + 7px 7px 20px 0px #0002,
135 + 4px 4px 5px 0px #0001;
136 + -webkit-transform: rotateX(90deg);
137 + -moz-transform: rotateX(90deg);
138 + transform: rotateX(90deg);
139 + -webkit-transform-origin: 50% 50% -20px;
140 + -moz-transform-origin: 50% 50% -20px;
141 + transform-origin: 50% 50% -20px;
142 +}
143 +.btn-12 span:nth-child(2) {
144 + -webkit-transform: rotateX(0deg);
145 + -moz-transform: rotateX(0deg);
146 + transform: rotateX(0deg);
147 + -webkit-transform-origin: 50% 50% -20px;
148 + -moz-transform-origin: 50% 50% -20px;
149 + transform-origin: 50% 50% -20px;
150 +}
151 +.btn-12:hover span:nth-child(1) {
152 + box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
153 + 7px 7px 20px 0px rgba(0,0,0,.1),
154 + 4px 4px 5px 0px rgba(0,0,0,.1);
155 + -webkit-transform: rotateX(0deg);
156 + -moz-transform: rotateX(0deg);
157 + transform: rotateX(0deg);
158 +}
159 +.btn-12:hover span:nth-child(2) {
160 + box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
161 + 7px 7px 20px 0px rgba(0,0,0,.1),
162 + 4px 4px 5px 0px rgba(0,0,0,.1);
163 + color: transparent;
164 + -webkit-transform: rotateX(-90deg);
165 + -moz-transform: rotateX(-90deg);
166 + transform: rotateX(-90deg);
167 +}
...\ No newline at end of file ...\ No newline at end of file
1 +const express = require("express");
2 +const app = express();
3 +const request = require("request");
4 +const xml2js = require("xml2js");
5 +const static = require("serve-static");
6 +require("dotenv").config();
7 +
8 +// Modify the values as needed
9 +var year = "2022";
10 +var month = "09";
11 +var operation = "getRestDeInfo";
12 +
13 +// Do not modify the values
14 +var SERVEICE_KEY = process.env.API_KEY;
15 +var url = "http://apis.data.go.kr/B090041/openapi/service/SpcdeInfoService/";
16 +var queryParams = "?" + "solYear" + "=" + year;
17 +queryParams += "&" + "solMonth" + "=" + month;
18 +queryParams += "&" + "ServiceKey" + "=" + SERVEICE_KEY;
19 +let requestUrl = url + operation + queryParams;
20 +
21 +// Empty variables
22 +var text = "";
23 +var dateName = [];
24 +var locdate = [];
25 +var tempArr = [];
26 +
27 +// To run EJS engine
28 +app.set("views", __dirname + "/views");
29 +app.set("view engine", "ejs");
30 +app.use(static(__dirname));
31 +
32 +// To get today date by using Date
33 +function getTodayDate() {
34 + var today = new Date();
35 + var year = today.getFullYear();
36 + var month = ("0" + (today.getMonth() + 1)).slice(-2);
37 + var day = ("0" + today.getDate()).slice(-2);
38 + var dateString = year + "-" + month + "-" + day;
39 + //return "2022-06-02"; // 테스트용 날짜를 입력하세요. *** 테스트가 끝나면 주석처리하고 커밋해주세요. *** ex) 2022-09-12, 2022-09-15, 2022-10-04
40 + return dateString;
41 +}
42 +
43 +// To get modified date from locdate
44 +function getModifiedDate(locdate) {
45 + return (
46 + locdate.substr(0, 4) +
47 + "-" +
48 + locdate.substr(4, 2) +
49 + "-" +
50 + locdate.substr(6, 2)
51 + );
52 +}
53 +
54 +// To get remaining days from locdate
55 +function getLeftDate(locdate) {
56 + var today = new Date(getTodayDate()); // today date
57 + var holiday = new Date(getModifiedDate(locdate)); // holiday date
58 + var diffDate = today.getTime() - holiday.getTime();
59 + var dday = Math.abs(diffDate / (1000 * 3600 * 24));
60 + return dday;
61 +}
62 +
63 +// To change parameter
64 +function changeParams(year, month, operation) {
65 + queryParams = "?" + "solYear" + "=" + year;
66 + queryParams += "&" + "solMonth" + "=" + month;
67 + queryParams += "&" + "ServiceKey" + "=" + SERVEICE_KEY;
68 + requestUrl = url + operation + queryParams;
69 +}
70 +
71 +// To check is this left holiday
72 +function cmpDate(date) {
73 + var today = getTodayDate().replace(/\-/g, "");
74 + if (Number(today) <= Number(date)) {
75 + return true;
76 + }
77 +}
78 +
79 +// To get data from holiday api by using parmas
80 +function getData() {
81 + request.get(requestUrl, (err, res, body) => {
82 + if (err) {
83 + console.log("err => " + err);
84 + } else {
85 + if (res.statusCode == 200) {
86 + // Read url success
87 + var result = body;
88 + var parser = new xml2js.Parser();
89 + parser.parseString(result, function (err, res) {
90 + text = JSON.stringify(res);
91 + // Get dataName method
92 + dateName = [];
93 + var idx = text.indexOf("dateName", 0);
94 + while (idx != -1) {
95 + var start = text.indexOf("[", idx) + 2;
96 + var end = text.indexOf("]", idx) - 1;
97 + var tempStr = text.substring(start, end);
98 + dateName.push(tempStr);
99 + idx = text.indexOf("dateName", idx + 1);
100 + }
101 + console.log(dateName);
102 + // Get locdate method
103 + locdate = [];
104 + idx = text.indexOf("locdate", 0);
105 + while (idx != -1) {
106 + var start = text.indexOf("[", idx) + 2;
107 + var end = text.indexOf("]", idx) - 1;
108 + var tempStr = text.substring(start, end);
109 + locdate.push(tempStr);
110 + idx = text.indexOf("locdate", idx + 1);
111 + }
112 + console.log(locdate);
113 + var holiArr = [];
114 + for (var i = 0; i < dateName.length; i++) {
115 + holiArr.push(getLeftDate(locdate[i]));
116 + }
117 + console.log(holiArr);
118 + // Create tempArr to save dateName and locdate and leftDate at once
119 + tempArr = [];
120 + // To check left holiday
121 + var check = false;
122 + for (var i = 0; i < locdate.length; i++) {
123 + if (cmpDate(locdate[i])) {
124 + check = true;
125 + tempArr.push(dateName[i]); // Get recent holiday name
126 + tempArr.push(locdate[i]); // Get recent holiday date
127 + tempArr.push(holiArr[i]); // Get leftDate through locdate
128 + break;
129 + }
130 + }
131 + console.log(tempArr);
132 + if (!check) {
133 + // If there are no holidays left this month
134 + console.log(
135 + "이번 달에는 남은 공휴일이 없습니다. 다음달 데이터를 불러옵니다."
136 + );
137 + if (Number(month) < 12) {
138 + // Get next month data
139 + month = String(Number(month) + 1).padStart(2, "0");
140 + } else {
141 + // Get next year data
142 + year = String(Number(year) + 1).padStart(4, "0");
143 + month = "01";
144 + }
145 + changeParams(year, month, operation);
146 + getData();
147 + }
148 + console.log("* api로부터 데이터를 불러왔습니다.");
149 + console.log("오늘의 날짜는", getTodayDate(), "입니다.");
150 + console.log(
151 + "가장 가까운 공휴일인 [" +
152 + tempArr[0] +
153 + "]의 날짜는 [" +
154 + tempArr[1] +
155 + "]이고, [" +
156 + tempArr[2] +
157 + "]일 남았습니다."
158 + );
159 + });
160 + }
161 + }
162 + });
163 +}
164 +
165 +// To initialize datas when calling webpage
166 +function init() {
167 + // Intialize Year, Month
168 + var date = getTodayDate().split("-");
169 + year = date[0];
170 + month = date[1];
171 + operation = "getRestDeInfo";
172 + changeParams(year, month, operation);
173 + // Get data from holiday api
174 + getData();
175 +}
176 +
177 +// Get request for web service
178 +app.get("/", function (req, res) {
179 + init();
180 + // Send data from nodejs to ejs
181 + res.render("data.ejs", { data: tempArr }, function (err, html) {
182 + if (err) {
183 + console.log(err);
184 + }
185 + res.end(html); // End response
186 + });
187 + // send data.ejs
188 + res.sendFile(__dirname + "/views/data.ejs");
189 +});
190 +
191 +// Get request for app service(Send main data)
192 +app.get("/app", function (req, res) {
193 + init();
194 + res.send(
195 + getTodayDate() + "," + tempArr[0] + "," + tempArr[1] + "," + tempArr[2]
196 + );
197 +});
198 +
199 +init();
200 +
201 +const port = 8080;
202 +app.listen(port, () => console.log("Listening on port " + port));
1 +<!-- data.ejs -->
2 +<!DOCTYPE html>
3 +<html>
4 +
5 +<head>
6 + <meta charset="UTF-8">
7 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
8 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
9 + <title>Check the Holiday</title>
10 + <link rel="stylesheet" href="../public/css/main.css" type="text/css">
11 + <!--style.css 파일 적용.-->
12 + <link rel="preconnect" href="https://fonts.googleapis.com">
13 + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14 + <link href="https://fonts.googleapis.com/css2?family=Tiro+Devanagari+Marathi&display=swap" rel="stylesheet">
15 + <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
16 +</head>
17 +<center>
18 +
19 + <body>
20 + <div id="title">When is Next Holiday?</div>
21 + <br><br>
22 + <div class="wrapper">
23 + <div class="circle">
24 + <p class="dday">
25 + <span>
26 + <h2>오늘로부터 가장 가까운 휴일은</h2>
27 + <h1>
28 + <%= data[0] %>
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>
40 + <h2> </h2>
41 + </span>
42 + </p>
43 + </div>
44 + </div>
45 +
46 + <!--comment part-->
47 + <div id="comment">
48 + <% if (data[2] << 7 ) { %>
49 + <h2>벌써 <%= data[0] %>이(가) <font color="pink">일주일</font>도 남지 않았습니다! </h2>
50 +
51 + <% } else if (data[2] << 10) { %>
52 + <h2>어느새 <%= data[0] %>이(가) <font color="pink">열흘</font>도 남지 않았습니다! </h2>
53 +
54 + <% } else if (data[2] << 31) { %>
55 + <h2>
56 + <%= data[0] %>이(가) <font color="pink">한 달</font>도 남지 않았습니다!
57 + </h2>
58 +
59 + <% } else if (data[2]==0) { %>
60 + <h2>오늘은 즐거운 공휴일!</h2>
61 +
62 + <% } else { %>
63 + <h2>오늘부터 한 달 안에 공휴일이 없습니다..</h2>
64 + <% } %>
65 + </div>
66 +
67 +
68 + <br><br>
69 +
70 +
71 + <!--recommend activity-->
72 + <h2> [<%= data[0] %>]에 추천하는 활동 </h2>
73 + <div>
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' ) { %>
162 + <div id="detail">
163 + <br>
164 + <h2>지방선거로 지정된 날로 대한민국에서 가장 중요한 날 중 하나이다. </h2>
165 + <h2>모두가 투표에 참여함으로써 귀중한 표를 선사해야하는 날이다. </h2>
166 + <br>
167 + </div>
168 + <div class="frame">
169 + <button class="custom-btn btn-12" href=""><span>click!</span><span>내 주변z 투표소
170 + 찾기!</span></button>
171 + </div>
172 +
173 + <% } else if (data[1]=='20220606' ) { %>
174 + <div id="detail">
175 + <br>
176 + <h2>현충일은 나라를 위해 희생한 순국선열과 장병들을 기리기 위해 지정된
177 + 기념일이다. </h2>
178 + <h2>1. 국립 서울 현충원
179 + 서울 동작역 근처에 위치하고 있으며, 국가를 위해 희생한 분들을 모신 국립묘지입니다.
180 + </h2>
181 + <h2>2. 용산 전쟁기념관
182 + 선사시대부터 현대까지의 국가에 헌신한 분들의 공훈과 호국전쟁 자료 등이
183 + 실물, 복제품으로 전시되어 있다. </h2>
184 + <h2>3. 김포함상공원
185 + 52년간 바다를 지켜온 운봉함을 개조한 공원으로 실제로 사용된 전함을
186 + 볼 수 있다.
187 + </h2>
188 + <br>
189 + </div>
190 + <div class="frame">
191 + <button class="custom-btn btn-12"
192 + href=""><span>click!</span><span>button</span></button>
193 + </div>
194 +
195 + <% } else if (data[1]=='20220815' ) { %>
196 + <div id="detail">
197 + <br>
198 + <h2>광복절은 대한민국이 일본으로부터 해방된 것을 기념하는 날이다</h2>
199 + <h2>1. 서대문형무소 역사관
200 + 서울 종로구에 위치한 역사 박물관으로 대한민국 서녕ㄹ들의 자주독립정신을
201 + 배울 수 있는 곳이다.</h2>
202 + <h2>2. 전쟁기념관
203 + 서울 용산구에 위치해 있으며, 호국 자료를 전시하고 전쟁의 통해 얻을 수 있는
204 + 교훈과 호국정신을 배양한다.</h2>
205 + <h2>3. 근현대사 기념관
206 + 순국선열의 묘역과 4/19민주묘지가 자리잡고 있다.
207 + </h2>
208 + <br>
209 + </div>
210 + <div class="frame">
211 + <button class="custom-btn btn-12"
212 + href=""><span>click!</span><span>button</span></button>
213 + </div>
214 +
215 + <% } else if (data[1]=='20220909' ) { %>
216 + <div id="detail">
217 + <br>
218 + <h2>추석은 음력 8월 15일에 치르는 행사이고, 설날과 함께 한국의 주요 연휴이다. </h2>
219 + <h2>가족들과 함께 보름달 같이 풍성한 한가위 보내자.</h2>
220 + <br>
221 + </div>
222 + <div class="frame">
223 + <button class="custom-btn btn-12"
224 + href=""><span>click!</span><span>button</span></button>
225 + </div>
226 +
227 + <% } else if (data[1]=='20221003' ) { %>
228 + <div id="detail">
229 + <br>
230 + <h2>개천절은 대한민국의 국경일중 하나이며, 단군왕검이 고조선을 세운 것을 기념하는 날이다.</h2>
231 + <h2>1. 인천 차이나 타운
232 + '먹방 여행'뿐만 아니라, 역사 투어까지 가능한 곳이다.<br> 우리가 즐겨먹는 짜장면이 바로 인천
233 + 차이나타운에서 탄생했으며,<br> 가장 오래된 중국집이 '짜장면박물관'으로 리모델링돼 운영중이다.</h2>
234 + <h2>2. 태백 동굴 여행
235 + 태백에는 많은 동굴들이 있으며, 당일치기여행으로 갈만한 곳이 많다.</h2>
236 + <br>
237 + </div>
238 + <div class="frame">
239 + <button class="custom-btn btn-12"
240 + href=""><span>click!</span><span>button</span></button>
241 + </div>
242 +
243 + <% } else if (data[1]=='20221010' ) { %>
244 + <div id="detail">
245 + <br>
246 + <h2>한글날은 세종대왕이 훈민정음을 창제한 것을 기념하기 위해 만들어진 기념일이다. </h2>
247 + <h2>1. 서울 시청 일대
248 + 서울 시청 근처에는 다양한 한글날 행사가 열린다.
249 + </h2>
250 + <h2>2. 광화문 세종대왕 동상
251 + 세종대황 동상이 있는 광화문 광장 지하에는 세종이야기와 충무공 이야기가 전시되어 있다.
252 + 전시관 안에는 다양한 세종대왕 관련 서적이 자리하고 있다.
253 + </h2>
254 + <br>
255 + </div>
256 + <div class="frame">
257 + <button class="custom-btn btn-12"
258 + href=""><span>click!</span><span>button!</span></button>
259 + </div>
260 +
261 + <% } else if (data[1]=='20221225' ) { %>
262 + <div id="detail">
263 + <br>
264 + <h2>예수 그리스도의 탄생을 기리는 기념일이다. <br>
265 + 한 겨울에 있는 공휴일로 많은 사람들이
266 + 연인이나 가족들과 함께 시간을 보낸다. </h2>
267 + <h2>1.분천역 산타마을
268 + 분천역은 국내 최초의 개방형 관광 열차인 백두개간 열차가 출발하는 역이다.<br>
269 + 역 주변에는 다양한 크리스마스 모형들이 있다.</h2>
270 + <h2>2. 에버랜드
271 + 크리스마스 기간동안 에버랜드는 낭만적인 크리스마스 분위기를 연출한다.<br>
272 + 매일 1~2회씩 크리스마스 퍼레이드를 선보인다.</h2>
273 + <br>
274 + </div>
275 + <div class="frame">
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>
279 + </div>
280 + <% } else { %>
281 + <h2>Just Take some rest!</h2>
282 + <% } %>
283 + </div>
284 + </body>
285 +</center>
286 +
287 +</html>
...\ No newline at end of file ...\ No newline at end of file