submit pop

server.js

@@ -66,7 +66,7 @@ app.post('/times', function (req, res) {
         if (response.statusCode < 200 || response.statusCode > 399) {
             return res.status(response.statusCode).json({});
         }
-        return res.status(200).json(JSON.parse(body));
+        return res.status(200).json({});
     })
 });
 

static/submit.css

@@ -134,3 +134,37 @@ a {
     height: 25px;
     padding-top: 5px;
 }
+
+.pop-layer {
+    display: none;
+    height: 100%;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 100;
+}
+
+.pop-layer .pop-bg {
+    background: #000;
+    filter: alpha(opacity=70);
+    height: 100%;
+    left: 0;
+    opacity: .7;
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
+
+.pop-layer .pop-container {
+    height: auto;
+    position: absolute;
+    text-align: center;
+    top: 40%;
+    width: 100%;
+}
+
+.pop-layer .pop-container .pop-message {
+    padding: 1%;
+    font-size: 5vw;
+}

static/submit.js

@@ -37,6 +37,7 @@ function validateTime(val) {
 }
 
 let lb_email_valid = false;
+let lb_name_valid = false;
 let lb_time_valid = false;
 
 function clear(logo, title) {
@@ -48,7 +49,7 @@ function clear(logo, title) {
 }
 
 function submit() {
-    if (!lb_email_valid || !lb_time_valid) {
+    if (!lb_email_valid || !lb_name_valid || !lb_time_valid) {
         return;
     }
 
@@ -70,6 +71,8 @@ function submit() {
         success: function (res, status) {
             console.log('res', res);
             if (res) {
+                popup('등록 되었습니다.');
+
                 lb_email.value = '';
                 lb_name.value = '';
                 lb_time.value = '';
@@ -79,6 +82,16 @@ function submit() {
     });
 }
 
+function popup(message) {
+    document.querySelector('.pop-message').innerText = message;
+
+    $('.pop-layer').fadeIn();
+
+    setTimeout(function () {
+        $('.pop-layer').fadeOut();
+    }, 3000);
+}
+
 function setColor(e, b) {
     if (b) {
         e.classList.add('text_normal');
@@ -98,6 +111,14 @@ document.getElementById('lb-email').addEventListener('keyup', function (event) {
     setColor(lb_email, lb_email_valid);
 });
 
+document.getElementById('lb-name').addEventListener('keyup', function (event) {
+    if (lb_name.value !== '') {
+        lb_name_valid = true;
+    } else {
+        lb_name_valid = false;
+    }
+});
+
 document.getElementById('lb-time').addEventListener('keyup', function (event) {
     if (validateTime(lb_time.value)) {
         lb_time_valid = true;

views/submit.ejs

@@ -38,6 +38,13 @@
         </div>
     </div>
 
+    <div class="pop-layer">
+        <div class="pop-bg"></div>
+        <div class="pop-container">
+            <div class="pop-message"></div>
+        </div>
+    </div>
+
     <footer></footer>
 </body>