Phase 1 - Javascript

Navigating through Phase 1, delving into the intricacies of JavaScript has been quite a challenge. While working on the Phase 1 project, I've found the experience enjoyable, yet it has underscored the vast scope for further improvement. In this blog, I intend to outline the processes and hurdles encountered during the project and share the valuable lessons gleaned from these experiences.

The primary objective of this project revolves around the utilisation of the Fetch API, facilitating API requests for data retrieval and server data submission. Given the abundance of concepts not covered in this phase, a significant portion of the project involves extensive research and trial-and-error to ensure the seamless functionality of this Single Page Application (SPA).

The first lesson learned was the effective use of the "change" event and event.target.value to access an element's value. This knowledge proved crucial in utilising the chosen value within the fetch(url) through string interpolation, enabling access to the relevant API endpoint.

 dropDown.addEventListener("change", (event) => {
    currentValue = event.target.value;
  });

let url = `http://www.boredapi.com/api/activity?participants=${currentValue}`

Additionally, I discovered that I could employ the .type and .className properties in JavaScript to define the type and class attributes for the 'Save' and 'Delete' buttons. This allowed me to utilise Bootstrap button styles effectively, especially considering that these buttons are generated only when the function is invoked.

// Save button
   saveBtn = document.createElement("button");
   saveBtn.type = "button";
   saveBtn.className = "btn btn-primary save-btn";
   saveBtn.innerHTML = "Save";

// Delete button
   deleteBtn = document.createElement("button");
   deleteBtn.type = "button";
   deleteBtn.className = "btn btn-danger delete-btn";
   deleteBtn.innerHTML = "Delete";

Furthermore, the act of populating the retrieved data and arranging it within table rows provided an opportunity to apply diverse document methods such as .querySelector(), .createElement(), .innerHTML, and .appendChild().

let table = document.querySelector("#tbody");
let row = document.createElement("tr");
table.appendChild(row);

// Create columns
   let c1 = document.createElement("td");
   let c2 = document.createElement("td");
   let c3 = document.createElement("td");
   let c4 = document.createElement("td");
   let c5 = document.createElement("td");

// Activity data input into table
   c1.innerHTML = data.activity;
   c2.innerHTML = data.type.charAt(0).toUpperCase() + data.type.slice(1);
   c3.innerHTML = data.accessibility;
   c4.appendChild(saveBtn);
   c5.appendChild(deleteBtn);

// Adding td element with activity info to tr element
   row.appendChild(c1);
   row.appendChild(c2);
   row.appendChild(c3);
   row.appendChild(c4);
   row.appendChild(c5);

Finally, a notable aspect of this phase involved mastering the utilisation of the JavaScript Object Notation (JSON) server to generate mock APIs without the necessity for intricate server-side coding. Throughout this project, I successfully employed the post method to transmit data, such as the activity name, type, and accessibility rating, to the mock server. This newfound skill will undoubtedly prove invaluable in my future front-end development endeavours, particularly when a backend API is not yet available.

// Posting data to json server using the save button
   saveBtn.addEventListener("click", () => {
     return fetch("http://localhost:3000/data", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
         Accept: "application/json",
       },
       body: JSON.stringify({
         activity: data.activity,
         type: data.type,
         accessibility: data.accessibility,
       }),
     }).then((response) => response.json());
   });

While the JavaScript phase was brief, there remains a wealth of knowledge to explore. It was challenging to absorb all the information within this limited timeframe. Fortunately, technology, particularly platforms like Google, allows us to leverage the online collective expertise to troubleshoot and improve the functionality of my code.