Move files for html/css/recommend-activity work

+node_modules/
+package-lock.json
+.env
\ No newline at end of file

+{
+  "name": "holiday-counter-recommend-activity",
+  "version": "1.0.0",
+  "description": "",
+  "main": "server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "http://khuhub.khu.ac.kr/teamPARK/holiday-counter-recommand-activity.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "dotenv": "^16.0.1",
+    "ejs": "^3.1.8",
+    "express": "^4.18.1",
+    "request": "^2.88.2",
+    "xml2js": "^0.4.23"
+  }
+}

+.circle {
+  margin: 0 auto;
+  width: 500px;
+  height: 500px;
+  border: 15px solid rgb(163, 151, 198);
+  border-radius: 50%;
+  line-height: 3em;
+}
+.dday {
+  padding: 50px 0;
+}
+
+.wrapper {
+  margin: 0 auto;
+  padding: 30px;
+  max-width: 1170px;
+}
+h1 {
+  font-size: 50px;
+  color : tomato;
+  font-family: 'Gowun Dodum', sans-serif;
+  margin-bottom: 10px;
+}
+h2 {
+  color :white;
+  font-weight: lighter;
+  font-family: 'Gowun Dodum', sans-serif;
+}
+
+#title {
+  color: rgb(191, 185, 211);
+  font-size: 70px;
+  font-family: 'Tiro Devanagari Marathi', serif;
+  font-weight: 600;
+  text-shadow: 4px 2px 2px rgba(178, 104, 180, 0.61);
+  letter-spacing: 0.05em;
+}
+#comment {
+  width: fit-content;
+  background-color: rgba(190, 125, 87, 0.39);
+  border-radius: 40px 80px / 80px 40px;
+
+}
+#detail {
+  width:1000px;
+  height:fit-content;
+  border-radius: 40px 80px / 80px 40px;
+  background-color: rgba(190, 87, 168, 0.39);
+}
+body {
+  margin-top: 100px;
+  margin-bottom: 100px;
+  margin-left: 50px;
+  margin-right: 50px;
+  background-color: rgb(78, 76, 76);
+}
+#background{
+  width : 80%;
+  height : 80%;
+  border: 15px solid rgb(229, 220, 231);
+  border-radius : 30px 30px / 30px 30px;
+  
+}
+.box {
+  margin : 50px; 
+  padding : 20px;
+  border : 1px solid rgb(248, 239, 249);
+  border-radius : 20px;
+  background-color: rgb(255, 255, 255);
+}
+
+/* button style*/
+.frame {
+  width: 90%;
+  margin: 40px auto;
+  text-align: center;
+}
+button {
+  margin: 20px;
+}
+.custom-btn {
+  width: 130px;
+  height: 40px;
+  color: #fff;
+  border-radius: 5px;
+  padding: 10px 25px;
+  font-family: 'Lato', sans-serif;
+  font-weight: 500;
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  display: inline-block;
+   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
+   7px 7px 20px 0px rgba(0,0,0,.1),
+   4px 4px 5px 0px rgba(0,0,0,.1);
+  outline: none;
+}
+.btn-12{
+  position: relative;
+  right: 20px;
+  bottom: 20px;
+  border:none;
+  box-shadow: none;
+  width: 130px;
+  height: 40px;
+  line-height: 42px;
+  -webkit-perspective: 230px;
+  perspective: 230px;
+}
+.btn-12 span {
+  background: rgb(0,172,238);
+background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
+  display: block;
+  position: absolute;
+  width: 130px;
+  height: 40px;
+  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
+   7px 7px 20px 0px rgba(0,0,0,.1),
+   4px 4px 5px 0px rgba(0,0,0,.1);
+  border-radius: 5px;
+  margin:0;
+  text-align: center;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-transition: all .3s;
+  transition: all .3s;
+}
+.btn-12 span:nth-child(1) {
+  box-shadow:
+   -7px -7px 20px 0px #fff9,
+   -4px -4px 5px 0px #fff9,
+   7px 7px 20px 0px #0002,
+   4px 4px 5px 0px #0001;
+  -webkit-transform: rotateX(90deg);
+  -moz-transform: rotateX(90deg);
+  transform: rotateX(90deg);
+  -webkit-transform-origin: 50% 50% -20px;
+  -moz-transform-origin: 50% 50% -20px;
+  transform-origin: 50% 50% -20px;
+}
+.btn-12 span:nth-child(2) {
+  -webkit-transform: rotateX(0deg);
+  -moz-transform: rotateX(0deg);
+  transform: rotateX(0deg);
+  -webkit-transform-origin: 50% 50% -20px;
+  -moz-transform-origin: 50% 50% -20px;
+  transform-origin: 50% 50% -20px;
+}
+.btn-12:hover span:nth-child(1) {
+  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
+   7px 7px 20px 0px rgba(0,0,0,.1),
+   4px 4px 5px 0px rgba(0,0,0,.1);
+  -webkit-transform: rotateX(0deg);
+  -moz-transform: rotateX(0deg);
+  transform: rotateX(0deg);
+}
+.btn-12:hover span:nth-child(2) {
+  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
+   7px 7px 20px 0px rgba(0,0,0,.1),
+   4px 4px 5px 0px rgba(0,0,0,.1);
+ color: transparent;
+  -webkit-transform: rotateX(-90deg);
+  -moz-transform: rotateX(-90deg);
+  transform: rotateX(-90deg);
+}
\ No newline at end of file

+const express = require("express");
+const app = express();
+const request = require("request");
+const xml2js = require("xml2js");
+const static = require("serve-static");
+require("dotenv").config();
+
+// Modify the values as needed
+var year = "2022";
+var month = "09";
+var operation = "getRestDeInfo";
+
+// Do not modify the values
+var SERVEICE_KEY = process.env.API_KEY;
+var url = "http://apis.data.go.kr/B090041/openapi/service/SpcdeInfoService/";
+var queryParams = "?" + "solYear" + "=" + year;
+queryParams += "&" + "solMonth" + "=" + month;
+queryParams += "&" + "ServiceKey" + "=" + SERVEICE_KEY;
+let requestUrl = url + operation + queryParams;
+
+// Empty variables
+var text = "";
+var dateName = [];
+var locdate = [];
+var tempArr = [];
+
+// To run EJS engine
+app.set("views", __dirname + "/views");
+app.set("view engine", "ejs");
+app.use(static(__dirname));
+
+// To get today date by using Date
+function getTodayDate() {
+  var today = new Date();
+  var year = today.getFullYear();
+  var month = ("0" + (today.getMonth() + 1)).slice(-2);
+  var day = ("0" + today.getDate()).slice(-2);
+  var dateString = year + "-" + month + "-" + day;
+  //return "2022-06-02"; // 테스트용 날짜를 입력하세요. *** 테스트가 끝나면 주석처리하고 커밋해주세요. *** ex) 2022-09-12, 2022-09-15, 2022-10-04
+  return dateString;
+}
+
+// To get modified date from locdate
+function getModifiedDate(locdate) {
+  return (
+    locdate.substr(0, 4) +
+    "-" +
+    locdate.substr(4, 2) +
+    "-" +
+    locdate.substr(6, 2)
+  );
+}
+
+// To get remaining days from locdate
+function getLeftDate(locdate) {
+  var today = new Date(getTodayDate()); // today date
+  var holiday = new Date(getModifiedDate(locdate)); // holiday date
+  var diffDate = today.getTime() - holiday.getTime();
+  var dday = Math.abs(diffDate / (1000 * 3600 * 24));
+  return dday;
+}
+
+// To change parameter
+function changeParams(year, month, operation) {
+  queryParams = "?" + "solYear" + "=" + year;
+  queryParams += "&" + "solMonth" + "=" + month;
+  queryParams += "&" + "ServiceKey" + "=" + SERVEICE_KEY;
+  requestUrl = url + operation + queryParams;
+}
+
+// To check is this left holiday
+function cmpDate(date) {
+  var today = getTodayDate().replace(/\-/g, "");
+  if (Number(today) <= Number(date)) {
+    return true;
+  }
+}
+
+// To get data from holiday api by using parmas
+function getData() {
+  request.get(requestUrl, (err, res, body) => {
+    if (err) {
+      console.log("err => " + err);
+    } else {
+      if (res.statusCode == 200) {
+        // Read url success
+        var result = body;
+        var parser = new xml2js.Parser();
+        parser.parseString(result, function (err, res) {
+          text = JSON.stringify(res);
+          // Get dataName method
+          dateName = [];
+          var idx = text.indexOf("dateName", 0);
+          while (idx != -1) {
+            var start = text.indexOf("[", idx) + 2;
+            var end = text.indexOf("]", idx) - 1;
+            var tempStr = text.substring(start, end);
+            dateName.push(tempStr);
+            idx = text.indexOf("dateName", idx + 1);
+          }
+          console.log(dateName);
+          // Get locdate method
+          locdate = [];
+          idx = text.indexOf("locdate", 0);
+          while (idx != -1) {
+            var start = text.indexOf("[", idx) + 2;
+            var end = text.indexOf("]", idx) - 1;
+            var tempStr = text.substring(start, end);
+            locdate.push(tempStr);
+            idx = text.indexOf("locdate", idx + 1);
+          }
+          console.log(locdate);
+          var holiArr = [];
+          for (var i = 0; i < dateName.length; i++) {
+            holiArr.push(getLeftDate(locdate[i]));
+          }
+          console.log(holiArr);
+          // Create tempArr to save dateName and locdate and leftDate at once
+          tempArr = [];
+          // To check left holiday
+          var check = false;
+          for (var i = 0; i < locdate.length; i++) {
+            if (cmpDate(locdate[i])) {
+              check = true;
+              tempArr.push(dateName[i]); // Get recent holiday name
+              tempArr.push(locdate[i]); // Get recent holiday date
+              tempArr.push(holiArr[i]); // Get leftDate through locdate
+              break;
+            }
+          }
+          console.log(tempArr);
+          if (!check) {
+            // If there are no holidays left this month
+            console.log(
+              "이번 달에는 남은 공휴일이 없습니다. 다음달 데이터를 불러옵니다."
+            );
+            if (Number(month) < 12) {
+              // Get next month data
+              month = String(Number(month) + 1).padStart(2, "0");
+            } else {
+              // Get next year data
+              year = String(Number(year) + 1).padStart(4, "0");
+              month = "01";
+            }
+            changeParams(year, month, operation);
+            getData();
+          }
+          console.log("* api로부터 데이터를 불러왔습니다.");
+          console.log("오늘의 날짜는", getTodayDate(), "입니다.");
+          console.log(
+            "가장 가까운 공휴일인 [" +
+              tempArr[0] +
+              "]의 날짜는 [" +
+              tempArr[1] +
+              "]이고, [" +
+              tempArr[2] +
+              "]일 남았습니다."
+          );
+        });
+      }
+    }
+  });
+}
+
+// To initialize datas when calling webpage
+function init() {
+  // Intialize Year, Month
+  var date = getTodayDate().split("-");
+  year = date[0];
+  month = date[1];
+  operation = "getRestDeInfo";
+  changeParams(year, month, operation);
+  // Get data from holiday api
+  getData();
+}
+
+// Get request for web service
+app.get("/", function (req, res) {
+  init();
+  // Send data from nodejs to ejs
+  res.render("data.ejs", { data: tempArr }, function (err, html) {
+    if (err) {
+      console.log(err);
+    }
+    res.end(html); // End response
+  });
+  // send data.ejs
+  res.sendFile(__dirname + "/views/data.ejs");
+});
+
+// Get request for app service(Send main data)
+app.get("/app", function (req, res) {
+  init();
+  res.send(
+    getTodayDate() + "," + tempArr[0] + "," + tempArr[1] + "," + tempArr[2]
+  );
+});
+
+init();
+
+const port = 8080;
+app.listen(port, () => console.log("Listening on port " + port));