JS Issue Tracker

by Pranab Dey

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="main">
  <div class="row">
    <div class="container">
      <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="heading">
          <h3>
JS Issue Tracker
</h3>
        </div>
        <form id="issue_form" class="issue_form">
          <div class="form-group">
            <label for="issue_name">Issue Name</label>
            <input type="text" class="form-control" id="issue_name" class="issue_name" />
            <div class="nameEr"></div>
          </div>
          <div class="form-group">
            <label for="issue_des">Issue Description</label>
            <textarea class="form-control" cols="20" rows="5" id="issue_des" class="issue_des"></textarea>
          </div>
          <div class="form-group">
            <label for="issue_sev">Issue Severity</label>
            <select id="issue_sev">
              <option value="Low">Low</option>
              <option value="Medium">Medium</option>
              <option value="High">High</option>
            </select>
          </div>
          <button type="button" class="btn btn-primary issue_btn" id="issue_btn">
          Add Issue
          </button>
        </form>
      </div>
    </div>
  </div>
  <hr>
  <div class="row">
  <div class="container">
  <div class="col-md-12">
  <div class="heading">
   <h3>
Issue Lists
    </h3>
        </div>
  <div id="issue_list" class="issue_list row">
  </div>
  </div>
  </div>
  </div>
</div>

CSS

.row{
  margin: 0;
}
.issue_form{
  margin-top: 20px;
}
.newIssue{
  border: 1px solid;
}
.newIssue:not(:last-child){
  margin-bottom: 10px;
}
.nameEr{
  background: red;
  color: #fff;
}
.well{
  padding: 5px 10px;
}

JavaScript

var issueName = document.querySelector("#issue_name");
var issueDes = document.querySelector("#issue_des");
var issueSev = document.querySelector("#issue_sev");
var issueList = document.querySelector("#issue_list");
var issueBtn = document.querySelector("#issue_btn");
var nameEr = document.querySelector(".nameEr");
var card, delBtn, num = 1, serialNum;

issueBtn.addEventListener("click", function issueBtnClick(){
if(issueName.value === "" || issueName.value === null){
nameEr.style.padding = "5px";
nameEr.innerHTML = "Please enter a issue name!!";
}
else{
nameEr.innerHTML = "";
nameEr.style.padding = "0";
card = document.createElement("div");
card.setAttribute("class","well newIssue col-md-4 col-sm-6 col-xs-12");
card.innerHTML = "<div class='title'>" + issueName.value + "</div><span class='sec'>" + issueSev.value + "</span><div class='description'>" + issueDes.value + "</div><div class='footer'</div>";
serialNum = document.createElement("span");
serialNum.innerHTML = num++;
delBtn = document.createElement("button");
delBtn.setAttribute("class","btn btn-danger btn-sm");
delBtn.innerHTML = "Delete";
delBtn.addEventListener("click", function(){
this.parentNode.remove();
});
card.append(serialNum);
card.append(delBtn);
issueList.append(card);
}
});