week 2

by dandiebolt

HTML

<script src="https://www.quickbase.com/db/bfx7sqpm8?a=dbpage&amp;pagename=CourseInfo.js"></script>
<script src="http://api.jquery.com/category/plugins/templates/ "></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
  <script id="testTemplate" type="text/x-jquery-tmpl"> 
   <tr>
    <td class="name">${FName + " " + LName}</td>
    <td>${HW1}</td>
    <td>${HW2}</td>
    <td>${HW3}</td>
    <td>${HW4}</td>
    <td class="mean">${Math.round((HW1+HW2+HW3+HW4)/4)}</td>
    <td class="grade">${letterGrade}</td>   
   </tr>
  </script>

<div id="mydiv">
  <table>
   <caption>Homework Assignments | Grades</caption>
   <thead>
    <tr>
     <th class="name">Name</th>
     <th>1. HW</th>
     <th>2. HW</th>
     <th>3. HW</th>
     <th>4. HW</th>
     <th>Mean</th>
     <th>Grade</th>
    </tr>
   </thead>
   <tbody id="testInfo">
   </tbody>
  </table>
</div>

CSS

body {
    font-size: 10px;
    font-family:Helvetica,Verdana, sans-serif;
}
caption {
    text-align:center;
    font-size:14px;
    padding:.3em;
    font-weight:bold;
    background-color:#0d8af2;
    width:98.7%;
}
table {border:3px solid #0d8af2;}
td,th{
    padding:.5em;
    text-align:right;
}
th.name,td.name{text-align:left;}
td.mean{font-weight:bold;}
td.grade{font-wieght:bold;}
th{font-weight:bold;}
tbody tr:nth-child(odd){background-color:#c3d1dc;}
.good {color:green;}
.bad {color:red;}

JavaScript

function letterGrade(hw1,hw2,hw3,hw4) {
    
    var hwmean=(hw1+hw2+hw3+hw4)/4;

    if (hwmean >= 90) {
       return "A";
    } else if (hwmean >= 80) { 
       return "B";
    } else if (hwmean >= 70) { 
       return "C";
    } else if (hwmean >= 60) { 
       return "D";
    } else if (hwmean >= 50) { 
       return "F";
    } else {
       return "F-";
    }
}
    
$.each(students,function(index,student){     
    student.letterGrade=letterGrade(student.HW1,student.HW2,student.HW3,student.HW4);
                         
    $("#testTemplate").tmpl(student).appendTo("tbody#testInfo");
});

$(".mean").each(function(){
    if ($(this).html()<75){
        $(this).addClass("bad");
    } else if ($(this).html()>85){
        $(this).addClass("good");
    }
});

/*
$("td.grade").each(function(){
    if ($(this).html()<=75){
        $(this).text("D");
    }
    else if ($(this).html()>=90){
        $(this).text("A");
    }
});
*/



    
    
/* Insert loop through mean values here and mark all above 85 as good and under 75 as bad */