Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
  <meta charset="utf-8">
  <title>Gradebook</title>
</head>
<body id="gradebook-app">
​
<h2>Your Classroom Gradebook</h2>
​
<div>
<button data-bind="click: addWork">Add New Assignment</button>
<table>
    <thead>
        <tr>
            <th>Name</th>
            <!-- ko foreach: assignments -->
            <th><input data-bind="value: workName  + ' ' + ($index() + 1)"/></th>
            <!-- /ko -->
            <th>Class Grade</th>
        </tr>    
    </thead>
    <tbody>
      <!-- ko foreach: students -->
        <tr>
            <td><input data-bind="value: fullName + ' ' + ($index()+1)"/></td>  
            <!-- ko foreach: scores -->  
            <td><input data-bind="value: $rawData"/></td>
            <!-- /ko --> 
            <td data-bind="text: mean($data)" />
            <td><input type="button" value="remove" data-bind="click: $root.removeStudent.bind($root)". /></td>
        </tr> 
      <!-- /ko -->
        <tr>
          <td>Class Work Average</td> 
          <!-- ko foreach: assignments -->
          <td data-bind="text: $root.workMean($data, $index())"></td>
          <!-- /ko -->
        </tr>  
  </tbody>    
</table>
​
<button data-bind="click: addStudent">Add a Student</button>
</div>
​
<script type="text/javascript" charset="utf-8" src="js/lib/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="js/lib/knockout.js"></script>
<script type="text/javascript" charset="utf-8" src="js/main.js"></script>
<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
​
    ga('create', 'UA-39897695-2', 'google.com');
    ga('send', 'pageview');
​
</script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jefftopiapro
0viewers