김유현 / How much are you earning now

Go to a project
Toggle navigation Toggle navigation pinning
김유현
1868d85c 1 parent 4f0aa71a

Add timer in grpah.html

Inline Side-by-side
Showing 5 changed files with 64 additions and 291 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
3 +public/css/
......
...@@ -21,7 +21,8 @@ app.get('/graph', function(req, res){ ...@@ -21,7 +21,8 @@ app.get('/graph', function(req, res){
21 var workTime = req.query.workTime 21 var workTime = req.query.workTime
22 var offWork = req.query.offWork 22 var offWork = req.query.offWork
23 console.log(payDay, salary,workDay,workTime, offWork); 23 console.log(payDay, salary,workDay,workTime, offWork);
24 - res.send(`payDay : ${payDay}, salary : ${salary}, workDay : ${workDay}, workTime : ${workTime}, offWork : ${offWork}`); 24 + res.sendFile(__dirname + '/public/graph.html');
25 + //res.send(`payDay : ${payDay}, salary : ${salary}, workDay : ${workDay}, workTime : ${workTime}, offWork : ${offWork}`);
25 }) 26 })
26 27
27 app.listen(3000, function(){ 28 app.listen(3000, function(){
......
1 <html> 1 <html>
2 - <style type="text/css"> 2 + <body>
3 - body { 3 + <link rel="stylesheet" href="css/graph_style.css">
4 - background: #18222F; 4 + <div id = "dpTime"></div>
5 -} 5 + <div class="progress-bar"></div>
6 - 6 + <h1 class="count"></h1>
7 -.wrapper { 7 + </body>
8 - position: absolute; 8 + <script>
9 - width: 400px; 9 + var body = document.querySelector('body'),
10 - height: 400px; 10 + bar = document.querySelector('.progress-bar'),
11 - margin: auto; 11 + counter = document.querySelector('.count'),
12 - top: 0; 12 + i = 0,
13 - bottom: 0; 13 + throttle = 0.4; // 0-1
14 - left: 0; 14 +
15 - right: 0; 15 + setInterval("dpTime()",1);
16 - display: flex; 16 + function dpTime(){
17 - flex-direction: row; 17 + var now = new Date();
18 -} 18 + hours = now.getHours();
19 - 19 + minutes = now.getMinutes();
20 -.container { 20 + seconds = now.getSeconds();
21 - flex: 1; 21 + if (hours > 12)
22 - padding: 0 20px; 22 + { hours -= 12;
23 -} 23 + ampm = "오후 ";
24 - </style> 24 + }else
25 - <body> 25 + { ampm = "오전 ";
26 - <div class="wrapper"> 26 + }
27 - <div class="container chart" data-size="400" data-value="88" data-arrow="up"> 27 + if (hours < 10){
28 - </div> 28 + hours = "0" + hours;
29 - </div> 29 + } if (minutes < 10){
30 - </body> 30 + minutes = "0" + minutes;
31 - <script type="text/javascript"> 31 + } if (seconds < 10){
32 - // 32 + seconds = "0" + seconds;
33 -// Library 33 + }
34 -// 34 + document.getElementById("dpTime").innerHTML = ampm + hours + ":" + minutes + ":" + seconds; }
35 - 35 +
36 -var Dial = function(container) { 36 + (function draw() {
37 - this.container = container; 37 + if(i <= 100) {
38 - this.size = this.container.dataset.size; 38 + var r = Math.random();
39 - this.strokeWidth = this.size / 8; 39 +
40 - this.radius = (this.size / 2) - (this.strokeWidth / 2); 40 + requestAnimationFrame(draw);
41 - this.value = this.container.dataset.value; 41 + bar.style.width = i + '%';
42 - this.direction = this.container.dataset.arrow; 42 + counter.innerHTML = Math.round(i) + '%';
43 - this.svg; 43 +
44 - this.defs; 44 + if(r < throttle) { // Simulate d/l speed and uneven bitrate
45 - this.slice; 45 + i = i + r;
46 - this.overlay;
47 - this.text;
48 - this.arrow;
49 - this.create();
50 -}
51 -
52 -Dial.prototype.create = function() {
53 - this.createSvg();
54 - this.createDefs();
55 - this.createSlice();
56 - this.createOverlay();
57 - this.createText();
58 - this.createArrow();
59 - this.container.appendChild(this.svg);
60 -};
61 -
62 -Dial.prototype.createSvg = function() {
63 - var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
64 - svg.setAttribute('width', this.size + 'px');
65 - svg.setAttribute('height', this.size + 'px');
66 - this.svg = svg;
67 -};
68 -
69 -Dial.prototype.createDefs = function() {
70 - var defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
71 - var linearGradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
72 - linearGradient.setAttribute('id', 'gradient');
73 - var stop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
74 - stop1.setAttribute('stop-color', '#6E4AE2');
75 - stop1.setAttribute('offset', '0%');
76 - linearGradient.appendChild(stop1);
77 - var stop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
78 - stop2.setAttribute('stop-color', '#78F8EC');
79 - stop2.setAttribute('offset', '100%');
80 - linearGradient.appendChild(stop2);
81 - var linearGradientBackground = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
82 - linearGradientBackground.setAttribute('id', 'gradient-background');
83 - var stop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
84 - stop1.setAttribute('stop-color', 'rgba(0, 0, 0, 0.2)');
85 - stop1.setAttribute('offset', '0%');
86 - linearGradientBackground.appendChild(stop1);
87 - var stop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
88 - stop2.setAttribute('stop-color', 'rgba(0, 0, 0, 0.05)');
89 - stop2.setAttribute('offset', '100%');
90 - linearGradientBackground.appendChild(stop2);
91 - defs.appendChild(linearGradient);
92 - defs.appendChild(linearGradientBackground);
93 - this.svg.appendChild(defs);
94 - this.defs = defs;
95 -};
96 -
97 -Dial.prototype.createSlice = function() {
98 - var slice = document.createElementNS("http://www.w3.org/2000/svg", "path");
99 - slice.setAttribute('fill', 'none');
100 - slice.setAttribute('stroke', 'url(#gradient)');
101 - slice.setAttribute('stroke-width', this.strokeWidth);
102 - slice.setAttribute('transform', 'translate(' + this.strokeWidth / 2 + ',' + this.strokeWidth / 2 + ')');
103 - slice.setAttribute('class', 'animate-draw');
104 - this.svg.appendChild(slice);
105 - this.slice = slice;
106 -};
107 -
108 -Dial.prototype.createOverlay = function() {
109 - var r = this.size - (this.size / 2) - this.strokeWidth / 2;
110 - var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
111 - circle.setAttribute('cx', this.size / 2);
112 - circle.setAttribute('cy', this.size / 2);
113 - circle.setAttribute('r', r);
114 - circle.setAttribute('fill', 'url(#gradient-background)');
115 - this.svg.appendChild(circle);
116 - this.overlay = circle;
117 -};
118 -
119 -Dial.prototype.createText = function() {
120 - var fontSize = this.size / 3.5;
121 - var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
122 - text.setAttribute('x', (this.size / 2) + fontSize / 7.5);
123 - text.setAttribute('y', (this.size / 2) + fontSize / 4);
124 - text.setAttribute('font-family', 'Century Gothic, Lato');
125 - text.setAttribute('font-size', fontSize);
126 - text.setAttribute('fill', '#78F8EC');
127 - text.setAttribute('text-anchor', 'middle');
128 - var tspanSize = fontSize / 3;
129 - text.innerHTML = 0 + '<tspan font-size="' + tspanSize + '" dy="' + -tspanSize * 1.2 + '">%</tspan>';
130 - this.svg.appendChild(text);
131 - this.text = text;
132 -};
133 -
134 -Dial.prototype.createArrow = function() {
135 - var arrowSize = this.size / 10;
136 - var arrowYOffset, m;
137 - if(this.direction === 'up') {
138 - arrowYOffset = arrowSize / 2;
139 - m = -1;
140 - }
141 - else if(this.direction === 'down') {
142 - arrowYOffset = 0;
143 - m = 1;
144 - }
145 - var arrowPosX = ((this.size / 2) - arrowSize / 2);
146 - var arrowPosY = (this.size - this.size / 3) + arrowYOffset;
147 - var arrowDOffset = m * (arrowSize / 1.5);
148 - var arrow = document.createElementNS("http://www.w3.org/2000/svg", "path");
149 - arrow.setAttribute('d', 'M 0 0 ' + arrowSize + ' 0 ' + arrowSize / 2 + ' ' + arrowDOffset + ' 0 0 Z');
150 - arrow.setAttribute('fill', '#97F8F0');
151 - arrow.setAttribute('opacity', '0.6');
152 - arrow.setAttribute('transform', 'translate(' + arrowPosX + ',' + arrowPosY + ')');
153 - this.svg.appendChild(arrow);
154 - this.arrow = arrow;
155 -};
156 -
157 -Dial.prototype.animateStart = function() {
158 - var v = 0;
159 - var self = this;
160 - var intervalOne = setInterval(function() {
161 - var p = +(v / self.value).toFixed(2);
162 - var a = (p < 0.95) ? 2 - (2 * p) : 0.05;
163 - v += a;
164 - // Stop
165 - if(v >= +self.value) {
166 - v = self.value;
167 - clearInterval(intervalOne);
168 } 46 }
169 - self.setValue(v); 47 + } else {;
170 - }, 10); 48 + bar.className += " done";
171 -}; 49 + }
172 - 50 + })();
173 -Dial.prototype.animateReset = function() { 51 + </script>
174 - this.setValue(0);
175 -};
176 -
177 -Dial.prototype.polarToCartesian = function(centerX, centerY, radius, angleInDegrees) {
178 - var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
179 - return {
180 - x: centerX + (radius * Math.cos(angleInRadians)),
181 - y: centerY + (radius * Math.sin(angleInRadians))
182 - };
183 -}
184 -
185 -Dial.prototype.describeArc = function(x, y, radius, startAngle, endAngle){
186 - var start = this.polarToCartesian(x, y, radius, endAngle);
187 - var end = this.polarToCartesian(x, y, radius, startAngle);
188 - var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
189 - var d = [
190 - "M", start.x, start.y,
191 - "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
192 - ].join(" ");
193 - return d;
194 -}
195 -
196 -Dial.prototype.setValue = function(value) {
197 - var c = (value / 100) * 360;
198 - if(c === 360)
199 - c = 359.99;
200 - var xy = this.size / 2 - this.strokeWidth / 2;
201 - var d = this.describeArc(xy, xy, xy, 180, 180 + c);
202 - this.slice.setAttribute('d', d);
203 - var tspanSize = (this.size / 3.5) / 3;
204 - this.text.innerHTML = Math.floor(value) + '<tspan font-size="' + tspanSize + '" dy="' + -tspanSize * 1.2 + '">%</tspan>';
205 -};
206 -
207 -//
208 -// Usage
209 -//
210 -
211 -var containers = document.getElementsByClassName("chart");
212 -var dial = new Dial(containers[0]);
213 -dial.animateStart();
214 - </script>
215 </html> 52 </html>
......
1 -<!-- views/index.ejs -->
2 -<!DOCTYPE html>
3 <html> 1 <html>
4 <head> 2 <head>
5 <link rel="stylesheet" href="css/index_style.css"> 3 <link rel="stylesheet" href="css/index_style.css">
...@@ -11,40 +9,40 @@ ...@@ -11,40 +9,40 @@
11 <div class="modal-wrapper"> 9 <div class="modal-wrapper">
12 <label class="close" for=""></label> 10 <label class="close" for=""></label>
13 <h2 id="modal-title">Please fill in the blanks.</h2> 11 <h2 id="modal-title">Please fill in the blanks.</h2>
14 - <form class="message-form" action="graph" method="get" id="indexForm"> 12 + <form class="message-form" action="graph" method="get" id="indexForm">
15 <div class="input-box"> 13 <div class="input-box">
16 - <label for="payDay" class="input-label">Payment days (ex. 31)</label> 14 + <label for="" class="input-label">Payment days (ex. 31)</label>
17 - <input id="payDay"type="text" class="input-text" name="payDay"> 15 + <input type="text" class="input-text" name="payDay">
18 <hr class="underline"> 16 <hr class="underline">
19 <hr class="underline-focus"> 17 <hr class="underline-focus">
20 </div> 18 </div>
21 <div class="input-box"> 19 <div class="input-box">
22 - <label for="salary" class="input-label">Salary (ex. 1000000)</label> 20 + <label for="" class="input-label">Salary (ex. 1000000)</label>
23 - <input id="salary" type="text" class="input-text" name="salary"> 21 + <input type="text" class="input-text" name="salary">
24 <hr class="underline"> 22 <hr class="underline">
25 <hr class="underline-focus"> 23 <hr class="underline-focus">
26 </div> 24 </div>
27 25
28 <div class="input-box"> 26 <div class="input-box">
29 - <label for="workDay" class="input-label">Working days (ex. 월화수목금)</label> 27 + <label for="" class="input-label">Working days (ex. 월화수목금)</label>
30 - <input id="workDay" type="text" class="input-text" name="workDay"> 28 + <input type="text" class="input-text" name="workDay">
31 <hr class="underline"> 29 <hr class="underline">
32 <hr class="underline-focus"> 30 <hr class="underline-focus">
33 </div> 31 </div>
34 <div class="input-box"> 32 <div class="input-box">
35 - <label for="workTime" class="input-label">Working time (ex. 9)</label> 33 + <label for="" class="input-label">Working time (ex. 9)</label>
36 - <input id = "workTime"type="text" class="input-text" name="workTime"> 34 + <input type="text" class="input-text" name="workTime">
37 <hr class="underline"> 35 <hr class="underline">
38 <hr class="underline-focus"> 36 <hr class="underline-focus">
39 </div> 37 </div>
40 <div class="input-box"> 38 <div class="input-box">
41 - <label for="offWork" class="input-label">Time off work (ex. 18)</label> 39 + <label for="" class="input-label">Time off work (ex. 18)</label>
42 - <input id = "offWork" type="text" class="input-text" name="offWork"> 40 + <input type="text" class="input-text" name="offWork">
43 <hr class="underline"> 41 <hr class="underline">
44 <hr class="underline-focus"> 42 <hr class="underline-focus">
45 </div> 43 </div>
46 <div class="input-button"> 44 <div class="input-button">
47 - <button type="submit" form="indexForm" onclick="location.href='/graph'"class="button">Enter</button> 45 + <button type='submit' class="button2">Enter</button>
48 </div> 46 </div>
49 </form> 47 </form>
50 </div> 48 </div>
......
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 - });