Web Development 701 ~ Price Calculator

In the previous blog we implememented the functionality around editing and updating the user profile. Now that we have completed that feature requirement for the assessment, now it’s time to implement another of the feature requirements; the price calculator.

To start we are going to create a new app called calculator to keep things cleaner and easier. We do this by django-admin startapp calculator.

The first thing we need to do is add calculator to the INSTALLED_APPS list in the settings.py file and the following path to the urls.py file under our main project directory; web701.

path('', include('calculator.urls'))

The next thing to do is create a urls.py file and add the following.

from django.urls import path
from . import views

urlpatterns = [
    path('calculator', views.calculator, name='calculator'),
]

Now to create add the following to the views.py file in calculator.

def calculator(request):
    if request.method == 'POST':
        form_data = request.POST.dict()

        prices = [
            form_data.get('size'), 
            form_data.get('taste'), 
            form_data.get('yield'), 
            form_data.get('sugar'), 
            form_data.get('calories'), 
            form_data.get('protein'), 
            form_data.get('fiber'), 
            form_data.get('vitaminc')
        ]

        total = 0

        for price in prices:
            total += int(price)

        total = total / len(prices)

        return render(request, 'calculator/calculator.html', {'price':total})
    
    return render(request, 'calculator/calculator.html', {'price': 0})

This is just a makeshift calculator implementation, but it will do for now.

Next to create the calculator.html template (which as follows) and copy over the skeleton.html template.

{% extends "skeleton.html" %}

{% block title %}Calculator{% endblock %}

{% block body %}
    <h1>Price Calculator</h1>
    <h3>Price: ${{ price }}</h3>
    <br>
    <form method="POST" action="{% url 'calculator' %}">
        {% csrf_token %}
        Size:&nbsp;
        <select name="size">
            <option value="1">Small</option>
            <option value="2">Medium</option>
            <option value="3">Large</option>
        </select>
        <br>
        <br>
        Taste:&nbsp;
        <select name="taste">
            <option value="1">Bitter</option>
            <option value="2">Semi-sweet</option>
            <option value="3">Sweet</option>
        </select>  
        <br>
        <br>
        Yield(g):&nbsp;
        <input type="number" name="yield" min="1" max="10" value="1">
        <br>
        <br>
        Color:&nbsp;
        <select name="color">
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="orange">Orange</option>
            <option value="green">Green</option>
            <option value="purple">Purple</option>
            <option value="pink">Pink</option>
            <option value="yellow">Yellow</option>
        </select> 
        <br>
        <br>
        Nutritional value
        <br>
        &nbsp;&nbsp;&nbsp;Sugar content(g):&nbsp;
        <input type="number" name="sugar" min="1" max="100" value="5">
        <br>
        &nbsp;&nbsp;&nbsp;Calories:&nbsp;
        <input type="number" name="calories" min="1" max="1000" value="42">
        <br>
        &nbsp;&nbsp;&nbsp;Protein(g):&nbsp;
        <input type="number" name="protein" min="1" max="100" value="5">
        <br>
        &nbsp;&nbsp;&nbsp;Fiber(g):&nbsp;
        <input type="number" name="fiber" min="1" max="100" value="5">
        <br>
        &nbsp;&nbsp;&nbsp;Vitamin C(mg):&nbsp;
        <input type="number" name="vitaminc" min="1" max="1000" value="275">
        <br>
        <br>
        <input type="submit" value="calculate">
    </form>
{% endblock %}

With the default values we get Price: $41.875. Calculator done.

One final thing to do is add the following to the navbars in the skeleton.html files of both the authentication and calculator apps.

<li><a href="{% url 'calculator' %}">Calculator</a></li>