keyupFunction

by Venkatesh Dematti

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
  <div class="row">
    <div class="col-md-12">
    <input type="text" id="name" placeholder="Your name here" class="form-control"><br/>
    <textarea id="text" placeholder='Join th e discussion' class="form-control"></textarea><br/>
      <div class="append">

      </div>
      <button class="btn btn-info" id="add">Add Comment</button>
      <button class="btn btn-danger" style="display:none;">Delete all Comments</button>
      <span id='display'></span>
      <span></span>
      <span id="error" style="color:red;"></span>
    </div>
  </div>
</div>

CSS

.container{margin-top: 20px;}
          .append .comment_main {
              height: auto;
              border: 2px solid #17a2b8;
              padding: 10px;
              box-shadow: 1px 1px 1px #17a2b8;
              margin-bottom: 10px;
              box-shadow: 6px 8px 12px 0PX #eee;
              border-radius: 5px;
          }
            .append .comment_main .comment_content {
                margin-left: 30px;
                padding: 10px 0px;
            }
            span.comment_content.fa {
                padding: 20px 0px;
            }
            .social [class*="fa fa-"] {
              background-color: #333;
              border-radius: 30px;
              color: #fff;
              display: inline-block;
              height: 30px;
              line-height: 30px;
              margin: auto 3px;
              width: 30px;
              font-size: 15px;
              text-align: center;
          }
          .fa:hover{text-decoration: none;}
          .fa-twitter:hover {
              background-color: #46c0fb;
          }
          .fa-facebook:hover {
              background-color: #3B5998;
          }
          span#indvidual {
            margin-left: 10px;
            z-index: 99999999;
            cursor: pointer;
        }
        #indvidual:hover{color:#dc3545;}

JavaScript

$(document).ready(function(){
	$('#text').keyup(function(){
  	let getVal = $(this).val();
    $('#display').html("<span style='font-style:italic;'>Typing : </span>" + getVal);
    $('#add').html('Add Comment');
  });

  function comments(){

    // Add Button
  	$('#add').click(function(q){
  	q.preventDefault();
    let getVal = $("#text").val();
    let getName = $('#name').val();
    if(getVal === ''){
    	$('#error').html("Comment box cannot be empty");
      setTimeout(function(){
      	$('#error').fadeOut();
      },3000);
    }else{
      var dt = new Date();
      var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
    	$('.append').append("<div class='comment_main'><p class='comment_name'>" + getName + " at " + time + " <span id='indvidual' class='fa fa-trash'></span> </p>" + "<div class='comment_content'>" +getVal + "</div><div class='comment_content social'><a class='fa fa-facebook' target='_blank' href='#'></a><a class='fa fa-twitter' target='_blank' href='#'></a></div></div>");
      // Toggle Comment Button
      if( $('.append').children().length != 0 ){
        // alert('Yes');
        $('.btn-danger').fadeIn();
      }
      // Toggle Comments Button ends
      $('#display').html(" ");
      $('#text,#name').val('');
      $('#name').focus();
 
    }
  });

  // Delete Comments using button
    $('.btn-danger').click(function(){
        $('.append').remove();
        $('.btn-danger').hide();
    });
  // Delete Comments using button

  // Individual Delete
  $('#indvidual').click(function(){
      alert('Working');
  });
  // Individual Delete

  }

  comments();
});