Tri 2 Final Project Personal Achievements

• Achievements
  • Utilizing debugging (with inspect)
  • Writing functions
  • Understanding of concepts like FE and BE connection
• Reflection

Achievements

Utilizing debugging (with inspect)

Before this project, I knew of debugging with inspect, but I never utilized it. Once I learned to, it helped my coding process so incredibly much, I was able to quickly identify and attempt to fix the error as it ran, as well as exactly where in the code to fix. Before, I would scour through lines and lines of code, in attempt to find where the error was, but now I don't have to! The best part of this is that all you have to do is run your program like normal, not like other methods of debugging where the problem code is identified, but you still don't know what to do with it, or you have to put an alert on every function to find it.

Writing functions

I am now much better and more comfortable with writing and calling functions. I was able to implement selection, iteration, and sequencing into my functions, when at the beginning of last trimester, I didn't even know what a function was!

function printDate() {
    // get user inputs
    const x = document.getElementById("lastperiod").value;
    var y = document.getElementById("cyclelength").value;
    const 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>" ;
    }
  }

This function is for UI, it takes user input to calculate the user's next period.

function delete_user() {
    const deleteOptions = {
          method: 'DELETE',
          headers: {
              "content-type": "application/json",
              'Authorization': 'Bearer my-token',
          },
      };
      fetch(delete_fetch, deleteOptions)
        .then(response => {
          // trap error response from Web API
          if (response.status !== 200) {
            window.location.reload();
            return;
          }
          // response contains valid result
          response.json().then(data => {
              console.log(data);
          })
      })
    }

This function works with our APIs to delete user data from the database.

Understanding of concepts like FE and BE connection

I had no idea how to connect separate repositories of frontend and backend to work together. However, now that we've worked so much on this concept through this project, I have gained so much knowledge and understanding for these computer science principles. I know now that we can retrieve data with APIs that we make. Last trimester, we learned about APIs, but I had no idea that it was pretty simple to make one yourself. With a deployed database, we can retrieve the data, and work with it in the frontend! It is cool to me that totally different programs can come and work together pretty simply.

Reflection

It may seem to a knowledgeable CS student that my personal achievements are very underwhelming and simple, but before this class, I had zero knowledge about coding. Concepts like FE and BE connection I haven't even thought to think about before entering this class, I know comprehend. So now, to understand so many concepts and be able to write my own code, is a very large achievement for me. I am able to write my own functions now without little help (instead of copying off of W3Schools haha), which basically is the foundation of coding. And if I do need help, I first use debugging to figure out the issue, and if I can solve it myself, before asking others. I feel like I am becoming a better and stronger coder.