맹주환 / 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
1 +# Logs
2 +logs
3 +*.log
4 +npm-debug.log*
5 +yarn-debug.log*
6 +yarn-error.log*
7 +lerna-debug.log*
8 +.pnpm-debug.log*
9 +
10 +# Diagnostic reports (https://nodejs.org/api/report.html)
11 +report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
12 +
13 +# Runtime data
14 +pids
15 +*.pid
16 +*.seed
17 +*.pid.lock
18 +
19 +# Directory for instrumented libs generated by jscoverage/JSCover
20 +lib-cov
21 +
22 +# Coverage directory used by tools like istanbul
23 +coverage
24 +*.lcov
25 +
26 +# nyc test coverage
27 +.nyc_output
28 +
29 +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
30 +.grunt
31 +
32 +# Bower dependency directory (https://bower.io/)
33 +bower_components
34 +
35 +# node-waf configuration
36 +.lock-wscript
37 +
38 +# Compiled binary addons (https://nodejs.org/api/addons.html)
39 +build/Release
40 +
41 +# Dependency directories
42 +node_modules/
43 +jspm_packages/
44 +
45 +# Snowpack dependency directory (https://snowpack.dev/)
46 +web_modules/
47 +
48 +# TypeScript cache
49 +*.tsbuildinfo
50 +
51 +# Optional npm cache directory
52 +.npm
53 +
54 +# Optional eslint cache
55 +.eslintcache
56 +
57 +# Optional stylelint cache
58 +.stylelintcache
59 +
60 +# Microbundle cache
61 +.rpt2_cache/
62 +.rts2_cache_cjs/
63 +.rts2_cache_es/
64 +.rts2_cache_umd/
65 +
66 +# Optional REPL history
67 +.node_repl_history
68 +
69 +# Output of 'npm pack'
70 +*.tgz
71 +
72 +# Yarn Integrity file
73 +.yarn-integrity
74 +
75 +# dotenv environment variables file
76 +.env.development.local
77 +.env.test.local
78 +.env.production.local
79 +.env.local
80 +
81 +# parcel-bundler cache (https://parceljs.org/)
82 +.cache
83 +.parcel-cache
84 +
85 +# Next.js build output
86 +.next
87 +out
88 +
89 +# Nuxt.js build / generate output
90 +.nuxt
91 +dist
92 +
93 +# Gatsby files
94 +.cache/
95 +# Comment in the public line in if your project uses Gatsby and not Next.js
96 +# https://nextjs.org/blog/next-9-1#public-directory-support
97 +# public
98 +
99 +# vuepress build output
100 +.vuepress/dist
101 +
102 +# vuepress v2.x temp and cache directory
103 +.temp
104 +.cache
105 +
106 +# Serverless directories
107 +.serverless/
108 +
109 +# FuseBox cache
110 +.fusebox/
111 +
112 +# DynamoDB Local files
113 +.dynamodb/
114 +
115 +# TernJS port file
116 +.tern-port
117 +
118 +# Stores VSCode versions used for testing VSCode extensions
119 +.vscode-test
120 +
121 +# yarn v2
122 +.yarn/cache
123 +.yarn/unplugged
124 +.yarn/build-state.yml
125 +.yarn/install-state.gz
126 +.pnp.*
...\ No newline at end of file ...\ No newline at end of file
1 -<!DOCTYPE html>
2 -<html>
3 - <head>
4 - <meta charset= "UTF-8">
5 - <title>메인 페이지</title>
6 - </head>
7 - <body>
8 - <h1> 홈페이지에 오신 것을 환영합니다. </h1>
9 - </body>
10 -</html>
1 -<!DOCTYPE html>
2 -<html>
3 - <head>
4 - <title>Geolocation</title>
5 - <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
6 - <link rel="stylesheet" type="text/css" href="./style.css" />
7 - <script src="./index.js"></script>
8 - </head>
9 - <body>
10 - <div id="map"></div>
11 -
12 - <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
13 - <script
14 - src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAguo3zH8vWZJbzXEqyp8D8UvnBh3zX8rQ&callback=initMap&v=weekly"
15 - async
16 - ></script>
17 - </body>
18 -</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <title>Take an Umbrella</title>
5 + <meta charset="UTF-8">
6 + <link rel="stylesheet" type="text/css" href="style.css" />
7 + </head>
8 + <body>
9 + <h1 style="font-family:Nanum Gothic;"> Take an Umbrella </h1>
10 + <h3 style="font-family:Nanum Gothic;"> 철학과 2017101598 맹주환 </h3>
11 + <pre align="center" style="font-family:Nanum Gothic;" font size="20">
12 + 반가워요!
13 + Take an umbrella는 스마트 조명 제품 Philips hue API와 기상청 공공데이터 날씨 API로 구성되어 있어요.
14 + Hue가 연결된 WI-FI로 접속하셔서 아래의 지도로 현재 위치를 조회하시면, 해당 지역 기상 예보를 받아와 조명을 통해 우산을 챙겨야 하는지 알려줘요!
15 + </pre>
16 + <div id="map"></div>
17 + <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
18 +
19 + <h1 style="font-family:Nanum Gothic;"> 당신의 현재 위치 </h1>
20 + <div align="center">현재 위도: <span id="lat"></span></div>
21 + <div align="center">현재 경도: <span id="lng"></span></div>
22 + </body>
23 + <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
24 + <script src="map.js"></script>
25 + <script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap&v=weekly" async> </script>
26 +</html>
...\ No newline at end of file ...\ No newline at end of file
...@@ -7,13 +7,13 @@ let map, infoWindow; ...@@ -7,13 +7,13 @@ let map, infoWindow;
7 function initMap() { 7 function initMap() {
8 map = new google.maps.Map(document.getElementById("map"), { 8 map = new google.maps.Map(document.getElementById("map"), {
9 center: { lat: 37.5642135, lng: 127.0016985 }, 9 center: { lat: 37.5642135, lng: 127.0016985 },
10 - zoom: 6, 10 + zoom: 10,
11 }); 11 });
12 infoWindow = new google.maps.InfoWindow(); 12 infoWindow = new google.maps.InfoWindow();
13 13
14 const locationButton = document.createElement("button"); 14 const locationButton = document.createElement("button");
15 15
16 - locationButton.textContent = "Pan to Current Location"; 16 + locationButton.textContent = "위치 조회 하기";
17 locationButton.classList.add("custom-map-control-button"); 17 locationButton.classList.add("custom-map-control-button");
18 map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton); 18 map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
19 locationButton.addEventListener("click", () => { 19 locationButton.addEventListener("click", () => {
...@@ -25,11 +25,12 @@ function initMap() { ...@@ -25,11 +25,12 @@ function initMap() {
25 lat: position.coords.latitude, 25 lat: position.coords.latitude,
26 lng: position.coords.longitude, 26 lng: position.coords.longitude,
27 }; 27 };
28 - alert(pos.lat , pos.lng);
29 infoWindow.setPosition(pos); 28 infoWindow.setPosition(pos);
30 - infoWindow.setContent("Location found."); 29 + infoWindow.setContent("위치를 찾았습니다.");
31 infoWindow.open(map); 30 infoWindow.open(map);
32 map.setCenter(pos); 31 map.setCenter(pos);
32 + document.getElementById("lat").innerHTML = pos.lat;
33 + document.getElementById("lng").innerHTML = pos.lng;
33 34
34 }, 35 },
35 () => { 36 () => {
...@@ -47,8 +48,8 @@ function handleLocationError(browserHasGeolocation, infoWindow, pos) { ...@@ -47,8 +48,8 @@ function handleLocationError(browserHasGeolocation, infoWindow, pos) {
47 infoWindow.setPosition(pos); 48 infoWindow.setPosition(pos);
48 infoWindow.setContent( 49 infoWindow.setContent(
49 browserHasGeolocation 50 browserHasGeolocation
50 - ? "Error: The Geolocation service failed." 51 + ? "Error: 위치 조회 서비스가 실패하였습니다."
51 - : "Error: Your browser doesn't support geolocation." 52 + : "Error: 브라우저가 위치 조회 기능을 지원하지 않습니다."
52 ); 53 );
53 infoWindow.open(map); 54 infoWindow.open(map);
54 } 55 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -9,7 +9,7 @@ app.use(bodyParser.urlencoded({extended:false})); ...@@ -9,7 +9,7 @@ app.use(bodyParser.urlencoded({extended:false}));
9 //application/x=www-form-urlencoded를 app/json형태로 파싱 -> POST로 접근 가능. 9 //application/x=www-form-urlencoded를 app/json형태로 파싱 -> POST로 접근 가능.
10 app.use(bodyParser.json()); 10 app.use(bodyParser.json());
11 11
12 -app.use('/html', serveStatic(path.join(__dirname,'HTML'))); 12 +app.use('/', serveStatic(path.join(__dirname,'HTML')));
13 13
14 //임의의 포트 10000, 접속 주소 localhost:10000/html/*.html 형태 14 //임의의 포트 10000, 접속 주소 localhost:10000/html/*.html 형태
15 http.createServer(app).listen(port, function(){ 15 http.createServer(app).listen(port, function(){
......
1 /* Always set the map height explicitly to define the size of the div 1 /* Always set the map height explicitly to define the size of the div
2 * element that contains the map. */ 2 * element that contains the map. */
3 +
4 + @import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);
5 + h1 { text-align: center; }
6 + h2 { text-align: center; }
7 + h3 { text-align: center; }
8 +
3 #map { 9 #map {
4 - height: 100%; 10 + width:600px;
5 - } 11 + height:400px;
12 + margin: 0 auto;
6 13
7 - /* Optional: Makes the sample page fill the window. */
8 - html,
9 - body {
10 - height: 100%;
11 - margin: 0;
12 - padding: 0;
13 - }
14 14
15 + }
15 .custom-map-control-button { 16 .custom-map-control-button {
16 background-color: #fff; 17 background-color: #fff;
17 border: 0; 18 border: 0;
......