맹주환 / take_an_umbrella

Go to a project
Toggle navigation Toggle navigation pinning
맹주환
1bb77ead 1 parent 45ceb396

Update .gitignore to except some files, Modify index.html to main page

Inline Side-by-side
Showing 7 changed files with 170 additions and 44 deletions
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Snowpack dependency directory (https://snowpack.dev/)
web_modules/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional stylelint cache
.stylelintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env.development.local
.env.test.local
.env.production.local
.env.local
# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache
# Next.js build output
.next
out
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# vuepress v2.x temp and cache directory
.temp
.cache
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset= "UTF-8">
<title>메인 페이지</title>
</head>
<body>
<h1> 홈페이지에 오신 것을 환영합니다. </h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAguo3zH8vWZJbzXEqyp8D8UvnBh3zX8rQ&callback=initMap&v=weekly"
async
></script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>Take an Umbrella</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1 style="font-family:Nanum Gothic;"> Take an Umbrella </h1>
<h3 style="font-family:Nanum Gothic;"> 철학과 2017101598 맹주환 </h3>
<pre align="center" style="font-family:Nanum Gothic;" font size="20">
반가워요!
Take an umbrella는 스마트 조명 제품 Philips hue API와 기상청 공공데이터 날씨 API로 구성되어 있어요.
Hue가 연결된 WI-FI로 접속하셔서 아래의 지도로 현재 위치를 조회하시면, 해당 지역 기상 예보를 받아와 조명을 통해 우산을 챙겨야 하는지 알려줘요!
</pre>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<h1 style="font-family:Nanum Gothic;"> 당신의 현재 위치 </h1>
<div align="center">현재 위도: <span id="lat"></span></div>
<div align="center">현재 경도: <span id="lng"></span></div>
</body>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="map.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap&v=weekly" async> </script>
</html>
\ No newline at end of file
......@@ -7,13 +7,13 @@ let map, infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 37.5642135, lng: 127.0016985 },
zoom: 6,
zoom: 10,
});
infoWindow = new google.maps.InfoWindow();
const locationButton = document.createElement("button");
locationButton.textContent = "Pan to Current Location";
locationButton.textContent = "위치 조회 하기";
locationButton.classList.add("custom-map-control-button");
map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
locationButton.addEventListener("click", () => {
......@@ -25,11 +25,12 @@ function initMap() {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
alert(pos.lat , pos.lng);
infoWindow.setPosition(pos);
infoWindow.setContent("Location found.");
infoWindow.setContent("위치를 찾았습니다.");
infoWindow.open(map);
map.setCenter(pos);
document.getElementById("lat").innerHTML = pos.lat;
document.getElementById("lng").innerHTML = pos.lng;
},
() => {
......@@ -47,8 +48,8 @@ function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(
browserHasGeolocation
? "Error: The Geolocation service failed."
: "Error: Your browser doesn't support geolocation."
? "Error: 위치 조회 서비스가 실패하였습니다."
: "Error: 브라우저가 위치 조회 기능을 지원하지 않습니다."
);
infoWindow.open(map);
}
\ No newline at end of file
......
......@@ -9,7 +9,7 @@ app.use(bodyParser.urlencoded({extended:false}));
//application/x=www-form-urlencoded를 app/json형태로 파싱 -> POST로 접근 가능.
app.use(bodyParser.json());
app.use('/html', serveStatic(path.join(__dirname,'HTML')));
app.use('/', serveStatic(path.join(__dirname,'HTML')));
//임의의 포트 10000, 접속 주소 localhost:10000/html/*.html 형태
http.createServer(app).listen(port, function(){
......
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);
h1 { text-align: center; }
h2 { text-align: center; }
h3 { text-align: center; }
#map {
height: 100%;
}
width:600px;
height:400px;
margin: 0 auto;
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
}
.custom-map-control-button {
background-color: #fff;
border: 0;
......