info 페이지 구현, countKcal수정, template.js 디자인 수정

양효빈
Commit aaa6fa041676a25d61cbe896fc22acb4a8aa2fa8 aaa6fa04 1 parent 0d30c2cd
Showing 8 changed files with 46 additions and 19 deletions
lib/countKcal.js
lib/foodInfo.js
lib/health_image.jpg
lib/home.js
lib/info.js
lib/searchGym.js
lib/template.js
main.js
--- a/lib/countKcal.js
View file @aaa6fa0
+++ b/lib/countKcal.js
View file @aaa6fa0
--- a/lib/foodInfo.js
View file @aaa6fa0
+++ b/lib/foodInfo.js
View file @aaa6fa0
@@ -5,18 +5,15 @@ exports.foodInfo = function(request, response){
     var title = '음식 영양정보';
     var description = '음식을 검색하면 음식의 칼로리, 탄수화물, 단백질, 지방, 나트륨의 정보를 알려드립니다!';
     var html = template.html(title,`
-    <br><br><br>
         <h2>${title}</h2>
         <p>${description}</p>
         <form action="/foodInfo_search" method="post">
             <input type = 'text' name = 'search' placeholder = '검색어 입력' maxlength = 255 value = "" autocomplete = "off">
             <button type = "submit" name = "click">검색</button>
         </form>
-
     `);
     response.writeHead(200);
     response.end(html);
-
 }
 function foodTable(foodInfo, list, num){
     var tag = '';
@@ -61,7 +58,6 @@ function foodTable(foodInfo, list, num){
     `;
     return tag;
 }
-
 exports.foodInfo_search = function(request, response){
     var body = ''; 
     request.on('data', function(data){
@@ -85,7 +81,6 @@ exports.foodInfo_search = function(request, response){
                 }
             }
             var html = template.html(title,`
-            <br><br><br>
                 <h2>${title}</h2>
                 <p>${description}</p>
                 <form action="/foodInfo_search" method="post">
--- a/lib/health_image.jpg deleted 100644 → 0
View file @0d30c2c
+++ b/lib/health_image.jpg deleted 100644 → 0
View file @0d30c2c
--- a/lib/home.js
View file @aaa6fa0
+++ b/lib/home.js
View file @aaa6fa0
@@ -3,9 +3,6 @@ exports.home = function(request, response){
     var title = 'HealthProtector란?';
     var description = '개개인의 신체 정보에 따라 일일 권장 섭취량을 알려주고, 좋아하는 음식을 검색하면 영양정보를 알려주는 사이트 입니다.';
     var html = template.html(title,`
-
-    <br><br><br>
-    
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
@@ -14,7 +11,6 @@ exports.home = function(request, response){
     <style type="text/css">
             div{
-                @import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR&display=swap');
                 text-align:center;
                 border:0px solid none;
                 margin:0px 0px 0px 0px;
@@ -28,8 +24,6 @@ exports.home = function(request, response){
             }
             </div>
     </style>
-
-
     <div style= font-size:40px;background-image:url("https://source.unsplash.com/jFCViYFYcus");padding:50px;>
         <h1 style=font-family: 'Do Hyeon', sans-serif;><a href="/"><font color="white">HealthProtector</font></a></h1>
@@ -38,9 +32,7 @@ exports.home = function(request, response){
     <div style= font-size:20px;text-align:left;width: 100%;float:left:>
         <h2><font color="black">&nbsp &nbsp &nbspOur Services</font></h2>
     </div>
-
-
     <div style= width:30%;float:left;padding:5px;>
         <div style="color : gray";>
         <i class="fas fa-calculator fa-3x"></i>
--- a/lib/info.js 0 → 100644
View file @aaa6fa0
+++ b/lib/info.js 0 → 100644
View file @aaa6fa0
+var template = require('./template.js');
+exports.info = function(request, response){
+    var title = 'HealthProtector란?';
+    var description = '개개인의 신체 정보에 따라 일일 권장 섭취량을 알려주고, 좋아하는 음식을 검색하면 영양정보를 알려주는 사이트 입니다.';
+    var html = template.html(title,`
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
+    </style>
+    <style type="text/css">
+        div{
+            text-align:center;
+            border:0px solid none;
+            margin:0px 0px 0px 0px;
+            
+        }
+        a { text-decoration:none; }
+        a:visited { text-decoration: none; }
+        a:hover { text-decoration: none; }
+        a:focus { text-decoration: none; }
+        a:hover, a:active { text-decoration: none; }
+        }
+        </div>
+    </style>
+    <br><br><br>
+    <div style= font-size:20px; "font-family: 'Do Hyeon', sans-serif;">
+        <h2>${title}</h2>
+        <h3>${description}</h3>
+    </div>
+
+
+
+    ` );  
+    
+    response.writeHead(200);
+    response.end(html);
+}
\ No newline at end of file
--- a/lib/searchGym.js
View file @aaa6fa0
+++ b/lib/searchGym.js
View file @aaa6fa0
@@ -7,9 +7,7 @@ exports.searchGym = function(request, response){
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
     </style>
-    <br><br>
     <div style= "font-size:25px; background-color:#ffffff">
-    
         <h2><font color="black">${title}<br><div style= "font-size:20px;font-family: 'Do Hyeon', sans-serif;">${description}</font></div></h2>
         </div>
         <style>
--- a/lib/template.js
View file @aaa6fa0
+++ b/lib/template.js
View file @aaa6fa0
@@ -13,12 +13,13 @@ module.exports = {
                     src="https://code.jquery.com/jquery-3.5.1.js"
                     integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
                     crossorigin="anonymous"></script>
+                <script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
+
             </head>
             <body>
             <style type="text/css">
             div{
-
                 text-align:center;
                 border:1px solid none;
                 margin:0px 0px 0px 0px;
@@ -28,17 +29,17 @@ module.exports = {
             }
             </div>
             </style>
-
             <div style="font-family: 'Do Hyeon', sans-serif;";>
                 <h3 style=width:180px;float:left;><a href="/"><font color="black">HealthProtector</font></a></h3>
                 <h3 style=width:120px;float:left;><a href="/countKcal"><font color="black">칼로리 계산</font></a></h3>
                 <h3 style=width:120px;float:left;><a href="/searchGym"><font color="black">헬스장 찾기</a></h3> 
                 <h3 style=width:120px;float:left;><a href="/foodInfo"><font color="black">식품 영양정보</font></a></h3>
-                <h3 style=width:150px;float:right;><a href="/"><font color="black">About us</font></a></h3>
+                
+                <h3 style=width:150px;float:right;><i class="fas fa-info-circle fa-3x"style="font-size: 20px";></i><a href="/info"><font color="black">&nbsp;Info</font></a></h3>
             </div>
-              
+            <hr width = "100%" color ="#213b19" style=margin:0px;>
                 ${body}
             <div style= width:100%;font-size:9px;position:fixed;bottom:0;float:left;padding:0px;background-color:#213b19;>
                 <h5><font color="white" font size = 2px;>Copyright(C) HealThProtector 2020</font></h5>
--- a/main.js
View file @aaa6fa0
+++ b/main.js
View file @aaa6fa0
@@ -4,6 +4,8 @@ var home = require('./lib/home.js');
 var searchGym = require('./lib/searchGym.js');
 var foodInfo = require('./lib/foodInfo.js');
 var countKcal = require('./lib/countKcal.js');
+var info = require('./lib/info.js');
+
 /*
 const style={
     backgrondColor = 'blue',
@@ -43,6 +45,9 @@ var app = http.createServer(function(request,response){
     else if(pathname === '/countKcal_food_process'){
         countKcal.countKcal_food_process(request,response);
     }
+    else if(pathname === '/info'){
+        info.info(request,response);
+    }
     else{
     response.writeHead(404);
     response.end("Not found");