Updated Dockerfile and my answers to code challenge

[AR20-4]

added npm to Dockerfile so the script could run without npm error.

and documented answers to code challenges. Please see below for how I would solve these issues with Javascript because I don't know Python.

Closes #XXX opened app in docker

got app open and running

Notes

Step 1: Implement the parse method

In parserator_web/views.py, use usaddress to implement the AddressParse.parse() method. It should return two pieces of data: address_components: The parsed address address_type: The type of address provided

class AddressParse(APIView): renderer_classes = [JSONRenderer]

def get(self, request):
    # TODO: Flesh out this method to parse an address string using the
    # parse() method and return the parsed components to the frontend.
    return Response({})


def parse(self, address):
    # TODO: Implement this method to return the parsed components of a
    # given address using usaddress: https://github.com/datamade/usaddress
    return address_components, address_type

*This was a challenge considering I've never used many of these frameworks or platforms. This was my first experience with Docker, Django and I don’t know Python, however, I do know Javascript and how I would code this section using Javascript.

How I would do this with Javascript To achieve similar functionality in JavaScript on the frontend side, you can use the “fetch” API to make a “GET” request to your Django backend endpoint that parses the address and returns the parsed components as JSON The JavaScript code will fetch the address parsing results from your Django backend and allow you to handle or display the parsed components and address type in your frontend application. Adjust the endpoint (/api/parse-address) and error handling as necessary to fit your specific frontend and backend setup. // Assuming you have an input field with id 'addressInput' and a button with id 'parseButton' in your HTML

// Event listener for the button click document.getElementById('parseButton').addEventListener('click', function() { // Get the address input value var address = document.getElementById('addressInput').value;

// Make a GET request to your Django backend
fetch('/api/parse-address?address=' + encodeURIComponent(address))
    .then(function(response) {
        // Check if the response is successful
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        // Parse the JSON response
        return response.json();
    })
    .then(function(data) {
        // Handle the parsed data
        console.log('Parsed components:', data.parsed_components);
        console.log('Address type:', data.address_type);
        // Display or use the parsed components and address type as needed
    })
    .catch(function(error) {
        console.error('There was a problem with the fetch operation:', error);
        // Handle errors here
    });

});

Step 2: Complete the API endpoint

In parserator_web/views.py, complete the AddressParse.get() method to return three pieces of data: input_string: The string that the user sent address_components: A dictionary of parsed components that comprise the address, in the format {address_part: tag} (returned by AddressParse.parse()) address_type: A string representing type of the parsed address (returned by AddressParse.parse()) Don't forget to handle strings that cannot be parsed and return errors!

The backend should have an endpoint /api/parse-address that handles GET requests. The endpoint should parse the address using the usaddress library and return a JSON response.

{ "input_string": "123 Main St, Springfield, IL 62701", "address_components": { "AddressNumber": "123", "StreetName": "Main", "StreetNamePostType": "St", "PlaceName": "Springfield", "StateName": "IL", "ZipCode": "62701" }, "address_type": "Street Address" }

Step 3: Wire up the form to send requests to the API

In parserator_web/templates/parserator_web/index.html, fill out the

To add the JavaScript functionality that sends form data to the Django API endpoint (/api/parse-address) and displays the parsed address components on the frontend, you can fill out the

{% endblock %}

Step 4: Display results from the API

In parserator_web/templates/parserator_web/index.html, extend the

To extend the

{% endblock %}