First Snippet: A student-developed procedure

async function createRatingsTableForPost(postID) {
    const table = document.getElementById("ratings-table");
    table.innerHTML = "";

    try {
        const response = await fetch(`${pythonURI}/api/rate?post_id=${postID}`, fetchOptions);
        const data = await response.json();

        if (data.length === 0) {
            table.innerHTML = "<tr><td colspan='3'>No ratings available.</td></tr>";
            return;
        }

        const header = document.createElement("thead");
        header.innerHTML = `
            <tr>
                <th>Rating</th>
                <th>User ID</th>
                <th>Actions</th>
            </tr>`;
        table.appendChild(header);

        const body = document.createElement("tbody");
        data.forEach((rating, index) => {
            const row = document.createElement("tr");

            row.innerHTML = `
                <td>${rating.rating}</td>
                <td>${rating.username}</td>
                <td>
                    <button class="action-btn" id="update-btn-${index}">Update</button>
                    <button class="action-btn" id="delete-btn-${index}">Delete</button>
                </td>
            `;

            body.appendChild(row);
        });
        table.appendChild(body);
    } catch (error) {
        console.error("Error fetching ratings:", error);
        table.innerHTML = "<tr><td colspan='3'>Failed to load ratings.</td></tr>";
    }
}
  • Descriptive Name: The procedure is called createRatingsTableForPost. Additionally, the return type is void, and there is no return because the purpose of the function is to alter the DOM and change what is displayed on the frontend.
  • At least one parameter that affects functionality: The procedure takes a postID parameter, which determines the specific activity or particular attr,action which has ratings that are being accessed

Algorithm using sequencing, selection, and iteration:

  • Sequencing: The procedure first clears whatever existing table content there is, then fetches data for the specific POSTID, in order to fulfill the purpose of creating a new table with accurate data in the correct order.
  • Selection: There is a selection because there is an if statement that makes sure the data constant has real usable values and is not empty or null. By only allowing the algorithm to continue if the data has a length that is no 0, showing a selective step.
  • Iteration: The procedure uses the forEach loop in javascript, a special type of loop used on arrays in order to iterate through each rating that exists as an item in the array rather than using a set index like a traditional for loop, using a for loop in order to add each rating as a row to the table to display.

Second Snippet: A code segment calling the procedure within the program:

createRatingsTableForPost(postID);

The second snippet shows the procedure called within the program. Here, the postID is passed as a parameter to the createRatingsTable function, which allows it to fetch and display ratings for the specific attraction(ie Eiffel Tower) that is associated with the specific postID.

List (or Collection) Code Snippets:

First Snippet: A code segment that stores data in a list (array or collection):

const response = await fetch(`${pythonURI}/api/rate?post_id=${postID}`, fetchOptions);
const data = await response.json();

The response constant stores data from the backend api that contains username and rating information in the form of a json. The data constant takes that and converts the json to a more usable javascript object which is a list-type data that contains large amounts of data with the properties of username and rating, and many values. This list allows efficient management of multiple ratings, enabling the program to easily loop through and display each item dynamically, simplifying the handling of varying amounts of data.

Second Snippet: A code segment that uses the list to process, access, or modify elements:

data.forEach((rating, index) => {
    const row = document.createElement("tr");

    row.innerHTML = `
        <td>${rating.rating}</td>
        <td>${rating.username}</td>
        <td>
            <button class="action-btn" id="update-btn-${index}">Update</button>
            <button class="action-btn" id="delete-btn-${index}">Delete</button>
        </td>
    `;

    body.appendChild(row);
});

This code shows how the list-type data, an array called rating is used in my project. It checks each element of the data array, creating individual table rows for each rating and displaying them in the ratings table that is displayed for the user, accesing the rating and username attributes/properties of the rating list/array, utilizing it and taking advantage of its object format.