Project Features:

1. Full Stack

This bucket list feature integrates between frontend, backend, and the database\
Data stored in database from SQLAlchemy
Flask for the API

2. API

POST: Create a new bucket list item
GET: Retrieve static data as suggestions for bucket list item
DELETE: Remove a bucket list item
PUT: Update a bucket list item

3. Database

id: an identifier
user: profile associated with bucket list entry
title: Title of the bucket list item
description: Describes a little about the item
category: Either travel, adventure, or personal

4. Fetch

For frontend to backend integration

PPR Review:

Procedure:

window.fetchBucketList = async function fetchBucketList() {
    try {
        const response = await fetch(`${pythonURI}/api/bucketlist`, {
            ...fetchOptions,
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        });

        if (!response.ok) {
            throw new Error('Failed to fetch bucket list: ' + response.statusText);
        }

        const data = await response.json();
        const bucketList = document.getElementById('bucket-list');
        bucketList.innerHTML = "";

        data.forEach(item => {
            const listItem = document.createElement('li');
            listItem.style.display = 'flex';
            listItem.style.alignItems = 'center';
            listItem.style.justifyContent = 'space-between';

            const titleItem = document.createElement('span');
            titleItem.textContent = `${item.title} (${item.category})`;

            const descItem = document.createElement('p');
            descItem.textContent = `${item.description}`;

            const updateButton = document.createElement('button');
            updateButton.textContent = 'Update';
            updateButton.style.marginLeft = '10px';
            updateButton.style.padding = '2px 5px';
            updateButton.style.fontSize = '12px';
            updateButton.style.width = '60px';
            updateButton.classList.add('update-btn');
            updateButton.onclick = () => promptUpdateBucketListItem(item.id, item.title, item.category);

            const deleteButton = document.createElement('button');
            deleteButton.textContent = 'Delete';
            deleteButton.style.marginLeft = '10px';
            deleteButton.style.padding = '2px 5px';
            deleteButton.style.fontSize = '12px';
            deleteButton.style.width = '60px';
            deleteButton.onclick = () => deleteBucketListItem(item.id);

            listItem.appendChild(titleItem);
            listItem.appendChild(descItem);
            listItem.appendChild(updateButton);
            listItem.appendChild(deleteButton);
            bucketList.appendChild(listItem);
        });
    } catch (error) {
        console.error('Error fetching bucket list:', error);
    }
}

Defining: The function fetchBucketList is defined as an asynchronous function using async function. This allows it to handle operations that take time, such as fetching data from an API, without stopping the rest of the program from running. Defining the function enables it to be called whenever needed.
Sequencing: The function follows a structured order of execution. First, it sends a request to the API using fetch(). It then checks if the response is successful using if (!response.ok), and if so, it parses the JSON data using await response.json(). After that, it clears any existing content in the bucket list by setting bucketList.innerHTML = “”. It then loops through the fetched data, dynamically creating list items and appending them to the webpage. Finally, if any errors occur, they are caught and handled in the catch block.
Selection: The function includes decision-making processes to handle different situations. It checks if the response from the API is valid using if (!response.ok), and if not, it throws an error to stop further execution. Additionally, the function is wrapped in a try-catch block, which allows it to catch errors that may occur during execution and log them instead of crashing the program.
Iteration: The function loops through the fetched bucket list data using the forEach method. For each item in the data, it creates an HTML <li> element, sets its content based on the item’s title, category, and description, and adds buttons for updating or deleting the item. These elements are then appended to the webpage, allowing the user to see and interact with the list.

Call to procedure

        alert('Bucket list item added successfully!');
        document.getElementById('new-bucket-item').value = '';
        document.getElementById('new-bucket-desc').value = '';
        document.getElementById('new-bucket-category').value = '';
        fetchBucketList();

List

 bucketlists = [
            BucketList(title='Skydiving', description='Experience freefall from an airplane.', category='Adventure', user=1),
            BucketList(title='Visit the Eiffel Tower', description='Travel to Paris and see the Eiffel Tower.', category='Travel', user=2),
            BucketList(title='Learn a New Language', description='Master Spanish within a year.', category='Personal', user=3),
            BucketList(title='Run a Marathon', description='Complete a 26.2-mile marathon.', category='Personal', user=4),
            BucketList(title='Publish a Book', description='Write and publish my first novel.', category='Personal', user=5),
        ]

Bucket list data being stored in a list, this data is being used as static data for my API.

List Being Used

for item in bucketlists:
    print(f"Title: {item.title}, Description: {item.description}, Category: {item.category}, User: {item.user}")