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

Expand all
Inline Side-by-side
Showing 5 changed files with 395 additions and 0 deletions
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));
This diff is collapsed. Click to expand it.