김재현 / open-source-project-2017-02

Go to a project
Toggle navigation Toggle navigation pinning
김재현
6bba7932 2 parents 63dde196 69751c47

Merge

Inline Side-by-side
Showing 6 changed files with 344 additions and 11 deletions
1 -body { 1 +body,
2 - padding: 50px;
3 - font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
4 -}
5 a { 2 a {
6 - color: #00b7ff; 3 + color: #808080;
4 +}
5 +ul.sidenav {
6 + list-style-type: none;
7 + margin: 0;
8 + padding: 0;
9 + width: 10%;
10 + background-color: #f1f1f1;
11 + height: 100%;
12 + position: fixed;
13 + overflow: auto;
14 +}
15 +ul.sidenav li a {
16 + display: block;
17 + color: #000;
18 + padding: 8px 16px;
19 + text-decoration: none;
20 + transition: 0.3s;
21 +}
22 +ul.sidenav li a.active {
23 + background-color: #4caf50;
24 + color: #fff;
25 +}
26 +ul.sidenav li a:hover:not(.active) {
27 + background-color: #555;
28 + color: #fff;
29 +}
30 +#content {
31 + margin-left: 25%;
32 + padding: 1px 16px;
33 + height: 100%;
34 +}
35 +table {
36 + display: block;
37 + width: 70%;
38 + height: 100%;
39 +}
40 +td {
41 + text-align: center;
42 + display: block;
43 +}
44 +.bold {
45 + color: #ffc0cb;
46 + font-size: 100%;
47 +}
48 +.small {
49 + color: #808080;
50 + font-size: 8pt;
7 } 51 }
8 #map { 52 #map {
9 width: 100%; 53 width: 100%;
......
1 body 1 body
2 - padding: 50px 2 +
3 - font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
4 a 3 a
5 - color: #00B7FF 4 + color: gray;
5 +
6 +ul.sidenav
7 + list-style-type: none;
8 + margin: 0;
9 + padding: 0;
10 + width: 10%;
11 + background-color: #f1f1f1;
12 + height: 100%;
13 + position : fixed;
14 + overflow : auto;
15 +
16 +ul.sidenav li a
17 + display: block;
18 + color: #000;
19 + padding: 8px 16px;
20 + text-decoration: none;
21 + transition: 0.3s;
22 +
23 +
24 +ul.sidenav li a.active
25 + background-color: #4CAF50;
26 + color: white;
27 +
28 +
29 +ul.sidenav li a:hover:not(.active)
30 + background-color: #555;
31 + color: white;
32 +
33 +
34 +#content
35 +
36 + margin-left: 25%;
37 + padding: 1px 16px;
38 + height: 100%;
39 +
40 +table
41 + display : block
42 + width : 70%
43 + height : 100%
44 +
45 +
46 +td
47 + text-align : center;
48 + display : block
49 +
50 +.bold
51 + color : pink;
52 + font-size : 100%;
53 +.small
54 + color : grey;
55 + font-size : 8pt;
......
...@@ -2,12 +2,48 @@ var express = require('express'); ...@@ -2,12 +2,48 @@ var express = require('express');
2 var router = express.Router(); 2 var router = express.Router();
3 3
4 /* GET home page. */ 4 /* GET home page. */
5 -router.get('/', function(req, res, next) { 5 +router.get('/index', function(req, res, next) {
6 res.render('index', { title: 'Express' }); 6 res.render('index', { title: 'Express' });
7 }); 7 });
8 8
9 -router.get('/test', function(req, res, next) { 9 +router.get('/', function(req, res, next) {
10 - res.render('test', { title: '맛집 견문록' }); 10 + res.render('main', { title: '맛집 견문록' });
11 +});
12 +
13 +
14 +router.get('/map', function(req, res, next){
15 +
16 + res.render('map', {title: '맛집 도장찍기'});
17 +
18 +});
19 +router.get('/home', function(req,res,next){
20 +
21 + res.render('main', {title: '맛집견문록'});
11 }); 22 });
23 +router.get('/mybook', function(req, res, next){
24 +
25 + var rows = new Array();
26 +
27 + var temp1 = {
28 +
29 + name : "신사동떡볶이",
30 + place : "서울특별시 영등포구 신길7동"
31 + }
12 32
33 + var temp2 ={name : "동해떡국집", place : "서교동 1234"}
34 + var temp3 = {name : "앗뜨거어묵국물", place : "용인시 기흥구 어디일까"}
35 + var temp5 = {name : "와장창창", place : "윌집앞"}
36 + var temp6 = {name : "맛있는 짜장면", place : "너네집앞"}
37 + var temp4 = {name : "네모네모 오징어", place : "영등포경찰서"}
38 +
39 + rows.push(temp1);
40 + rows.push(temp2);
41 + rows.push(temp3);
42 + rows.push(temp4);
43 + rows.push(temp5);
44 + rows.push(temp6);
45 +
46 + res.render('mybook', {title: '견문록 보기', rows : rows});
47 +
48 +});
13 module.exports = router; 49 module.exports = router;
......
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <title><%= title %></title>
5 + <link rel='stylesheet' href='/stylesheets/style.css'/>
6 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
7 + </head>
8 + <body>
9 +
10 + <script>
11 +
12 + $(document).ready(function() {
13 + $('.sidenav').hide();
14 +
15 + $('#show').click(function() {
16 +
17 + $('.sidenav').slideToggle("fast");
18 + });
19 + });
20 +
21 +
22 + </script>
23 +
24 +
25 +
26 +
27 + <div id ="menu">
28 + <div id ="show">clickmenu</div>
29 +
30 + <ul class="sidenav">
31 + <li><a class="active" href="home">home</a></li>
32 + <li><a href="map">맛집도장찍기</a></li>
33 + <li><a href="mybook">견문록확인</a></li>
34 +
35 + </ul>
36 +
37 +
38 + </div>
39 +
40 +
41 + <div id = "header"> </div>
42 +
43 + <div id ="content">
44 +
45 + <h1><%= title %></h1>
46 + <p>Welcome to <%= title %></p>
47 +
48 +
49 +
50 + </div>
51 +
52 + <div id ="footer"></div>
53 +
54 +
55 +
56 +
57 + </body>
58 +
59 +</html>
1 +<html>
2 + <head>
3 + <title><%= title %></title>
4 + <link rel='stylesheet' href='/stylesheets/style.css'/>
5 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
6 + </head>
7 + <body>
8 +
9 + <script>
10 +
11 + $(document).ready(function() {
12 + $('.sidenav').hide();
13 +
14 + $('#show').click(function() {
15 +
16 + $('.sidenav').slideToggle("fast");
17 + });
18 + });
19 +
20 +
21 + </script>
22 +
23 +
24 +
25 +
26 + <div id ="menu">
27 + <div id ="show">clickmenu</div>
28 +
29 + <ul class="sidenav">
30 + <li><a class="active" href="home">home</a></li>
31 + <li><a href="map">맛집도장찍기</a></li>
32 + <li><a href="mybook">견문록확인</a></li>
33 +
34 + </ul>
35 +
36 +
37 + </div>
38 +
39 +
40 + <div id = "header"> </div>
41 +
42 + <div id ="content">
43 +
44 + <h1>구글지도보기</h1>
45 + 탐방한 맛집을 클릭하면 쿠폰북에 기록됩니다
46 +
47 + </div>
48 +
49 + <div id ="footer"></div>
50 +
51 +
52 +
53 +
54 + </body>
55 +
56 +</html>
1 +<html>
2 + <head>
3 + <title><%= title %></title>
4 + <link rel='stylesheet' href='/stylesheets/style.css'/>
5 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
6 + </head>
7 + <body>
8 +
9 + <script>
10 +
11 + $(document).ready(function() {
12 + $('.sidenav').hide();
13 +
14 + $('#show').click(function() {
15 +
16 + $('.sidenav').slideToggle("fast");
17 + });
18 + });
19 +
20 +
21 + </script>
22 +
23 +
24 +
25 +
26 + <div id ="menu">
27 + <div id ="show">clickmenu</div>
28 +
29 + <ul class="sidenav">
30 + <li><a class="active" href="home">home</a></li>
31 + <li><a href="map">맛집도장찍기</a></li>
32 + <li><a href="mybook">견문록확인</a></li>
33 +
34 + </ul>
35 +
36 +
37 + </div>
38 +
39 +
40 + <div id = "header"> </div>
41 +
42 + <div id ="content">
43 +
44 + <table border="1">
45 +
46 +
47 + <%
48 + for( var i=0; i<rows.length; i++)
49 + {
50 +
51 +
52 + for( var j = 0; j<3; j++){
53 + num = i * 3 + j;
54 + var item = rows[num];
55 +
56 +
57 +
58 + %>
59 + <tr>
60 + <td><p class="bold"><%=num%> : <%=item.name%></p>
61 +
62 + <p class="small"><%=item.place%></p></td>
63 +
64 +
65 + <% } %>
66 +
67 + </tr>
68 +
69 +
70 + <%
71 + }
72 + %>
73 + </table>
74 +
75 +
76 +
77 +
78 +
79 + </div>
80 +
81 + <div id ="footer"></div>
82 +
83 +
84 +
85 +
86 + </body>
87 +
88 +</html>