고원빈 / weather

Go to a project
Toggle navigation Toggle navigation pinning
GyuhoLee
b6d18fd0 1 parent 3679f4ac

[Update] complete

Inline Side-by-side
Showing 10 changed files with 131 additions and 35 deletions
1 -var express = require('express'); 1 +var jsdom = require("jsdom");
2 +const { JSDOM } = jsdom;
3 +const { window } = new JSDOM();
4 +const { document } = (new JSDOM('')).window;
5 +var $ = jQuery = require('jquery')(window);
6 +
7 +var express = require('express');
2 var app = express(); 8 var app = express();
9 +const bodyParser = require('body-parser');
3 10
4 app.set("view engine","ejs"); 11 app.set("view engine","ejs");
5 app.use(express.static(__dirname + '/public')); 12 app.use(express.static(__dirname + '/public'));
6 13
7 app.get("/", function(req,res){ 14 app.get("/", function(req,res){
8 - res.render("index", {low:arr[0],middle:arr[1],high:arr[2]}); 15 + res.render("index", {low:arr[0],middle:arr[1],high:arr[2],ment:ment, cloth:cloth});
9 -}); 16 +});
10 17
11 -var location; 18 +app.get("/data", function(req, res) {
12 -app.get("/:location", function(req,res){ 19 + res.send({
13 - location = req.params.location; 20 + low: arr[0],
14 - res.render("index", {low:arr[0],middle:arr[1],high:arr[2]}); 21 + middle: arr[2],
22 + high: arr[1],
23 + ment: ment,
24 + cloth: cloth
25 + });
15 }); 26 });
16 27
17 app.listen(8080, function(){ 28 app.listen(8080, function(){
...@@ -28,11 +39,41 @@ var options = { ...@@ -28,11 +39,41 @@ var options = {
28 args: ["영통1동"] 39 args: ["영통1동"]
29 }; 40 };
30 41
42 +/*
31 var arr = new Array(); 43 var arr = new Array();
32 var test = new PythonShell('recommend_clothes.py', options); 44 var test = new PythonShell('recommend_clothes.py', options);
33 -var data= location; 45 +var data;
34 test.send(data); 46 test.send(data);
35 test.on('message',function(message){ 47 test.on('message',function(message){
36 arr.push(message); 48 arr.push(message);
37 console.log(arr); 49 console.log(arr);
38 -})
...\ No newline at end of file ...\ No newline at end of file
50 +})
51 +*/
52 +
53 +
54 +var arr = new Array(1, 2, 3);
55 +var clothes;
56 +var cloth = new Array();
57 +var ment = "";
58 +
59 +app.use(bodyParser.urlencoded({extended: false}));
60 +app.use(bodyParser.json());
61 +
62 +app.post("/location", function(req, res){
63 + while(arr.length){
64 + arr.pop();
65 + }
66 + var data = req.body.location;
67 + var test = new PythonShell('recommend_clothes.py', options);
68 + test.send(data);
69 + test.on('message',function(message){
70 + arr.push(message);
71 + console.log(arr);
72 + if(arr.length == 5){
73 + ment = arr[4];
74 + clothes = arr[3];
75 + cloth = clothes.split(',');
76 + res.json({ok:true});
77 + }
78 + })
79 +});
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -37,3 +37,17 @@ body{ ...@@ -37,3 +37,17 @@ body{
37 font-size: 55px; 37 font-size: 55px;
38 } 38 }
39 39
40 +.ment{
41 + font-size: 35px;
42 + padding: 50px 0px 50px 0px;
43 + margin: 0px 150px 20px 150px;
44 + border: 5px solid #94661c;
45 +}
46 +
47 +.cloth{
48 + width: 230px;
49 + height: 230px;
50 + margin: 20px 40px 0px 40px;
51 + border-radius: 100px;
52 + border: solid 1px black;
53 +}
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -66,11 +66,11 @@ print(min(sens_temper), "\n", max(sens_temper), "\n", sum(sens_temper)//8) ...@@ -66,11 +66,11 @@ print(min(sens_temper), "\n", max(sens_temper), "\n", sum(sens_temper)//8)
66 66
67 if max(sens_temper) <= 8: 67 if max(sens_temper) <= 8:
68 if min(sens_temper) >= -3 and min(sens_temper) <=2: 68 if min(sens_temper) >= -3 and min(sens_temper) <=2:
69 - print("패딩, 겨울야상, 양털자켓, 폴라티, 니트, 기모바지") 69 + print("padding,yasang,jacket,pola,neet,gimo")
70 - print("쌀쌀한 날씨입니다. 생각보다 추워요!") 70 + print("쌀쌀한 날씨입니다.\n생각보다 추워요!")
71 cold_danger=1 71 cold_danger=1
72 elif min(sens_temper) < -3 and min(sens_temper)>=-10: 72 elif min(sens_temper) < -3 and min(sens_temper)>=-10:
73 - print("패딩, 겨울야상, 양털자켓, 폴라티, 니트, 기모바지") 73 + print("padding,yasang,jacket,pola,neet,gimo")
74 print("마스크, 목도리, 장갑을 착용하세요!") 74 print("마스크, 목도리, 장갑을 착용하세요!")
75 cold_danger=2 75 cold_danger=2
76 if min(sens_temper) < -10 and min(sens_temper)>=-15: 76 if min(sens_temper) < -10 and min(sens_temper)>=-15:
...@@ -82,36 +82,34 @@ if max(sens_temper) <= 8: ...@@ -82,36 +82,34 @@ if max(sens_temper) <= 8:
82 print("외출시 내복 및 옷을 겹겹이 입어 주시고 많이 움직여 주세요") 82 print("외출시 내복 및 옷을 겹겹이 입어 주시고 많이 움직여 주세요")
83 cold_danger=4 83 cold_danger=4
84 elif min(sens_temper) > 2: 84 elif min(sens_temper) > 2:
85 - print("패딩, 겨울야상, 양털자켓, 폴라티, 니트, 기모바지, 스타킹") 85 + print("패딩,겨울야상,양털자켓,폴라티,니트,기모바지")
86 print("외투 안에는 가벼운 옷을 추천해요!") 86 print("외투 안에는 가벼운 옷을 추천해요!")
87 87
88 88
89 -if max(sens_temper) >= 8 and max(sens_temper) <= 13: 89 +if max(sens_temper) > 8 and max(sens_temper) <= 13:
90 - print("코트, 가죽자켓, 맨투맨, 티셔츠(사계절), 바지(사계절)") 90 + print("코트,가죽자켓,맨투맨,티셔츠(사계절),바지(사계절)")
91 if min(sens_temper) < 3: 91 if min(sens_temper) < 3:
92 - print("일교차에 유의하세요! 추위에 약한 분들은 외투 하나 더 챙기세요!") 92 + print("일교차에 유의하세요!\n추위에 약한 분들은 외투 하나 더 챙기세요!")
93 93
94 elif max(sens_temper) >= 13 and max(sens_temper) <= 15: 94 elif max(sens_temper) >= 13 and max(sens_temper) <= 15:
95 - print("트렌치코트, 간절기 야상, 후드티, 여러겹 레이어드") 95 + print("트렌치코트,간절기 야상,후드티,여러겹 레이어드")
96 if min(sens_temper) < 5: 96 if min(sens_temper) < 5:
97 - print("일교차에 유의하세요! 추위에 약한 분들은 외투 하나 더 챙기세요!") 97 + print("일교차에 유의하세요!\n추위에 약한 분들은 외투 하나 더 챙기세요!")
98 98
99 elif max(sens_temper) >= 12 and max(sens_temper) <= 16: 99 elif max(sens_temper) >= 12 and max(sens_temper) <= 16:
100 - print("자켓, 셔츠, 가디건, 후드(사계절)") 100 + print("자켓,셔츠,가디건,후드(사계절)")
101 if min(sens_temper) < 6: 101 if min(sens_temper) < 6:
102 - print("일교차에 유의하세요! 추위에 약한 분들은 외투 하나 더 챙기세요!") 102 + print("일교차에 유의하세요!\n추위에 약한 분들은 외투 하나 더 챙기세요!")
103 -""" 103 +
104 elif max(sens_temper) >= 17 and max(sens_temper) <= 19: 104 elif max(sens_temper) >= 17 and max(sens_temper) <= 19:
105 - print("가디건, 니트, 맨투맨, 후드티, 면바지, 슬랙스, 원피스") 105 + print("가디건,니트,맨투맨,후드티,면바지,슬랙스,원피스")
106 if min(sens_temper) < 9: 106 if min(sens_temper) < 9:
107 - print("일교차에 유의하세요! 얇은 외투 챙겨가세요!") 107 + print("일교차에 유의하세요!\n얇은 외투 챙겨가세요!")
108 108
109 elif max(sens_temper) >= 20 and max(sens_temper) <= 22: 109 elif max(sens_temper) >= 20 and max(sens_temper) <= 22:
110 - print("긴팔티, 후드티, 면바지, 슬랙스") 110 + print("긴팔티,후드티,면바지,슬랙스")
111 if min(sens_temper) < 11: 111 if min(sens_temper) < 11:
112 - print("일교차에 유의하세요! 얇은 외투 챙겨가세요!") 112 + print("일교차에 유의하세요!\n얇은 외투 챙겨가세요!")
113 113
114 elif max(sens_temper) >= 23 and max(sens_temper) <= 26: 114 elif max(sens_temper) >= 23 and max(sens_temper) <= 26:
115 - print("반팔티, 얇은 셔츠, 얇은 긴팔티, 반바지, 면바지") 115 + print("반팔티,얇은 셔츠,얇은 긴팔티,반바지,면바지")
116 -
117 -"""
......
...@@ -8,6 +8,9 @@ ...@@ -8,6 +8,9 @@
8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
9 integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 9 integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
10 <link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap" rel="stylesheet"> 10 <link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap" rel="stylesheet">
11 + <script src="https://code.jquery.com/jquery-3.3.1.min.js"
12 + integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
13 + crossorigin="anonymous"></script>
11 </head> 14 </head>
12 15
13 <body> 16 <body>
...@@ -16,16 +19,19 @@ ...@@ -16,16 +19,19 @@
16 <img src="./image/logo.png" style="height:250px;" /> 19 <img src="./image/logo.png" style="height:250px;" />
17 </a> 20 </a>
18 </nav> 21 </nav>
22 + <div class="loading" style="display:none; font-size: 100px; text-align:center; margin-top: 50%;">
23 + <div class="loading_message">LOADING...</div>
24 + </div>
19 <div class="first"> 25 <div class="first">
20 <div class="main"> 26 <div class="main">
21 <img src="./image/thermometer.jpg" class="icon"> 27 <img src="./image/thermometer.jpg" class="icon">
22 </div> 28 </div>
23 <div class="sub"> 29 <div class="sub">
24 <input type="text" id="location_input" value="영통1동" autofocus="true"> 30 <input type="text" id="location_input" value="영통1동" autofocus="true">
25 - <button id="location_button" type="button" onclick="button_click()">입력</button> 31 + <input id="location_button" type="submit" value="입력">
26 </div> 32 </div>
27 </div> 33 </div>
28 - <div class="second"> 34 + <div class="second" style="display: none;">
29 <div class="main"> 35 <div class="main">
30 <span class="result_icon"> 36 <span class="result_icon">
31 <div>최저</div> 37 <div>최저</div>
...@@ -40,18 +46,55 @@ ...@@ -40,18 +46,55 @@
40 <div class="high temper"><%=high%>ºC</div> 46 <div class="high temper"><%=high%>ºC</div>
41 </span> 47 </span>
42 </div> 48 </div>
43 - <div class="sub"> 49 + <div class="sub" style="margin: 100px 0px 100px 0px;">
50 + <div class="ment"><%=ment%></div>
44 </div> 51 </div>
45 - 52 + <div style="text-align: center;">
53 + <img class="cloth cloth0" />
54 + <img class="cloth cloth1" />
55 + <img class="cloth cloth2" />
56 + <img class="cloth cloth3" />
57 + <img class="cloth cloth4" />
58 + <img class="cloth cloth5" />
59 + </div>
60 + </div>
61 +
62 + <script>
63 + $("#location_button").click(function(){
64 + $(".first").hide();
65 + $(".loading").show();
66 + $.ajax({
67 + url: '/location',
68 + async: true,
69 + type: 'POST',
70 + data:{
71 + location: $("#location_input").val()
72 + },
73 + dataType: 'json',
74 + success: function(data) {
75 + console.log(data);
76 + $.get('/data', function(data) {
77 + $(".low").html(data.low + "ºC");
78 + $(".middle").html(data.middle + "ºC");
79 + $(".high").html(data.high + "ºC");
80 + $(".ment").html(data.ment);
81 + for(var i = 0; i < 6; i++){
82 + $(".cloth" + i).attr("src", "image/"+ data.cloth[i]+".jpg");
83 + }
84 + $(".loading").hide();
85 + $(".second").show();
86 + $(".first").hide();
87 + });
88 + }
89 + });
90 + });
91 + </script>
46 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 92 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
47 integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 93 integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
48 crossorigin="anonymous"></script> 94 crossorigin="anonymous"></script>
49 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 95 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
50 integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 96 integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
51 crossorigin="anonymous"></script> 97 crossorigin="anonymous"></script>
52 - <script src="https://code.jquery.com/jquery-3.3.1.min.js"
53 - integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
54 - crossorigin="anonymous"></script>
55 <script src = "/js/agency.js"></script> 98 <script src = "/js/agency.js"></script>
56 </body> 99 </body>
57 100
......