Github Code

First Learning how to make a calender

Link

Learning how to fetch data from a website

Link

Code that checks for username and password with API CRUD

Link

Simpflied Code

Link

Video

Link

Final Javascript Code and Writeup 

const tableBody = document.querySelector('#table');
const url = "http://dolphins3.duckdns.org/api/users/";
const calender_fetch = url + '/calender';
const weekdays = ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"];
const urls = {};
for (const day of weekdays) {
  urls[day] = `${url}/${day}`;
  urls[`delete_${day}`] = `${url}/delete_${day}`;
  urls[`update_${day}`] = `${url}/update_${day}`;
}
if (sessionStorage.getItem("uid") == null) {
  location.href = "https://jakewarren2414.github.io/dolphins2/login";
}
const body = {
  username: sessionStorage.getItem("uid")
};
const requestOptions = {
  method: 'POST',
  body: JSON.stringify(body),
  headers: {
    "content-type": "application/json",
  },
};
fetch(calender_fetch, requestOptions)
  .then(response => {
    if (response.status !== 200) {
      const errorMsg = 'Database create error: ' + response.status;
      console.log(errorMsg);
      return;
    }
    response.json().then(data => {
      document.getElementById("monday").innerHTML = data.monday;
      document.getElementById("tuesday").innerHTML = data.tuesday;
      document.getElementById("wednesday").innerHTML = data.wednesday;
      document.getElementById("thursday").innerHTML = data.thursday;
      document.getElementById("friday").innerHTML = data.friday;
      document.getElementById("saturday").innerHTML = data.saturday;
      document.getElementById("sunday").innerHTML = data.sunday;
    })
  })
function Update() {
  const input = document.getElementById("input").value;
  const week = document.getElementById("week").value;
  const body = {
    username: sessionStorage.getItem("uid")
  };
  body[week] = input;
  const request = {
    method: 'POST',
    body: JSON.stringify(body),
    headers: {
      "content-type": "application/json",
    },
  };
  const url = urls[`update_${week}`];
  fetch(url, request)
    .then(response => {
      if (response.status !== 200) {
        const errorMsg = 'Database create error: ' + response.status;
        console.log(errorMsg);
        return;
      }
      response.json().then(data => {
        document.getElementById(week).innerHTML = data[week];
      })
    })
}


function Add() {
  const input = document.getElementById("input").value;
  const week = document.getElementById("week").value;
  const fetchUrl = ${week}_fetch;
  const dayValue = ${week};
  const dayBody = {
    username: sessionStorage.getItem("uid"),
    [dayValue]: input
  };
  const dayRequest = {
    method: 'POST',
    body: JSON.stringify(dayBody),
    headers: {
    "content-type": "application/json",
  },
  };
  fetch(fetchUrl, dayRequest)
  .then(response => {
    if (response.status !== 200) {
      const errorMsg = Database create error: ${response.status};
      console.log(errorMsg);
    return;
  }
  response.json().then(data => {
    document.getElementById(week).innerHTML = data[dayValue];
  })
  })
}

function Remove() {
  const week = document.getElementById("week").value;
  const delete_body = { username: sessionStorage.getItem("uid") };
  const days = ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"];
  const delete_site = "delete_site_url";

  if (days.includes(week)) {
    const delete_request = {
      method: 'POST',
      body: JSON.stringify(delete_body),
      headers: { "content-type": "application/json" },
    };
    fetch(`${delete_site}/${week}`, delete_request)
      .then(response => {
        if (response.status !== 200) {
          const errorMsg = `Database create error: ${response.status}`;
          console.log(errorMsg);
          return;
        }
        response.json().then(data => {
          document.getElementById(week).innerHTML = data[week];
        })
      })
  }
}

Procedural Abstraction:

The provided JavaScript code follows the procedural abstraction technique as it breaks down the functionality of the code into multiple functions like Update(), Add(), and Remove(). Additionally, it uses classes like fetch() to fetch data from the server and manipulate it based on user actions.

Data Abstraction:

The JavaScript code uses JSON data structure to store user information and calendar data. It also uses a dictionary urls to store the URLs for different user actions like update, delete, etc. Moreover, the data stored in the database tables are abstracted using HTTP methods like GET, POST, PUT, DELETE which are called to manipulate the data.

Usage of Control Structures:

The JavaScript code uses iteration and conditional statements to display calendar data on the frontend using a loop to iterate through the weekdays. It also uses conditional statements to handle errors that may occur when manipulating data on the backend. For example, the if (response.status !== 200) statement is used to handle errors when the server returns a status other than 200. The Update() function also shows a different result when executed with different parameters, updating the calendar for the day that the user selects.