Joung Jiwon / OSS-TongGilMut

Go to a project
Toggle navigation Toggle navigation pinning
SH
d4ca5fc9 1 parent e28513ab

ejs page

Inline Side-by-side
Showing 2 changed files with 632 additions and 0 deletions
const express = require('express');
const request = require('request');
const http = require('http');
const app = express();
var bodyParser = require("body-parser");
let path = require('path');
let server = http.createServer(app);
app.set('view engine','ejs');
app.set('views', path.join(__dirname, 'views'));
app.use(bodyParser.urlencoded({ extended : false }));
request.post("/", function(req, res){
//let sxv = req.render(sx)
//let syv = req.render(sy)
//let exv = req.render(ex)
//let eyv = req.render(ey)
});
app.get('/', function (req, response) {
let requestUrl = "https://api.odsay.com/v1/api/searchPubTransPath?SX=127.13973017022232&SY=37.47331630562443&EX=127.08011485487083&EY=37.24312944010195&apiKey=D5/cqOgLNnn/iHrOs3rXewYFNPO6KVQvntHKQ/5muGA"
request.get(requestUrl, (err, res, body) => {
if (err) {
console.log(`err => ${err}`)
}
else {
if (res.statusCode == 200) {
var result = body
var obj = JSON.parse(result);
//console.log(`body data => ${result}`)
//console.log('ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ')
var time = (obj)["result"]["path"][0].info.totalTime
var pay = (obj)["result"]["path"][0].info.payment
var distance = (obj)["result"]["path"][0].info.totalDistance
response.render('index', {
time: time,
pay: pay,
distance: distance
});
}
}
})
});
server.listen('3000', 'localhost', function () {
console.log('server listen on port:' + server.address().port);
})
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>The Town HTML CSS Template</title>
<link rel="stylesheet" href="fontawesome-5.5/css/all.min.css" />
<link rel="stylesheet" href="slick/slick.css">
<link rel="stylesheet" href="slick/slick-theme.css">
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/templatemo-style.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css">
<script src="../../docs/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../../docs/js/examples-base.js"></script>
<script type="text/javascript" src="../../docs/js/highlight.min.js"></script>
<!--Geocoding ncpClientId 변경-->
<script type="text/javascript"
src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=nxquc56d3k&submodules=geocoder"></script>
<link rel="stylesheet" type="text/css" href="../../docs/css/examples-base.css" />
<!--
The Town
https://templatemo.com/tm-525-the-town
-->
<script type="text/css">
window.onload = function(){
document.getElementById('btn').onclick = function(){
document.getElementById('frm').submit();
return false;
};
};
</script>
</head>
<body>
<!-- Hero section -->
<section id="hero" class="text-white tm-font-big tm-parallax">
<video autoplay muted loop id="hero-video">
<source src="img/main-video1.mp4" type="video/mp4">
</video>
<!-- Navigation -->
<nav class="navbar navbar-expand-md tm-navbar" id="tmNav">
<div class="container">
<div class="tm-next">
<a href="#hero" class="navbar-brand">뚜벅이</a>
</div>
</div>
</nav>
<div class="text-center tm-hero-text-container">
<div class="tm-hero-text-container-inner">
<h2 class="tm-hero-title">통학생은 길에서 몇시간을 보냈을까?</h2>
<p class="tm-hero-subtitle">
매일 학교에 통학하시나요?<br>
뚜벅이님이 지금까지 몇시간을 길에서 보냈는지 보여드립니다.
<br>-뚜벅이-
</p>
</div>
</div>
<div class="tm-next tm-intro-next">
<a href="#contact" class="text-center tm-down-arrow-link">
<i class="fas fa-3x fa-caret-down tm-down-arrow">계산해보기</i>
</a>
</div>
</section>
<!-- Contact -->
<section id="contact" class="tm-section-pad-top tm-parallax-2">
<div class="container tm-container-contact">
<div class="grid-container">
<div class="question-field question-home">어디에 사나요?</div>
<div class="input-field input-home">
<label for="question-input-field"></label>
<input type="text" id="start"></div>
<div class="question-field question-school">무슨 학교에 다니나요?</div>
<div class="input-school">
<label for="question-input-field"></label>
<input type="text" id="end">
</div>
<div class="question-field question-grade">몇학년인가요?</div>
<div class="input-grade">
<div class="custom-select" style="width:208px; margin-right:40px">
<select id="semester">
<option value="0">1학년 1학기</option>
<option value="sem-1-1">1학년 1학기</option>
<option value="sem-1-2">1학년 2학기</option>
<option value="sem-2-1">2학년 1학기</option>
<option value="sem-2-2">2학년 2학기</option>
<option value="sem-3-1">3학년 1학기</option>
<option value="sem-3-2">3학년 2학기</option>
<option value="sem-4-1">4학년 1학기</option>
<option value="sem-4-2">4학년 2학기</option>
</select>
</div>
</div>
</div>
<a href="#result" class="text-center tm-down-arrow-link" onclick="semester();return false;">
<i class="fas fa-3x fa-caret-down tm-down-arrow">계산해보기</i>
</a>
</div>
</section>
<section id="result">
<div id="map" style="width:700px;height:300px;"></div>
<div class="answer-field">한번 갈 때마다 ...<br>
<span class="answer-highlight" id="hour"><%= Math.floor(time/60) %></span> 시간
<span class="answer-highlight" id="minute"><%= time%60 %></span> 분 <br>
<span class="answer-highlight" id="pay"><%= pay %></span> 원 <br>
<span class="answer-highlight" id="distance"><%= distance %></span> m <br>
</div>
<div class="row">
<div id="list-answer">
<div class="answer-field" id="answer-how-many-hours">
지금까지 <span class="answer-highlight" id="since">?</span>시간을 길에서 보내셨군요<br>
졸업까지 앞으로 <span class="answer-highlight" id="until">?</span>시간은 더 길에서 보내시면 됩니다.<br>
</div>
</div>
</div>
<div class="row">
<div class="answer-detail-question">
이 시간에 알바를 했다면? <span id="salary">?</span>원<br>
교통비로 국밥 <span id="dish">?</span>그릇<br>
이 거리라면 에베레스트 등반을 <span id="everest">?</span>번이나...<br>
지구를 <span id="earth">?</span>바퀴나 돌아요<br><br><br>
</div>
</div>
<footer class="text-center small tm-footer">
<p class="mb-0">
Copyright &copy; 2020 TongGilMut
- Design: <a rel="nofollow" href="https://github.com/wjdwl001" class="tm-footer-link">Joung Jiwon</a>
</p>
</footer>
</section>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="slick/slick.min.js"></script>
<script src="magnific-popup/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.singlePageNav.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script> //dropdown list
var x, i, j, l, ll, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
l = x.length;
for (i = 0; i < l; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
ll = selElmnt.length;
/*for each element, create a new DIV that will act as the selected item:*/
a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
/*for each element, create a new DIV that will contain the option list:*/
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
for (j = 1; j < ll; j++) {
/*for each option in the original select element,
create a new DIV that will act as an option item:*/
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener("click", function (e) {
/*when an item is clicked, update the original select box,
and the selected item:*/
var y, i, k, s, h, sl, yl;
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
sl = s.length;
h = this.parentNode.previousSibling;
for (i = 0; i < sl; i++) {
if (s.options[i].innerHTML == this.innerHTML) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName("same-as-selected");
yl = y.length;
for (k = 0; k < yl; k++) {
y[k].removeAttribute("class");
}
this.setAttribute("class", "same-as-selected");
break;
}
}
h.click();
});
b.appendChild(c);
}
x[i].appendChild(b);
a.addEventListener("click", function (e) {
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle("select-hide");
this.classList.toggle("select-arrow-active");
});
}
function closeAllSelect(elmnt) {
/*a function that will close all select boxes in the document,
except the current select box:*/
var x, y, i, xl, yl, arrNo = [];
x = document.getElementsByClassName("select-items");
y = document.getElementsByClassName("select-selected");
xl = x.length;
yl = y.length;
for (i = 0; i < yl; i++) {
if (elmnt == y[i]) {
arrNo.push(i)
} else {
y[i].classList.remove("select-arrow-active");
}
}
for (i = 0; i < xl; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.add("select-hide");
}
}
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);
</script>
<script> //API
var btn = document.querySelector('button');
btn.addEventListener('click', updateBtn);
function updateBtn() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
naver.maps.Service.geocode({
address: start
}, function (status, response) {
if (status !== naver.maps.Service.Status.OK) {
return alert('Something wrong!');
}
var result = response.result, // 검색 결과의 컨테이너
items = result.items;
var sx = result.items[0].point.x;
var sy = result.items[0].point.y;
naver.maps.Service.geocode({
address: end
}, function (status, response) {
if (status !== naver.maps.Service.Status.OK) {
return alert('Something wrong!');
}
var result = response.result, // 검색 결과의 컨테이너
items = result.items;
var ex = result.items[0].point.x;
var ey = result.items[0].point.y;
/*var sx = 127.0739547;
var sy = 37.2407701;
var ex = 126.921666;
var ey = 37.1308333;
*/
var mapOptions = {
center: new naver.maps.LatLng(start, end),
zoom: 10
};
var map = new naver.maps.Map('map', mapOptions);
function searchPubTransPathAJAX() {
var xhr = new XMLHttpRequest();
//ODsay apiKey 입력
var url = "https://api.odsay.com/v1/api/searchPubTransPath?SX=" + sx + "&SY=" + sy + "&EX=" + ex + "&EY=" + ey + "&apiKey=D5/cqOgLNnn/iHrOs3rXewYFNPO6KVQvntHKQ/5muGA";
xhr.open("GET", url, true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(JSON.parse(xhr.responseText)); // <- xhr.responseText 로 결과를 가져올 수 있음
//노선그래픽 데이터 호출
callMapObjApiAJAX((JSON.parse(xhr.responseText))["result"]["path"][0].info.mapObj);
}
}
}
//길찾기 API 호출
searchPubTransPathAJAX();
function callMapObjApiAJAX(mabObj) {
var xhr = new XMLHttpRequest();
//ODsay apiKey 입력
var url = "https://api.odsay.com/v1/api/loadLane?mapObject=0:0@" + mabObj + "&apiKey=D5/cqOgLNnn/iHrOs3rXewYFNPO6KVQvntHKQ/5muGA";
xhr.open("GET", url, true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var resultJsonData = JSON.parse(xhr.responseText);
drawNaverMarker(sx, sy); // 출발지 마커 표시
drawNaverMarker(ex, ey); // 도착지 마커 표시
drawNaverPolyLine(resultJsonData); // 노선그래픽데이터 지도위 표시
// boundary 데이터가 있을경우, 해당 boundary로 지도이동
if (resultJsonData.result.boundary) {
var boundary = new naver.maps.LatLngBounds(
new naver.maps.LatLng(resultJsonData.result.boundary.top, resultJsonData.result.boundary.left),
new naver.maps.LatLng(resultJsonData.result.boundary.bottom, resultJsonData.result.boundary.right)
);
map.panToBounds(boundary);
}
}
}
}
// 지도위 마커 표시해주는 함수
function drawNaverMarker(x, y) {
var marker = new naver.maps.Marker({
position: new naver.maps.LatLng(y, x),
map: map
});
}
// 노선그래픽 데이터를 이용하여 지도위 폴리라인 그려주는 함수
function drawNaverPolyLine(data) {
var lineArray;
for (var i = 0; i < data.result.lane.length; i++) {
for (var j = 0; j < data.result.lane[i].section.length; j++) {
lineArray = null;
lineArray = new Array();
for (var k = 0; k < data.result.lane[i].section[j].graphPos.length; k++) {
lineArray.push(new naver.maps.LatLng(data.result.lane[i].section[j].graphPos[k].y, data.result.lane[i].section[j].graphPos[k].x));
}
//지하철결과의 경우 노선에 따른 라인색상 지정하는 부분 (1,2호선의 경우만 예로 들음)
if (data.result.lane[i].type == 1) {
var polyline = new naver.maps.Polyline({
map: map,
path: lineArray,
strokeWeight: 3,
strokeColor: '#003499'
});
} else if (data.result.lane[i].type == 2) {
var polyline = new naver.maps.Polyline({
map: map,
path: lineArray,
strokeWeight: 3,
strokeColor: '#37b42d'
});
} else {
var polyline = new naver.maps.Polyline({
map: map,
path: lineArray,
strokeWeight: 3
});
}
}
}
}
});
});
}
</script>
<script> //값 계산
$('button-calculate').click(function () {
})
function semester() {
var target = document.getElementById("semester").value;
var input = 0
var since, until, salary, dish, everest, earth
// 임시값 지정
var time = document.getElementById("hour").innerHTML
var pay = document.getElementById("pay").innerHTML
var distance = document.getElementById("distance").innerHTML
function sum(sem) {
since = sem * time * 150
until = (8 - sem) * time * 150
salary = sem * since * 8590
dish = Math.floor((sem * pay * 150) / 6000)
everest = Math.floor((sem * distance * 2) / 8846)
earth = ((sem * distance * 2) / 40075000).toFixed(3)
}
if (target == 'sem-1-1') {
input = 1
sum(input)
}
else if (target == 'sem-1-2') {
input = 2
sum(input)
}
else if (target == 'sem-2-1') {
input = 3
sum(input)
}
else if (target == 'sem-2-2') {
input = 4
sum(input)
}
else if (target == 'sem-3-1') {
input = 5
sum(input)
}
else if (target == 'sem-3-2') {
input = 6
sum(input)
}
else if (target == 'sem-4-1') {
input = 7
sum(input)
}
else if (target == 'sem-4-2') {
input = 8
sum(input)
}
document.getElementById("since").innerHTML = since
document.getElementById("until").innerHTML = until
document.getElementById("salary").innerHTML = salary
document.getElementById("dish").innerHTML = dish
document.getElementById("everest").innerHTML = everest
document.getElementById("earth").innerHTML = earth
}
function getOffSet() {
var _offset = 450;
var windowHeight = window.innerHeight;
if (windowHeight > 500) {
_offset = 400;
}
if (windowHeight > 680) {
_offset = 300
}
if (windowHeight > 830) {
_offset = 210;
}
return _offset;
}
function setParallaxPosition($doc, multiplier, $object) {
var offset = getOffSet();
var from_top = $doc.scrollTop(),
bg_css = 'center ' + (multiplier * from_top - offset) + 'px';
$object.css({ "background-position": bg_css });
}
// Parallax function
// Adapted based on https://codepen.io/roborich/pen/wpAsm
var background_image_parallax = function ($object, multiplier, forceSet) {
multiplier = typeof multiplier !== 'undefined' ? multiplier : 0.5;
multiplier = 1 - multiplier;
var $doc = $(document);
// $object.css({"background-attatchment" : "fixed"});
if (forceSet) {
setParallaxPosition($doc, multiplier, $object);
} else {
$(window).scroll(function () {
setParallaxPosition($doc, multiplier, $object);
});
}
};
var background_image_parallax_2 = function ($object, multiplier) {
multiplier = typeof multiplier !== 'undefined' ? multiplier : 0.5;
multiplier = 1 - multiplier;
var $doc = $(document);
$object.css({ "background-attachment": "fixed" });
$(window).scroll(function () {
var firstTop = $object.offset().top,
pos = $(window).scrollTop(),
yPos = Math.round((multiplier * (firstTop - pos)) - 186);
var bg_css = 'center ' + yPos + 'px';
$object.css({ "background-position": bg_css });
});
};
$(function () {
// Hero Section - Background Parallax
background_image_parallax($(".tm-parallax"), 0.30, false);
background_image_parallax_2($("#contact"), 0.80);
// Handle window resize
window.addEventListener('resize', function () {
background_image_parallax($(".tm-parallax"), 0.30, true);
}, true);
// Detect window scroll and update navbar
$(window).scroll(function (e) {
if ($(document).scrollTop() > 120) {
$('.tm-navbar').addClass("scroll");
} else {
$('.tm-navbar').removeClass("scroll");
}
});
// Close mobile menu after click
$('#tmNav a').on('click', function () {
$('.navbar-collapse').removeClass('show');
})
// Scroll to corresponding section with animation
$('#tmNav').singlePageNav();
// Add smooth scrolling to all links
// https://www.w3schools.com/howto/howto_css_smooth_scroll.asp
$("a").on('click', function (event) {
$('html, body').animate({
scrollTop: $("#contact").offset().top
}, 400);
});
// Pop up
$('.tm-gallery').magnificPopup({
delegate: 'a',
type: 'image',
gallery: { enabled: true }
});
// Gallery
$('.tm-gallery').slick({
dots: true,
infinite: false,
slidesToShow: 5,
slidesToScroll: 2,
responsive: [
{
breakpoint: 1199,
settings: {
slidesToShow: 4,
slidesToScroll: 2
}
},
{
breakpoint: 991,
settings: {
slidesToShow: 3,
slidesToScroll: 2
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
});
</script>
</body>
</html>
\ No newline at end of file