adamsheaffer/clinic

First core JavaScript skills assessment

Beginner JavaScript Review

Bacteria Tracker

In this exercise, your task is to build a workflow for testing people for a bacterial infection, and then making sure that a clinic has a report of people who have it.

Setup

1. Open your terminal and cd to your workspace directory.
2. Clone this project.
3. Once the project is cloned, cd into it and then run npm install.
4. Once the installations are complete, run the npm run test command. You will see all of the tests for your code - which ones pass, and which ones fail. All the tests will fail at this point, because you haven't written the code to make them pass. Keep this terminal window open while you are working on this project. Come back to it to run the tests again after adding each feature described below.

Note: All of the code for this project will be created the src directory of the project. Open a new terminal session, and cd to the project directory again. Then you can cd src to change to that directory in your terminal and run your appplication server. To check what's already in the src directory, use the ls command to see its contents.

Testing the Patients

1. Create a scripts/TestFacility.js module.
2. Define a variable in the module to hold a number that you can use when setting the primary key for each person you create (i.e. the id property). It should have an initial value of 1. Use this when setting the id property on the person. You will need to increase this value by one after each new person is created.
3. Define and export a function named testPerson.
4. The testPerson function must accept the following values as input (i.e. it needs parameters), in the following order.
   1. First name of the person being tested (e.g. "Kelly", "Peter")
   2. Age of the person (e.g. 31, 65)
   3. Person's temperature (e.g. 98, 103)
5. The testPerson function must return an object with the following properties on it. The id value you defined earlier should be incremented by 1 each time a person is tested.
   1. firstName whose value comes from the parameter
   2. age whose value comes from the parameter
   3. temperature whose value comes from the parameter
   4. id whose value comes from the incremented module variable

Checking Your Work

In the main.js module, invoke the testPerson function and provide the required values as arguments. Store the object that gets returned into a variable, and then use console.log() to view the object.

Also look at your terminal window that is running the tests and make sure that the Person has been tested test is passing.

1 out of 3 Test Suites should be passing.

Once you have it working, test 5 people in the main.js module.

THEN PUSH YOUR CODE TO GITHUB

Clinical Consultation

1. Define a scripts/Clinic.js module.
2. Define a variable in the module that will store the people objects after they have been diagnosed in the clinic. Its initial value should be an empty array.
3. Define and export an object named clinic which should have 2 properties on it:
   1. A key of usePatients and its value is a function that should return the array of diagnosed patients.
   2. A key of diagnose and its value is a function that is responsible for providing a diagnosis for a tested person.
4. The function must accept the following values as input (i.e. it needs parameters), in the following order.
   1. An object representing a person who was tested with the testPerson function.
   2. A number specifying how many days the person has been exhibiting symptoms.
5. The function must add a new property of diagnosed with the value of true to the object. If you don't remember, you can easily add new properties to objects in JavaScript.
6. The function must also add a new property of infected to the object.
   1. If the person's temperature is above 101 and the number of days the person has been symptomatic is greater than, or equal to, 4 then infected property must have a value of true.
   2. Otherwise, the infected property must have a value of false.
7. After both of the new properties have been added, add the person to the array of diagnosed people. Recall which method is used to add new items to an array.
8. Finally, the function should return the augmented object.

Checking Your Work

In the main.js module, invoke the diagnose function for each of the 5 people who were tested. Ensure you provide the required values as arguments. Store the object that gets returned into a variable, and then use console.log() to view the objects and make sure it has the right properties on each.

To check your work, make sure that at least one of the people is infected by providing a temperature that is too high, and a number symptomatic days being 4 or greater.

Also look at your terminal window that is running the tests and make sure that the following tests pass.

• Person is diagnosed
• Person is infected when temperature and symptomatic days are too high
• Person is not infected when days are too few
• Person is not infected when no conditions met

2 out of 3 Test Suites should be passing.

THEN PUSH YOUR CODE TO GITHUB

Display the Catalog

Your next task is to create HTML representations of the people who have been tested and display them on the DOM.

Define DOM Target

1. Create an <article> element in the index.html file.
2. The article element must have a class of patients.

Create Patient HTML

1. Create a scripts/PatientList.js module.
2. Define and export a PatientList function.
3. The PatientList function must import that array of patients from the from the Clinic.js module.
4. The PatientList function must convert each object in the array to an HTML representation string. The resulting HTML should look like the following example. Recall the ${} syntax for interpolating JavaScript variables into string templates.

   <section class="patient" id="patient--1">
       <h2 class="patient__name">Doug</h2>
       <div class="patient__properties">
           <p>Age: 32</p>
           <p>Temperature: 101</p>
           <p>Diagnosed: true</p>
       </div>
       <div class="patient_diagnosis">
           Infected: false
       </div>
   </section>

5. The function must put all of the HTML representations into a single string. Recall that there are ways to turn an array's values into a single string.
6. The function then must return that single string that has all of the patient HTML representation in it.
7. In the main.js module, invoke the PatientList component function. Take the string of HTML representations that it returns and update the inner HTML of the article element you created in index.html. You need to remember how to get a reference to DOM element in JavaScript and then assign it some HTML.

Checking Your Work

Make sure your web server is running, and then visit http://localhost:<yourPort#> and you should see your list of diagnosed patients. It should look similiar to this.

Then look at your terminal window that is running the tests and make sure that the following tests pass.

• Patients are rendered to DOM

All 3 Test Suites should be passing.

THEN PUSH YOUR CODE TO GITHUB