Notes

//css
*{
font-family: sans-serif;
}

h1{
font-family: sans-serif;
font-style: normal;
font-weight: bold;
font-size: 44px;
line-height: 48px;
text-align: center;
letter-spacing: -0.5px;
}

/* Form Section Start */
.formSection{
width: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
/* text-align: center; */
}

form{
margin-left: auto;
margin-right: auto;
}
.formFlex{
/* display: flex; */
float: left;
margin-left: 7%;
margin-right: 7%;
}

.formFlex>label{
display: block;
font-weight: bold;

}
.btndiv{
margin-top: 15px;
float: right;
}

/* to avoid overlapping of the flex box over the table */
/* mandatory step */
.formSection::after{
content: "";
display: table ;
clear: both;
}

select{
height: 40px;
width: 212px;
font-family: noto-sans;
font-style: normal;
font-weight: 400;
font-size: 14px;

}

#getReport{
height: 40px;
width: 128px;
font-family: noto-sans;
font-style: normal;
font-weight: 400;
font-size: 14px;
background: #009DD1;
color: #ffffff;
border-radius: 5px;
border:rgba(255, 255, 255, 0.5) solid 2px ;
box-shadow: black 2px 2px 2px;
}

#getReport:active{
box-shadow: black 0px 0px 0px;
}
/* Form Section End */

/* Table section Start */
.tableSection{
width: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 75px;
margin-bottom: 75px;
}
.tableTitle{
background: #009DD1;
color: #ffffff;
width: fit-content;
padding: 10px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin-left: 10px;
margin-right: auto;
}

table{
width: 1030px;
width: 100%;
font-family: sans-serif;
font-style: normal;
font-weight: 400;
font-size: 13px;
text-align: center;
border-collapse: collapse;
border: rgba(138, 131, 131, 0.2) 2px solid;
border-top: #009DD1 solid 5px;
}

thead{
border-bottom: rgb(243, 175, 116) solid 5px;
height: 75px;
}
tbody>tr{
padding: 0;
height: 50px;
}


.oddRow{
background: #F4F4F4;
}

.tbtn{
display: none;
background-color: rgba(255, 255, 255, 0.0);
border: rgba(255, 255, 255, 0) solid 1px;
color: #009DD1;
font-size: 20px;
font-weight: bold;
text-shadow: black 1px 1px 2px;
}

.tbtn:hover{
color:rgb(243, 175, 116);
}

.tbtn:active{
text-shadow: black 0px 0px 0px;
color:rgb(243, 175, 116);
}

.tbtn:disabled{
color: #8eddf7;
text-shadow: black 0px 0px 0px;
}
/* Table section End */


/* Media query for Ipad screen */
@media only screen and (max-width: 768px) {
.tbtn{
display: inline-block;
}
/* table{
width: 800px;
height: 464px;
} */
.btndiv{
float: right;
margin-right: 10%;
}
}
//main.js
function loadElements(){
loadForm();
loadTable();

//media query
var x = window.matchMedia("(max-width: 768px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
}

// function will be executed when ever there is a change in screen size
function myFunction(x) {
if (x.matches) { // If media query matches
goLeft();
}
else {
// showLastCol();
showSecCol();
showLastCol();
}
}

function loadForm(){
const classDdl = document.querySelector('#classDdl')
for(let index in dropdownDb["classDropdown"]){
let eachclass = dropdownDb['classDropdown'][index];
let option = document.createElement('option')
option.innerHTML = eachclass;
option.setAttribute('value',eachclass)
if(eachclass==="Class 10"){
option.setAttribute('selected','true')
}
classDdl.appendChild(option)
}
const perfDdl = document.querySelector('#perfDdl')
for(let index in dropdownDb["performanceLevel"]){
let eachclass = dropdownDb['performanceLevel'][index];
let option = document.createElement('option')
option.innerHTML = eachclass;
option.setAttribute('value',eachclass)
perfDdl.appendChild(option)
if(eachclass==="Select Level"){
resetDdl();
}
}

}
function resetDdl(){
const perfDdl = document.querySelector('#perfDdl')
let option = perfDdl.firstChild;
option.setAttribute('selected','true')
option.setAttribute('hidden','true')
option.setAttribute('disabled','true')
perfDdl.selectedIndex=0;
let classDdl = document.querySelector('#classDdl');
console.log(classDdl.value , classDdl.selectedIndex)
}

function generateReport(){
// console.log(`Button is working`)
let perfDdl = document.querySelector('#perfDdl')
// to contruct table body only if value selected is not "Select Level"
firstTimeLoad = false;
if(perfDdl.selectedIndex > 0){
constructTbody();
}
else{
alert('Please select a Perfomance Level from dropdown list')
}

}


function loadTable(){
// constructThead();
constructTbody();

}
function constructThead(){
let thead = document.createElement('thead');

// Creating a tr tag
let tr = document.createElement('tr');
let headers = studentDb[0]['studentresults'][0]; //accessing object with class 10 and 1st student object for headers
for (let header in headers){
let th = document.createElement('th');
th.innerHTML = header;
tr.appendChild(th);
}
thead.appendChild(tr);
table.appendChild(thead);
}

function constructTbody(){
let classDdl = document.querySelector('#classDdl');
let perfDdl = document.querySelector('#perfDdl');
let perfLvl = perfDdl.value;
let className = classDdl.selectedIndex + 6;
let classData;
let oldTbody = table.querySelector('tbody');
table.removeChild(oldTbody);
let tbody = document.createElement('tbody')
// fetching only the required class data
for(let index in studentDb){
let eachclass = studentDb[index]
if(eachclass['className'] == className){
classData = eachclass['studentresults']
}
}

//populating the table body
for(let i=0; i<classData.length; i++){
let rowdata = classData[i];
// console.log(rowdata)
let tr = document.createElement('tr');
let skip = false;
for(let key in rowdata){
// console.log(rowdata[key]);
let td = document.createElement('td')
if(key=='completedPercent'){
td = tr.lastChild;
if(td.innerHTML == perfLvl){
skip = false;
}
else{
skip=true;
}
td.innerHTML = rowdata[key] + " " + td.innerHTML
}else{
td.innerHTML= rowdata[key];
}
tr.appendChild(td);
}
if(i%2==0){
tr.className = 'oddRow'
}else tr.className='evenRow'
if(!skip || firstTimeLoad){
tbody.appendChild(tr);
}
}
table.appendChild(tbody)
}

function sortTable(){

// let col = header.getAttribute('value');
let col = 0;
let tbody = document.querySelector('tbody');
let thead = document.querySelector('thead');

console.log(`You have clicked on one of the header`)// reference output
// gives total number of childnode i.e number of rows we have inside <tbody>
// console.log(tbody.childElementCount)

for ( let i =0; i<tbody.childElementCount; i++){
for(let j=i+1; j<tbody.childElementCount; j++){
let row1 = tbody.childNodes[i];
let row2 = tbody.childNodes[j];

value1= row1.childNodes[col].innerHTML
value2 = row2.childNodes[col].innerHTML

// actual statement for sorting ( checking if sorting is required or not)
if(value1.localeCompare(value2) === 1 && asc){
//swapping the rows
tbody.insertBefore(row2,row1)
}
if(value1.localeCompare(value2) === -1 && !asc){
//swapping the rows
tbody.insertBefore(row2,row1)
}
}
}
let tr = thead.childNodes[1];
let th = tr.childNodes[1]
let span = th.childNodes[3]
if(asc){
span.innerHTML = "&darr;";
}
else{
span.innerHTML = "&uarr;";
}
colorify(tbody)
asc = !asc;
}


function colorify(tbody){
for( let i=0 ; i<tbody.childElementCount; i++){
let row = tbody.childNodes[i];
if(i%2==1){
row.className="oddRow"
}
else{
row.className="evenRow"
}
}
}

function goRight(){
hideSecCol();
showLastCol();
}

function goLeft(){
hideLastCol();
showSecCol();
}

function hideLastCol(){
let table = document.querySelector('table');
let thead = table.querySelector('thead')
let tbody = table.querySelector('tbody')
let trofThead = thead.childNodes[1]; // selects the <tr> inside thead
let lastcol = trofThead.childNodes[11];// selects the last column <th> tag
lastcol.setAttribute('hidden','true')
for(let i=0; i< tbody.childElementCount; i++){
let row = tbody.childNodes[i]
console.log(row.lastChild)
row.lastChild.setAttribute("hidden","true")
}
//toggling the table button (enable and disable ) accordingly
let lbtn = document.querySelector('#ltbtn');
lbtn.setAttribute('disabled','true')
let rbtn = document.querySelector('#rtbtn');
if(rbtn.hasAttribute('disabled')){
rbtn.removeAttribute('disabled')
}
}

function hideSecCol(){
let table = document.querySelector('table');
let thead = table.querySelector('thead')
let tbody = table.querySelector('tbody')
let trofThead = thead.childNodes[1]; // selects the <tr> inside thead
let seccol = trofThead.childNodes[3];// selects the last column <th> tag
seccol.setAttribute('hidden','true')
for(let i=0; i< tbody.childElementCount; i++){
let row = tbody.childNodes[i]
console.log(row.childNodes[1])
row.childNodes[1].setAttribute("hidden","true")
}
}



function showLastCol(){
let table = document.querySelector('table');
let thead = table.querySelector('thead')
let trofThead = thead.childNodes[1]; // selects the <tr> inside thead
let lastcol = trofThead.childNodes[11];// selects the last column <th> tag
let tbody = table.querySelector('tbody')
if(lastcol.hasAttribute("hidden")){
lastcol.removeAttribute("hidden")
}
for(let i=0; i< tbody.childElementCount; i++){
let row = tbody.childNodes[i]
// console.log(row.lastChild)
row.lastChild.removeAttribute("hidden")
}
//toggling the table button (enable and disable ) accordingly
let rbtn = document.querySelector('#rtbtn');
rbtn.setAttribute('disabled','true')
let lbtn = document.querySelector('#ltbtn');
if(lbtn.hasAttribute('disabled')){
lbtn.removeAttribute('disabled')
}
}

function showSecCol(){
let table = document.querySelector('table');
let thead = table.querySelector('thead')
let tbody = table.querySelector('tbody')
let trofThead = thead.childNodes[1]; // selects the <tr> inside thead
let seccol = trofThead.childNodes[3];// selects the last column <th> tag
if(seccol.hasAttribute("hidden")){
seccol.removeAttribute("hidden")
}
for(let i=0; i< tbody.childElementCount; i++){
let row = tbody.childNodes[i]
// console.log(row.lastChild)
row.childNodes[1].removeAttribute("hidden")
}
}

let firstTimeLoad = true;

let asc = true;

const table = document.querySelector('table')

const dropdownDb = {
"classDropdown": [
"Class 6",
"Class 7",
"Class 8",
"Class 9",
"Class 10"
],
"performanceLevel": [
"Select Level",
"Above-Level",
"On-Level",
"Below-Level"
]
}

const studentDb = [
{
"className": 10,
"studentresults": [
{
"studentName": "Student 1",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
},
{
"studentName": "Student 2",
"rank": 2,
"peformanceLevel": "On-Level",
"completedPercent": "65%",
"mid1Score": 368,
"mid2score": 369,
"finalscore": 401
},
{
"studentName": "Student 3",
"rank": 3,
"peformanceLevel": "Below-Level",
"completedPercent": "55%",
"mid1Score": 234,
"mid2score": 326,
"finalscore": 289
},
{
"studentName": "Student 4",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
}
]
},
{
"className": 9,
"studentresults": [
{
"studentName": "Student 1",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
},
{
"studentName": "Student 2",
"rank": 2,
"peformanceLevel": "On-Level",
"completedPercent": "65%",
"mid1Score": 368,
"mid2score": 369,
"finalscore": 401
},
{
"studentName": "Student 3",
"rank": 3,
"peformanceLevel": "Below-Level",
"completedPercent": "55%",
"mid1Score": 234,
"mid2score": 326,
"finalscore": 289
},
{
"studentName": "Student 4",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
}
]
},
{
"className": 8,
"studentresults": [
{
"studentName": "Student 1",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
},
{
"studentName": "Student 2",
"rank": 2,
"peformanceLevel": "On-Level",
"completedPercent": "65%",
"mid1Score": 368,
"mid2score": 369,
"finalscore": 401
},
{
"studentName": "Student 3",
"rank": 3,
"peformanceLevel": "Below-Level",
"completedPercent": "55%",
"mid1Score": 234,
"mid2score": 326,
"finalscore": 289
},
{
"studentName": "Student 4",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
}
]
},
{
"className": 7,
"studentresults": [
{
"studentName": "Student 1",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
},
{
"studentName": "Student 2",
"rank": 2,
"peformanceLevel": "On-Level",
"completedPercent": "65%",
"mid1Score": 368,
"mid2score": 369,
"finalscore": 401
},
{
"studentName": "Student 3",
"rank": 3,
"peformanceLevel": "Below-Level",
"completedPercent": "55%",
"mid1Score": 234,
"mid2score": 326,
"finalscore": 289
},
{
"studentName": "Student 4",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
}
]
},
{
"className": 6,
"studentresults": [
{
"studentName": "Student 1",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
},
{
"studentName": "Student 2",
"rank": 2,
"peformanceLevel": "On-Level",
"completedPercent": "65%",
"mid1Score": 368,
"mid2score": 369,
"finalscore": 401
},
{
"studentName": "Student 3",
"rank": 3,
"peformanceLevel": "Below-Level",
"completedPercent": "55%",
"mid1Score": 234,
"mid2score": 326,
"finalscore": 289
},
{
"studentName": "Student 4",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
}
]
},
]
//table.js
function loadElements(){
loadForm();
loadTable();
}

function loadForm(){
const classDdl = document.querySelector('#classDdl')
for(let index in dropdownDb["classDropdown"]){
let eachclass = dropdownDb['classDropdown'][index];
let option = document.createElement('option')
option.innerHTML = eachclass;
option.setAttribute('value',eachclass)
if(eachclass==="Class 10"){
option.setAttribute('selected','true')
}
classDdl.appendChild(option)
}
const perfDdl = document.querySelector('#perfDdl')
for(let index in dropdownDb["performanceLevel"]){
let eachclass = dropdownDb['performanceLevel'][index];
let option = document.createElement('option')
option.innerHTML = eachclass;
option.setAttribute('value',eachclass)
perfDdl.appendChild(option)
if(eachclass==="Select Level"){
resetDdl();
}
}

}
function resetDdl(){
const perfDdl = document.querySelector('#perfDdl')
let option = perfDdl.firstChild;
option.setAttribute('selected','true')
option.setAttribute('hidden','true')
option.setAttribute('disabled','true')
perfDdl.selectedIndex=0;
let classDdl = document.querySelector('#classDdl');
console.log(classDdl.value , classDdl.selectedIndex)
}



function loadTable(){
// constructThead();
constructTbody();

}

function constructTbody(){
let classDdl = document.querySelector('#classDdl');
let perfDdl = document.querySelector('#perfDdl');
let perfLvl = perfDdl.value;
let className = classDdl.selectedIndex + 6;
let classData;
let oldTbody = table.querySelector('tbody');
table.removeChild(oldTbody);
let tbody = document.createElement('tbody')
// fetching only the required class data
for(let index in studentDb){
let eachclass = studentDb[index]
if(eachclass['className'] == className){
classData = eachclass['studentresults']
}
}

//populating the table body
for(let i=0; i<classData.length; i++){
let rowdata = classData[i];
// console.log(rowdata)
let tr = document.createElement('tr');
let skip = false;
for(let key in rowdata){
// console.log(rowdata[key]);
let td = document.createElement('td')
if(key=='completedPercent'){
td = tr.lastChild;
if(td.innerHTML == perfLvl){
skip = false;
}
else{
skip=true;
}
td.innerHTML = rowdata[key] + " " + td.innerHTML
}else{
td.innerHTML= rowdata[key];
}
tr.appendChild(td);
}
if(i%2==0){
tr.className = 'oddRow'
}else tr.className='evenRow'
if(!skip || firstTimeLoad){
tbody.appendChild(tr);
}
}
table.appendChild(tbody)
}


let firstTimeLoad = true;

let asc = true;

const table = document.querySelector('table')

const dropdownDb = {
"classDropdown": [
"Class 6",
"Class 7",
"Class 8",
"Class 9",
"Class 10"
],
"performanceLevel": [
"Select Level",
"Above-Level",
"On-Level",
"Below-Level"
]
}

const studentDb = [
{
"className": 10,
"studentresults": [
{
"studentName": "Student 1",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
},
{
"studentName": "Student 2",
"rank": 2,
"peformanceLevel": "On-Level",
"completedPercent": "65%",
"mid1Score": 368,
"mid2score": 369,
"finalscore": 401
},
{
"studentName": "Student 3",
"rank": 3,
"peformanceLevel": "Below-Level",
"completedPercent": "55%",
"mid1Score": 234,
"mid2score": 326,
"finalscore": 289
},
{
"studentName": "Student 4",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
}
]
},
{
"className": 9,
"studentresults": [
{
"studentName": "Student 1",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
},
{
"studentName": "Student 2",
"rank": 2,
"peformanceLevel": "On-Level",
"completedPercent": "65%",
"mid1Score": 368,
"mid2score": 369,
"finalscore": 401
},
{
"studentName": "Student 3",
"rank": 3,
"peformanceLevel": "Below-Level",
"completedPercent": "55%",
"mid1Score": 234,
"mid2score": 326,
"finalscore": 289
},
{
"studentName": "Student 4",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
}
]
},
{
"className": 8,
"studentresults": [
{
"studentName": "Student 1",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
},
{
"studentName": "Student 2",
"rank": 2,
"peformanceLevel": "On-Level",
"completedPercent": "65%",
"mid1Score": 368,
"mid2score": 369,
"finalscore": 401
},
{
"studentName": "Student 3",
"rank": 3,
"peformanceLevel": "Below-Level",
"completedPercent": "55%",
"mid1Score": 234,
"mid2score": 326,
"finalscore": 289
},
{
"studentName": "Student 4",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
}
]
},
{
"className": 7,
"studentresults": [
{
"studentName": "Student 1",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
},
{
"studentName": "Student 2",
"rank": 2,
"peformanceLevel": "On-Level",
"completedPercent": "65%",
"mid1Score": 368,
"mid2score": 369,
"finalscore": 401
},
{
"studentName": "Student 3",
"rank": 3,
"peformanceLevel": "Below-Level",
"completedPercent": "55%",
"mid1Score": 234,
"mid2score": 326,
"finalscore": 289
},
{
"studentName": "Student 4",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
}
]
},
{
"className": 6,
"studentresults": [
{
"studentName": "Student 1",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
},
{
"studentName": "Student 2",
"rank": 2,
"peformanceLevel": "On-Level",
"completedPercent": "65%",
"mid1Score": 368,
"mid2score": 369,
"finalscore": 401
},
{
"studentName": "Student 3",
"rank": 3,
"peformanceLevel": "Below-Level",
"completedPercent": "55%",
"mid1Score": 234,
"mid2score": 326,
"finalscore": 289
},
{
"studentName": "Student 4",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
}
]
},
]


// till sort table is working

//temp.js
function loadElements(){
loadForm();
loadTable();
}

function loadForm(){
const classDdl = document.querySelector('#classDdl')
for(let index in dropdownDb["classDropdown"]){
let eachclass = dropdownDb['classDropdown'][index];
let option = document.createElement('option')
option.innerHTML = eachclass;
option.setAttribute('value',eachclass)
if(eachclass==="Class 10"){
option.setAttribute('selected','true')
}
classDdl.appendChild(option)
}
const perfDdl = document.querySelector('#perfDdl')
for(let index in dropdownDb["performanceLevel"]){
let eachclass = dropdownDb['performanceLevel'][index];
let option = document.createElement('option')
option.innerHTML = eachclass;
option.setAttribute('value',eachclass)
perfDdl.appendChild(option)
if(eachclass==="Select Level"){
resetDdl();
}
}

}
function resetDdl(){
const perfDdl = document.querySelector('#perfDdl')
let option = perfDdl.firstChild;
option.setAttribute('selected','true')
option.setAttribute('hidden','true')
option.setAttribute('disabled','true')
perfDdl.selectedIndex=0;
let classDdl = document.querySelector('#classDdl');
console.log(classDdl.value , classDdl.selectedIndex)
}

function generateReport(){
// console.log(`Button is working`)
let perfDdl = document.querySelector('#perfDdl')
// to contruct table body only if value selected is not "Select Level"
firstTimeLoad = false;
if(perfDdl.selectedIndex > 0){
constructTbody();
}

}


function loadTable(){
// constructThead();
constructTbody();

}
function constructThead(){
let thead = document.createElement('thead');

// Creating a tr tag
let tr = document.createElement('tr');
let headers = studentDb[0]['studentresults'][0]; //accessing object with class 10 and 1st student object for headers
for (let header in headers){
let th = document.createElement('th');
th.innerHTML = header;
tr.appendChild(th);
}
thead.appendChild(tr);
table.appendChild(thead);
}

function constructTbody(){
let classDdl = document.querySelector('#classDdl');
let perfDdl = document.querySelector('#perfDdl');
let perfLvl = perfDdl.value;
let className = classDdl.selectedIndex + 6;
let classData;
let oldTbody = table.querySelector('tbody');
table.removeChild(oldTbody);
let tbody = document.createElement('tbody')
// fetching only the required class data
for(let index in studentDb){
let eachclass = studentDb[index]
if(eachclass['className'] == className){
classData = eachclass['studentresults']
}
}

//populating the table body
for(let i=0; i<classData.length; i++){
let rowdata = classData[i];
// console.log(rowdata)
let tr = document.createElement('tr');
let skip = false;
for(let key in rowdata){
// console.log(rowdata[key]);
let td = document.createElement('td')
if(key=='completedPercent'){
td = tr.lastChild;
if(td.innerHTML == perfLvl){
skip = false;
}
else{
skip=true;
}
td.innerHTML = rowdata[key] + " " + td.innerHTML
}else{
td.innerHTML= rowdata[key];
}
tr.appendChild(td);
}
if(i%2==0){
tr.className = 'oddRow'
}else tr.className='evenRow'
if(!skip || firstTimeLoad){
tbody.appendChild(tr);
}
}
table.appendChild(tbody)
}

function sortTable(){

// let col = header.getAttribute('value');
let col = 0;
let tbody = document.querySelector('tbody');
let thead = document.querySelector('thead');

console.log(`You have clicked on one of the header`)// reference output
// gives total number of childnode i.e number of rows we have inside <tbody>
// console.log(tbody.childElementCount)

for ( let i =0; i<tbody.childElementCount; i++){
for(let j=i+1; j<tbody.childElementCount; j++){
let row1 = tbody.childNodes[i];
let row2 = tbody.childNodes[j];

value1= row1.childNodes[col].innerHTML
value2 = row2.childNodes[col].innerHTML

// actual statement for sorting ( checking if sorting is required or not)
if(value1.localeCompare(value2) === 1 && asc){
//swapping the rows
tbody.insertBefore(row2,row1)
}
if(value1.localeCompare(value2) === -1 && !asc){
//swapping the rows
tbody.insertBefore(row2,row1)
}
}
}
let tr = thead.childNodes[1];
let th = tr.childNodes[1]
let span = th.childNodes[3]
if(asc){
span.innerHTML = "&uarr;";
}
else{
span.innerHTML = "&darr;";
}
colorify(tbody)
asc = !asc;
}


function colorify(tbody){
for( let i=0 ; i<tbody.childElementCount; i++){
let row = tbody.childNodes[i];
if(i%2==1){
row.className="oddRow"
}
else{
row.className="evenRow"
}
}
}

let firstTimeLoad = true;

let asc = true;

const table = document.querySelector('table')

const dropdownDb = {
"classDropdown": [
"Class 6",
"Class 7",
"Class 8",
"Class 9",
"Class 10"
],
"performanceLevel": [
"Select Level",
"Above-Level",
"On-Level",
"Below-Level"
]
}

const studentDb = [
{
"className": 10,
"studentresults": [
{
"studentName": "Student 1",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
},
{
"studentName": "Student 2",
"rank": 2,
"peformanceLevel": "On-Level",
"completedPercent": "65%",
"mid1Score": 368,
"mid2score": 369,
"finalscore": 401
},
{
"studentName": "Student 3",
"rank": 3,
"peformanceLevel": "Below-Level",
"completedPercent": "55%",
"mid1Score": 234,
"mid2score": 326,
"finalscore": 289
},
{
"studentName": "Student 4",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
}
]
},
{
"className": 9,
"studentresults": [
{
"studentName": "Student 1",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
},
{
"studentName": "Student 2",
"rank": 2,
"peformanceLevel": "On-Level",
"completedPercent": "65%",
"mid1Score": 368,
"mid2score": 369,
"finalscore": 401
},
{
"studentName": "Student 3",
"rank": 3,
"peformanceLevel": "Below-Level",
"completedPercent": "55%",
"mid1Score": 234,
"mid2score": 326,
"finalscore": 289
},
{
"studentName": "Student 4",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
}
]
},
{
"className": 8,
"studentresults": [
{
"studentName": "Student 1",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
},
{
"studentName": "Student 2",
"rank": 2,
"peformanceLevel": "On-Level",
"completedPercent": "65%",
"mid1Score": 368,
"mid2score": 369,
"finalscore": 401
},
{
"studentName": "Student 3",
"rank": 3,
"peformanceLevel": "Below-Level",
"completedPercent": "55%",
"mid1Score": 234,
"mid2score": 326,
"finalscore": 289
},
{
"studentName": "Student 4",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
}
]
},
{
"className": 7,
"studentresults": [
{
"studentName": "Student 1",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
},
{
"studentName": "Student 2",
"rank": 2,
"peformanceLevel": "On-Level",
"completedPercent": "65%",
"mid1Score": 368,
"mid2score": 369,
"finalscore": 401
},
{
"studentName": "Student 3",
"rank": 3,
"peformanceLevel": "Below-Level",
"completedPercent": "55%",
"mid1Score": 234,
"mid2score": 326,
"finalscore": 289
},
{
"studentName": "Student 4",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
}
]
},
{
"className": 6,
"studentresults": [
{
"studentName": "Student 1",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
},
{
"studentName": "Student 2",
"rank": 2,
"peformanceLevel": "On-Level",
"completedPercent": "65%",
"mid1Score": 368,
"mid2score": 369,
"finalscore": 401
},
{
"studentName": "Student 3",
"rank": 3,
"peformanceLevel": "Below-Level",
"completedPercent": "55%",
"mid1Score": 234,
"mid2score": 326,
"finalscore": 289
},
{
"studentName": "Student 4",
"rank": 1,
"peformanceLevel": "Above-Level",
"completedPercent": "85%",
"mid1Score": 498,
"mid2score": 501,
"finalscore": 499
}
]
},
]


// till sort table is working




//html