Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>
Add Comment
Please, Sign In to add comment