Created
February 11, 2019 17:58
-
-
Save finalcut/058defdc9a5ec0e7d0d4bc428340f6d7 to your computer and use it in GitHub Desktop.
final vesion of the assignment app
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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