CPT Project Guide

• Row 1: Program Purpose and Function
• Row 2: Data Abstraction
• Row 3: Managing Complexity
• Row 4: Procedural Abstraction
• Row 5: Algorithm Implementation
• Row 6: Testing

Row 1: Program Purpose and Function

Video

The purpose of the program is to provide a simple application with which women can track their periods, for health and education.

As shown in the video, a user is able to input the day of their last period, how many days it lasted, and the length of their normal menstrual cycle. The program uses these values to calculate their next period, the date of which being the output. The program also logs all this information into a database, so the user is able to come back to the site and reference their last periods, to see if they're on track or not.

Row 2: Data Abstraction

function addData(){
if(document.getElementById("lastperiod").value&&document.getElementById("periodlength").value&&document.getElementById("cyclelength").value)
    myData = {"nextperiod": document.getElementById("lastperiod").value, "periodlength": document.getElementById("periodlength").value, "cyclelength": document.getElementById("cyclelength").value};

create_user(document.getElementById("lastperiod").value, document.getElementById("periodlength").value, document.getElementById("cyclelength").value);
add_row(myData);
}

The list is called "myData". The data contained in the list is grabbed from the user input and is sent, in the list, to another function that saves all of it in a database.

Row 3: Managing Complexity

If the program were to run without "myData", the process of sending the user data to the backend would be much more tedious. I would have to get every element and put it in its own function call, resulting in three calls to the same function with different data that is to be stored together. By putting the values in a list, with only one function call, all three values are sent to the next function at once.

Row 4: Procedural Abstraction

function printDate(x, y, z) {
    // get user inputs
    var x = document.getElementById("lastperiod").value;
    var y = document.getElementById("cyclelength").value;
    var z = document.getElementById("periodlength").value;
    // calculate date
    var resDate = new Date(x);
    resDate.setDate(resDate.getDate() + parseInt(y));
    var year = resDate.getUTCFullYear();
    var month = resDate.getUTCMonth() + 1;
    var startdate = resDate.getUTCDate();
    // print dates onto site
    const periodstart = `${month}/${startdate}/${year}`;
    document.getElementById("nextperiod").innerHTML = periodstart
    var enddate = resDate.getUTCDate() + parseInt(z);
    const periodend = `${month}/${enddate}/${year}`
    document.getElementById("nextperiodend").innerHTML = periodend
    // conditional for if period has unhealthy schedule
    if(parseInt(z) <= 2) {
      document.getElementById("unhealthy").innerHTML = "NOTICE: Your period is abnormally short. This may be a sign of some health concerns.   <a href=\"https://www.everydayhealth.com/pms/short-periods.aspx#:~:text=A%20short%20menstrual%20period%20might,even%20a%20serious%20medical%20problem.\">Learn More</a>" ;
    }
  }

<tr id="input">
    <td><input type="date" id="lastperiod" required></td>
    <td><input type="number" id="periodlength" step="1" min="1" max="10" placeholder="1-10" required/></td>
    <td><input type="number" id="cyclelength" step="1" min="10" max="50" placeholder="10-50" required/></td>
  </tr>
<tr>
  <td></td>
  <td>
    <button class="track" type="button" onclick="printDate(); validate()">
      TRACK
    </button>
  </td>
</tr>

The function, printDate(), calculates the output, aka the user's next period. It retrieves the user input, then runs it through calculations, to provide the output. This function is basically the whole functionality of the first part of my feature, as it directly retrieves input and directly provides output, without running through other functions.

Row 5: Algorithm Implementation

printDate() retrieves the data from the user, then sets all of thes values as variables. The value of the cycle length is set to a integer variable, and is added to the date variable. Then the program outputs the new date, which is the date of the user's next period. The value of the period length is added to the outputted date, then outputs as the user's next period's end date. This shows sequencing, because the first date is to be calculated before the second date can be calculated. There is a conditional that identifies whether or not the user has an unusual/unhealthy period pattern, which is selection. My example of iteration is in a different function as of now, but before the real CPT, I will alter this function to also have iteration:

response.json().then(data => {
    console.log(data);
    for (let row in data) {
      console.log(data[row]);
      add_row(data[row]);
    }
}

This code is part of a function that fetches user data from the backend to display.

Row 6: Testing

Call 1: The first call will be the user input of January 4th, 5 days, and 28 days. 28 days will be added to January 1st to produce the next period start and 5 days will be added to this date to calculate period end. Result will be that the periods will last from February 1st to 6th.

Call 2: The second call will be the user input of January 4th, 2 days, and 28 days. 28 days will be added to January 1st to produce the next period start and 2 days will be added to this date to calculate period end. Result will be that the periods will last from February 1st to 3rd. However, as this period is unhealthy, it will also output a warning text at the bottom, cautioning the user of potential health risks.