Skip to content

Instantly share code, notes, and snippets.

@finalcut
Created February 11, 2019 17:58
Show Gist options
  • Save finalcut/058defdc9a5ec0e7d0d4bc428340f6d7 to your computer and use it in GitHub Desktop.
Save finalcut/058defdc9a5ec0e7d0d4bc428340f6d7 to your computer and use it in GitHub Desktop.
final vesion of the assignment app
<html>
<head>
<script type="text/javascript">
class Student{
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
}
class Assignment{
constructor(subject){
this.subject = subject;
}
}
class StudentAssignment{
constructor(student, assignment){
this.student = student;
this.assignment = assignment;
}
}
class Course{
constructor(){
this.students = [];
this.assignments = [];
this.studentAssignments = [];
return this;
}
addStudent(student){
this.students.push(student);
}
getRandomStudent(){
var val = this.getRandomObjectFromArray(this.students);
this.students = val.ary;
return val.obj;
}
addAssignment(assignment){
this.assignments.push(assignment);
}
getRandomAssignment(){
var val = this.getRandomObjectFromArray(this.assignments);
this.assignments = val.ary;
return val.obj;
}
getRandomObjectFromArray(ary,debug){
var idx = this.getRandomNumberWithMaxValue(ary.length);
var obj = ary[idx];
ary = this.removeFromArrayAtIndex(ary, idx, debug);
return {'obj': obj, 'ary' :ary};
}
createAssignment(){
var student = this.getRandomStudent();
var assignment = this.getRandomAssignment();
var studentAssignment = new StudentAssignment(student, assignment);
this.studentAssignments.push(studentAssignment);
}
showAssignments(){
var i = 1;
var tb = document.querySelector('#assignments tbody');
this.studentAssignments.forEach(function(sa){
var tr = document.createElement('tr');
if(i % 2 === 0){
tr.classList.add('evenRow');
}
var s = document.createElement('td');
var a = document.createElement('td');
s.innerText = `${sa.student.firstName} ${sa.student.lastName}`;
tr.appendChild(s);
a.innerText = `${sa.assignment.subject}`;
tr.appendChild(a);
tb.appendChild(tr);
i++;
});
}
assignAllStudentsATopic(){
var self = this;
this.students.forEach(function(s){
self.createAssignment();
});
}
// will return
// an integer (whole number) between 0 and maxValue-1
// so, if you have an array of six elements and you want
// a random index value to find a value in that array
// you'd pass in the array length of six and this would
// return a value between 0 and 5
getRandomNumberWithMaxValue(max){
return Math.floor(Math.random() * max);
}
removeFromArrayAtIndex(ary,index,debug){
if(debug) console.log(index);
if(index >= 0 && index <= ary.length){
// we need to know how long the ary array is:
var lastIndex = ary.length -1;
if(index === 0){
// slice with one argument will get from
// the index specified all the way to the end
ary = ary.slice(1);
}
// removing last person, so we grab from the first
//to the next to last
else if(index === lastIndex){
ary = ary.slice(0, lastIndex);
}
else {
// removing someone from the middle of the array
// slice will go from the first argument index
// and then count out to the second argument number
// of indexes to get data.
var firstPart = ary.slice(0,index);
// slice with only one argument will start at the first
// index and then grab all the way to the end of the array
var lastPart = ary.slice(index+1);
// concat is an array method to concatenate two arrays into
// one resulting array.
ary = firstPart.concat(lastPart);
}
}
return ary;
}
}
window.onload = function(){
var c = new Course();
c.addStudent(new Student('Bill', 'Rawlinson'));
c.addAssignment(new Assignment('angular 7'));
c.addAssignment(new Assignment('vue.js'));
c.addAssignment(new Assignment('react'));
c.addAssignment(new Assignment('svg'));
c.addAssignment(new Assignment('REST'));
c.addAssignment(new Assignment('node'));
c.addAssignment(new Assignment('mdx'));
c.addAssignment(new Assignment('babel'));
c.addAssignment(new Assignment('508 compliance'));
c.addAssignment(new Assignment('houdini (css future)'));
c.addAssignment(new Assignment('web components'));
c.addAssignment(new Assignment('progressive web applications'));
c.addAssignment(new Assignment('GraphQL'));
c.addAssignment(new Assignment('Motion UI'));
c.addAssignment(new Assignment('Next.js'));
c.addAssignment(new Assignment('Web Assembly (WASM)'));
c.addAssignment(new Assignment('Platform as a Service (PaaS)'));
c.addAssignment(new Assignment('unit testing'));
//c.createAssignment();
//c.createAssignment();
c.assignAllStudentsATopic();
c.showAssignments();
};
</script>
<style type="text/css">
.evenRow td { background: #eaeaea;}
table { padding:0; margin: 0; border-collapse: collapse}
</style>
</head>
<body>
<table id="assignments">
<thead>
<tr>
<th>Student</th>
<th>Assignment</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment