You will be developing a voting machine simulator for this weekend's project. The HTML and CSS has already been built for you. Your job is to be able to add the missing functionality for this app. In order to achieve your goals, you will be using JavaScript object-oriented principles (classes) as well as jQuery to add user interaction to your page.
-
Change directory into your
wyncode
folder. -
Clone the following repo
https://github.com/wyncode/js-voter-sim.git
-
Change directory into the cloned project.
-
Run
npm install
in your console.
-
Create four global arrays named
voters
,democrat-candidates
,republican-candidates
, andindependent-candidates
. -
Create a class named
Person
. The constructor method should take 1 parametername
. -
Create a class named
Voter
that inherits fromPerson
. The constructor for this class should take 2 parametersname
andideology
. Remember to usesuper
! Whenever you create a newVoter
, push it into thevoters
array. -
Create a class named
Candidate
that inherits fromPerson
. The constructor for this class should take 2 parametersname
andparty
. Remember to usesuper
! All candidates should have a propertyvotes
which is initialized to the numeric value0
.
Whenever you create a new Candidate
, push it into the candidate
array for their party. e.g. If the newly created Candidate
's party
property is equals to independent
push said candidate into the independent-candidates
array.
-
Add an event listener for the submit event of the Voter form. The event handler for this event should take the values in both the form text input and dropdown and create a new
Voter
instance. Afterwards it must create an<li>
DOM element with the following class"list-group-item"
. Then it must append said<li>
to the<ul>
in the voter list<div>
. -
Add an event listener for the submit event of the Candidate form. The event handler for this event should take the values in both the form text input and dropdown and create a new
Candidate
instance. Afterwards it must create an<li>
DOM element with the following class"list-group-item"
. Then it must append said<li>
to the<ul>
in the candidate list<div>
. -
BONUS (HARD) Add an event listener for the click event for the Randomize button. When clicked this button should create 100 instances of the
Voter
class. Selecting a random ideology is easy. However, what about creating random names? Research annpm
package namedfaker
. Use it to create the names for theVoters
. -
Add an event listener for the click event of the Vote button. The event handler for this event should execute the
vote
function, which you will define in the next session.
-
Create a function called
vote
which is in charge of determining who wins the election. -
This function should go over each of the voters in the
voters
array. -
For each voter, determine what party they voted for.
3a. If the
Voter
'sideology
property is equal toliberal
, the voter has a 60 percent chance of voting democratic, 20 percent chance of voting independent, and 20 percent chance of voting republican.3b. If the
Voter
'sideology
property is equal toneutral
, the voter has a 50 percent chance of voting independent, 25 percent chance of voting democratic, and 25 percent chance of voting republican.3c. If the
Voter
'sideology
property is equal toconservative
, the voter has a 60 percent chance of voting republican, 20 percent chance of voting independent, and 20 percent chance of voting democratic. -
Once you have determined for what party the
Voter
will vote, pick a randomCandidate
from the party's array (democrat-candidates
,independent-candidates
,republican-candidates
) and increase itsvotes
property by 1. -
Finally, go through each one of the Candidates arrays and find the candidate with the most total votes. Use an alert box to declare the name of the winner.
Note: Understand that you can (and should) divide this function
into multiple functions
.