김유현 / How much are you earning now

Go to a project
Toggle navigation Toggle navigation pinning
김유현
4f0aa71a 1 parent 3ad6cd8c

Modify scss

Inline Side-by-side
Showing 9 changed files with 182 additions and 246 deletions
1 node_modules/ 1 node_modules/
2 *.json 2 *.json
3 +public/css
...\ No newline at end of file ...\ No newline at end of file
......
1 -var express = require('express'); 1 +// index.js
2 +
3 +var express = require('express');
2 var app = express(); 4 var app = express();
3 5
4 -app.use(express.static(__dirname + '/public')); // 1 6 +
7 +app.set("view engine","ejs"); // 1
8 +app.use(express.static(__dirname + '/public'));
9 +
10 +// 2
11 +app.use(express.json())
12 +
13 +app.get("/index", function(req,res){
14 + res.render("index");
15 +});
16 +
17 +app.get('/graph', function(req, res){
18 + var payDay = req.query.payDay
19 + var salary = req.query.salary
20 + var workDay = req.query.workDay
21 + var workTime = req.query.workTime
22 + var offWork = req.query.offWork
23 + console.log(payDay, salary,workDay,workTime, offWork);
24 + res.send(`payDay : ${payDay}, salary : ${salary}, workDay : ${workDay}, workTime : ${workTime}, offWork : ${offWork}`);
25 + })
5 26
6 app.listen(3000, function(){ 27 app.listen(3000, function(){
7 console.log('Server On!'); 28 console.log('Server On!');
......
1 B@import url(https://fonts.googleapis.com/css?family=Exo); 1 B@import url(https://fonts.googleapis.com/css?family=Exo);
......
...@@ -131,6 +131,20 @@ a.button { ...@@ -131,6 +131,20 @@ a.button {
131 border-color: $green; 131 border-color: $green;
132 } 132 }
133 } 133 }
134 + .button2 {
135 + border: 1px solid $white;
136 + background-color: transparent;
137 + padding: 10px 20px;
138 + transition: all .4s;
139 + color: $white;
140 + font-family: 'Exo', sans-serif;
141 + cursor: pointer;
142 +
143 + &:hover {
144 + color: $green;
145 + border-color: $green;
146 + }
147 + }
134 } 148 }
135 149
136 .input-box { 150 .input-box {
......
No preview for this file type
1 -@import url(https://fonts.googleapis.com/css?family=Exo);
2 -
3 -$white: #fff;
4 -$black: #000;
5 -$main-black: #333;
6 -$green: #3ac28c;
7 -$lucifer: #666;
8 -
9 -html,body {
10 - font-family: 'Exo', sans-serif;
11 - background-color: $main-black;
12 - height: 100%;
13 - width: 100%;
14 - position: relative;
15 -}
16 -
17 -a.button {
18 - text-decoration: none;
19 - padding: 20px;
20 - display: inline-block;
21 - border: 1px solid $white;
22 - position: absolute;
23 - top: 50%;
24 - left: 50%;
25 - color: $white;
26 - transform: translate(-50%,-50%);
27 - transition: all .4s;
28 -
29 - &:hover {
30 - border-color: $green;
31 - color: $green;
32 - }
33 -}
34 -
35 -.modal-overlay {
36 - background: $main-black;
37 - bottom: 0;
38 - left: 0;
39 - position: fixed;
40 - right: 0;
41 - text-align: center;
42 - text-shadow: none;
43 - top: 0;
44 - opacity: 0;
45 - transform: scale(.5);
46 - transition: all .75s cubic-bezier(.68, -.55, .265, 1.55);
47 - z-index: -100;
48 -}
49 -
50 -.modal-wrapper {
51 - padding: 1em 0;
52 - position: relative;
53 - margin: 0 auto;
54 - max-width: 500px;
55 - width: 90%;
56 -
57 - .close {
58 - padding: 14px;
59 - position: absolute;
60 - right: .5em;
61 - top: 2.5em;
62 - width: 1.5em;
63 - cursor: pointer;
64 -
65 - &:before,
66 - &:after {
67 - content: '';
68 - position: absolute;
69 - display: block;
70 - width: 2px;
71 - height: 36px;
72 - background-color: $green;
73 - top:-5px;
74 - }
75 -
76 - &:before {
77 - transform: rotate(45deg);
78 - }
79 -
80 - &:after {
81 - transform: rotate(-45deg);
82 - }
83 - }
84 -
85 - h2 {
86 - color: $white;
87 - margin-bottom: 1em;
88 - text-transform: uppercase;
89 - }
90 -}
91 -
92 -@media (min-width: 50em) {
93 - .modal-wrapper {
94 - padding: 1.75em;
95 - }
96 -}
97 -@media (min-height: 37.5em) {
98 - .modal-wrapper {
99 - left: 50%;
100 - position: absolute;
101 - top: 50%;
102 - transform: translate(-50%, -50%);
103 - }
104 -}
105 -
106 -.active + .modal-overlay {
107 - opacity: 1;
108 - transform: scale(1);
109 - z-index: 800;
110 -}
111 -
112 -.message-form {
113 - clear: both;
114 - height: 350px;
115 -
116 - .input-button {
117 - text-align: center;
118 - padding: 20px;
119 -
120 - .button {
121 - border: 1px solid $white;
122 - background-color: transparent;
123 - padding: 10px 20px;
124 - transition: all .4s;
125 - color: $white;
126 - font-family: 'Exo', sans-serif;
127 - cursor: pointer;
128 -
129 - &:hover {
130 - color: $green;
131 - border-color: $green;
132 - }
133 - }
134 - }
135 -
136 - .input-box {
137 - font-size: 16px;
138 - line-height: 24px;
139 - width: 100%;
140 - height: 72px;
141 - display: block;
142 - position: relative;
143 -
144 - &.focus {
145 - .input-label {
146 - color: $green;
147 - transform: perspective(1px) scale(.75) translate3d(0, -18px, 0);
148 - }
149 -
150 - .underline-focus {
151 - transform: scaleX(1);
152 - }
153 -
154 - &.textarea {
155 - overflow-y: hidden;
156 - height: 200px; /* approximate max height */
157 - padding: 0 0 60px;
158 -
159 - .input-text {
160 - max-height: 200px;
161 - margin-top: 45px;
162 - padding-top: 0;
163 - }
164 - }
165 - }
166 -
167 - &.textarea {
168 - transition-property: all;
169 - transition-duration: .5s;
170 - transition-timing-function: cubic-bezier(0, 1, .5, 1);
171 -
172 - .input-text {
173 - resize: none;
174 - overflow: hidden;
175 - }
176 - }
177 -
178 - .input-label {
179 - position: absolute;
180 - line-height: 48px;
181 - opacity: 1;
182 - color: $lucifer;
183 - transition: all 450ms cubic-bezier(.23, 1, .32, 1) 0ms;
184 - top: 24px;
185 - transform: scale(1) translate3d(0, 0, 0);
186 - transform-origin: left top 0;
187 - }
188 -
189 - .input-text {
190 - -webkit-tap-highlight-color: rgba(0,0,0,0);
191 - position: relative;
192 - width: 100%;
193 - height: 100%;
194 - border: 0;
195 - outline: none;
196 - background-color: transparent;
197 - color: $white;
198 - box-sizing: border-box;
199 - padding-top: 36px;
200 - box-shadow: none;
201 - padding-left: 0;
202 - font-size: 18px;
203 - }
204 -
205 - .underline {
206 - border: 0;
207 - border-bottom: solid 1px #e0e0e0;
208 - position: absolute;
209 - width: 100%;
210 - bottom: 8px;
211 - margin: 0;
212 - // false: content-box;
213 - box-sizing: content-box;
214 - height: 0;
215 - }
216 -
217 - .underline-focus {
218 - border-style: none none solid;
219 - border-bottom-width: 2px;
220 - position: absolute;
221 - width: 100%;
222 - bottom: 8px;
223 - margin: 0;
224 - box-sizing: content-box;
225 - height: 0;
226 - border-color: $green;
227 - transform: scaleX(0);
228 - transition: all 450ms cubic-bezier(.23, 1, .32, 1) 0ms;
229 - }
230 - }
231 -}
...\ No newline at end of file ...\ No newline at end of file
...@@ -9,46 +9,40 @@ ...@@ -9,46 +9,40 @@
9 <div class="modal-wrapper"> 9 <div class="modal-wrapper">
10 <label class="close" for=""></label> 10 <label class="close" for=""></label>
11 <h2 id="modal-title">Please fill in the blanks.</h2> 11 <h2 id="modal-title">Please fill in the blanks.</h2>
12 - <form class="message-form" action="/graph" method="POST"> 12 + <form class="message-form" action="graph" method="get" id="indexForm">
13 <div class="input-box"> 13 <div class="input-box">
14 <label for="" class="input-label">Payment days (ex. 31)</label> 14 <label for="" class="input-label">Payment days (ex. 31)</label>
15 - <input type="text" class="input-text"> 15 + <input type="text" class="input-text" name="payDay">
16 <hr class="underline"> 16 <hr class="underline">
17 <hr class="underline-focus"> 17 <hr class="underline-focus">
18 </div> 18 </div>
19 <div class="input-box"> 19 <div class="input-box">
20 <label for="" class="input-label">Salary (ex. 1000000)</label> 20 <label for="" class="input-label">Salary (ex. 1000000)</label>
21 - <input type="text" class="input-text"> 21 + <input type="text" class="input-text" name="salary">
22 <hr class="underline"> 22 <hr class="underline">
23 <hr class="underline-focus"> 23 <hr class="underline-focus">
24 </div> 24 </div>
25 25
26 <div class="input-box"> 26 <div class="input-box">
27 <label for="" class="input-label">Working days (ex. 월화수목금)</label> 27 <label for="" class="input-label">Working days (ex. 월화수목금)</label>
28 - <input type="text" class="input-text"> 28 + <input type="text" class="input-text" name="workDay">
29 <hr class="underline"> 29 <hr class="underline">
30 <hr class="underline-focus"> 30 <hr class="underline-focus">
31 </div> 31 </div>
32 <div class="input-box"> 32 <div class="input-box">
33 <label for="" class="input-label">Working time (ex. 9)</label> 33 <label for="" class="input-label">Working time (ex. 9)</label>
34 - <input type="text" class="input-text"> 34 + <input type="text" class="input-text" name="workTime">
35 <hr class="underline"> 35 <hr class="underline">
36 <hr class="underline-focus"> 36 <hr class="underline-focus">
37 </div> 37 </div>
38 <div class="input-box"> 38 <div class="input-box">
39 <label for="" class="input-label">Time off work (ex. 18)</label> 39 <label for="" class="input-label">Time off work (ex. 18)</label>
40 - <input type="text" class="input-text"> 40 + <input type="text" class="input-text" name="offWork">
41 <hr class="underline"> 41 <hr class="underline">
42 <hr class="underline-focus"> 42 <hr class="underline-focus">
43 </div> 43 </div>
44 -<!-- <div class="input-box textarea">
45 - <label for="" class="input-label">Message</label>
46 - <textarea class="input-text"></textarea>
47 - <hr class="underline">
48 - <hr class="underline-focus">
49 - </div>-->
50 <div class="input-button"> 44 <div class="input-button">
51 - <button class="button">Enter</button> 45 + <button type='submit' class="button2">Enter</button>
52 </div> 46 </div>
53 </form> 47 </form>
54 </div> 48 </div>
......
1 +<!-- views/index.ejs -->
2 +<!DOCTYPE html>
3 +<html>
4 + <head>
5 + <link rel="stylesheet" href="css/index_style.css">
6 + <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
7 + </head>
8 + <body>
9 + <a href="#" class="button">How much are you earning now?</a>
10 + <div class="modal-overlay">
11 + <div class="modal-wrapper">
12 + <label class="close" for=""></label>
13 + <h2 id="modal-title">Please fill in the blanks.</h2>
14 + <form class="message-form" action="graph" method="get" id="indexForm">
15 + <div class="input-box">
16 + <label for="payDay" class="input-label">Payment days (ex. 31)</label>
17 + <input id="payDay"type="text" class="input-text" name="payDay">
18 + <hr class="underline">
19 + <hr class="underline-focus">
20 + </div>
21 + <div class="input-box">
22 + <label for="salary" class="input-label">Salary (ex. 1000000)</label>
23 + <input id="salary" type="text" class="input-text" name="salary">
24 + <hr class="underline">
25 + <hr class="underline-focus">
26 + </div>
27 +
28 + <div class="input-box">
29 + <label for="workDay" class="input-label">Working days (ex. 월화수목금)</label>
30 + <input id="workDay" type="text" class="input-text" name="workDay">
31 + <hr class="underline">
32 + <hr class="underline-focus">
33 + </div>
34 + <div class="input-box">
35 + <label for="workTime" class="input-label">Working time (ex. 9)</label>
36 + <input id = "workTime"type="text" class="input-text" name="workTime">
37 + <hr class="underline">
38 + <hr class="underline-focus">
39 + </div>
40 + <div class="input-box">
41 + <label for="offWork" class="input-label">Time off work (ex. 18)</label>
42 + <input id = "offWork" type="text" class="input-text" name="offWork">
43 + <hr class="underline">
44 + <hr class="underline-focus">
45 + </div>
46 + <div class="input-button">
47 + <button type="submit" form="indexForm" onclick="location.href='/graph'"class="button">Enter</button>
48 + </div>
49 + </form>
50 + </div>
51 + </div>
52 + </body>
53 + <script type="text/javascript">
54 + $('.button').on('click', function(e) {
55 + e.preventDefault();
56 + $(this).addClass('active');
57 + });
58 + $('.modal-wrapper').find('label').on('click', function() {
59 + $('.button').removeClass('active');
60 + });
61 +
62 + $('.input-text').focus(function() {
63 + $(this).parents('.input-box').addClass('focus');
64 + })
65 +
66 + $('.input-text').blur(function() {
67 + if ($(this).val()) {
68 + $(this).parents('.input-box').addClass('focus');
69 + } else {
70 + $(this).parents('.input-box').removeClass('focus');
71 + }
72 + });
73 + </script>
74 +</html>
1 +html
2 + head
3 + link(rel='stylesheet', href='css/index_style.css')
4 + script(src='https://code.jquery.com/jquery-2.2.1.min.js')
5 + body
6 + a.button(href='#') How much are you earning now?
7 + .modal-overlay
8 + .modal-wrapper
9 + label.close(for='')
10 + h2#modal-title Please fill in the blanks.
11 + form.message-form(action='/graph', method='POST')
12 + .input-box
13 + label.input-label(for='') Payment days (ex. 31)
14 + input.input-text(type='text', name='payDay')
15 + hr.underline
16 + hr.underline-focus
17 + .input-box
18 + label.input-label(for='') Salary (ex. 1000000)
19 + input.input-text(type='text', name='salary')
20 + hr.underline
21 + hr.underline-focus
22 + .input-box
23 + label.input-label(for='') Working days (ex. 월화수목금)
24 + input.input-text(type='text', name='workDay')
25 + hr.underline
26 + hr.underline-focus
27 + .input-box
28 + label.input-label(for='') Working time (ex. 9)
29 + input.input-text(type='text', name='workTime')
30 + hr.underline
31 + hr.underline-focus
32 + .input-box
33 + label.input-label(for='') Time off work (ex. 18)
34 + input.input-text(type='text', name='offWork')
35 + hr.underline
36 + hr.underline-focus
37 + //
38 + <div class="input-box textarea">
39 + <label for="" class="input-label">Message</label>
40 + <textarea class="input-text"></textarea>
41 + <hr class="underline">
42 + <hr class="underline-focus">
43 + </div>
44 + .input-button
45 + button.button(type='button', onclick="location.href='/graph' ") Enter
46 + script(type='text/javascript').
47 + $('.button').on('click', function(e) {
48 + e.preventDefault();
49 + $(this).addClass('active');
50 + });
51 + $('.modal-wrapper').find('label').on('click', function() {
52 + $('.button').removeClass('active');
53 + });
54 + $('.input-text').focus(function() {
55 + $(this).parents('.input-box').addClass('focus');
56 + })
57 + $('.input-text').blur(function() {
58 + if ($(this).val()) {
59 + $(this).parents('.input-box').addClass('focus');
60 + } else {
61 + $(this).parents('.input-box').removeClass('focus');
62 + }
63 + });