Untitled

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>IP Kol1</title>

  </head>
  <body>
    <div class="Container">
      <div class="Right">
        <h3> Revert History</h3>
          <ul id="revertList">

          </ul>
        </div>
      </div>
      <div class="Details">
        <form>
        <label>Name</label>
        <input type="text" name="name" value="" id="name"> <br><br>
        <label>Index</label>
        <input type="text" name="index" value="" id="index"> <br> <br>
        <label>Phone</label>
        <input type="text" name="phone" value="" id="phone"> <br><br>

        <div class="Grades">
            <label>Grade</label>
        <input type="radio" name="grade" value="5">5
        <input type="radio" name="grade" value="6">6
        <input type="radio" name="grade" value="7">7
        <input type="radio" name="grade" value="8">8
        <input type="radio" name="grade" value="9">9
        <input type="radio" name="grade" value="10">10
        </div>
        <label> Session </label>
        <select id="Session">
          <option value="January">January</option>
          <option value="June">June</option>
          <option value="September">September</option>
        </select>


        </form>
        <br><br>
        <button onclick="addStudent();"> Add Student </button>
        <hr>
        <h3> Students(Average <label id="average"> 0.00 </label>)
        <table class="Table" id="Table">
        <tr>
          <th>Name</th>
          <th>Index</th>
          <th>Phone</th>
          <th>Grade</th>
          <th>Session</th>
          <th>Actions</th>
        </tr>
        <tr>

        </tr>
        </table>
    </div>


  </body>
  <script type="text/javascript">
    var studentList = []
      var table = document.getElementById('Table');
      var reverted = document.getElementById('revertList');
        var avg = document.getElementById('average');
    class Student{
      constructor(name,index,phone,grade,session){
        this.name=name;
        this.index=index;
        this.phone=phone;
        this.grade=grade;
        this.session=session;
      }
    }

    function addStudent(){
  //    alert("Executed");
      var name = document.getElementById('name').value;
      var index=document.getElementById('index').value;
      var phone=document.getElementById('phone').value;
      var grade=document.querySelector('input[name="grade"]:checked').value;
      var session=document.getElementById('Session').value;
    //  alert(document.getElementById('phone').value);
    //  alert(name + index + phone + grade + session);
      var addStudent = new Student(name,index,phone,grade,session);

      studentList.push(addStudent);

      var row=table.insertRow(-1);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3=row.insertCell(2);
      var cell4=row.insertCell(3);
      var cell5 = row.insertCell(4);
      var cell6=row.insertCell(5);
      cell1.innerHTML=name;
      cell2.innerHTML=index;
      cell3.innerHTML=parasePhone(phone);
      cell4.innerHTML=grade;
      cell5.innerHTML = session;
      cell6.innerHTML = "<button id=\"student" + studentList.length + "\" onclick=\"confirm(this)\">Confirm</button> <button id =\"student1"+studentList.length+"\" onclick=\"revert(this)\">Revert</button>"

      avg.innerHTML = calculateAverage();
    }
    function calculateAverage(){
      var sum=0.00;
      for(i=0;i<studentList.length;i++){
        sum +=parseInt(studentList[i].grade);
      }
      return sum/studentList.length;
    }
    function revert(row){
  //    alert(studentList.length);
      var i = row.parentNode.parentNode.rowIndex;
      table.deleteRow(i);
    //  alert(i);
      var item = document.createElement('li');
      item.appendChild(document.createTextNode(studentList[i-2].index + " - grade " + studentList[i-2].grade));

      reverted.appendChild(item);
      studentList.splice(i-2,1);
    //  alert(i-2);
    //  alert(studentList.length);
      avg.innerHTML = calculateAverage();
    //  console.log(studentList);
      if(studentList.length ===0 ){
        avg.innerHTML=0.00;
      }


    }
function confirm(row){
   var i = row.parentNode.parentNode.rowIndex;
   table.rows.item(i).style.backgroundColor  ="green";
   document.getElementById("student" +(i-1)).disabled = true;
    document.getElementById("student1" +(i-1)).disabled = true;

}
function parasePhone(phone){
  return phone.slice(0,3) + "/"+phone.slice(3,6) + "-" + phone.slice(6,9);
}
  </script>
</html>