index.ejs 2.54 KB
<html>
  <head>
    <link rel="stylesheet" href="css/index_style.css">
    <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
  </head>
  <body>
    <a href="#" class="button">How much are you earning now?</a>
    <div class="modal-overlay">
      <div class="modal-wrapper">
        <label class="close" for=""></label>
        <h2 id="modal-title">Please fill in the blanks.</h2>
        <form class="message-form" action="graph" method="get" id="indexForm">
          <div class="input-box">
            <label for="" class="input-label">Payment days (ex. 31)</label>
            <input type="text" class="input-text" name="payDay">
            <hr class="underline">
            <hr class="underline-focus">
          </div>
          <div class="input-box">
            <label for="" class="input-label">Salary (ex. 1000000)</label>
            <input type="text" class="input-text" name="salary">
            <hr class="underline">
            <hr class="underline-focus">
          </div>

          <div class="input-box">
            <label for="" class="input-label">Working days (ex. 월화수목금)</label>
            <input type="text" class="input-text" name="workDay">
            <hr class="underline">
            <hr class="underline-focus">
          </div>
          <div class="input-box">
            <label for="" class="input-label">Working time (ex. 9)</label>
            <input type="text" class="input-text" name="workTime">
            <hr class="underline">
            <hr class="underline-focus">
          </div>
          <div class="input-box">
            <label for="" class="input-label">Time off work (ex. 18)</label>
            <input type="text" class="input-text" name="offWork">
            <hr class="underline">
            <hr class="underline-focus">
          </div>
          <div class="input-button">
            <button type='submit'  class="button2">Enter</button>
          </div>
        </form>
      </div>
    </div>
  </body>
  <script type="text/javascript">
      $('.button').on('click', function(e) {
      e.preventDefault();
      $(this).addClass('active');
    });
    $('.modal-wrapper').find('label').on('click', function() {
      $('.button').removeClass('active');
    });

    $('.input-text').focus(function() {
      $(this).parents('.input-box').addClass('focus');
    })

    $('.input-text').blur(function() {
      if ($(this).val()) {
        $(this).parents('.input-box').addClass('focus');
      } else {
        $(this).parents('.input-box').removeClass('focus');
      }
    });
  </script>
</html>