How to store an output into an empty box

Dash Python
1

Hello, my project is coming along great. I have built a mini tax calculator. But i dont know how to store the output into an empty button / box. I have looked over input docs, and dont think thats what i need. Im not sure if i need a state or somthing? Just looking for guidence or pointed in the right direction so i can troubleshoot please.

Here is the code so far:

from multiprocessing.sharedctypes import Value
from dash import Dash, dcc, html, Input, Output

app = Dash(__name__)
app.layout = html.Div([
    dcc.Dropdown({56: 'NYC',23: 'MTL', 54.3: 'SF'}, 56, id='demo-dropdown'),
    html.Div(id='dd-output-container' 
             ),

html.Br(),

html.Div([
    "Product price: ",
    dcc.Input(id='user-input', value=0, type='number'),
    html.Div(id='dd-output-container2')

]),
html.Br(),
html.Div([
    
    "Total with tax: ",
    dcc.Input(id='blank-input', value=0, type='number'),
    html.Div(id='Combined-output')

]),

])


@app.callback(
    Output('dd-output-container', 'children'),
    Output('dd-output-container2', 'children'),
    Output('Combined-output', 'children'),
    Input('demo-dropdown', 'value'),
    Input('user-input', 'value'),
    Input('blank-input', 'value'),

)
def update_output(value, value1, value3):

    # This is the value from the dictionary and turns it into a decimal (value)
    sales_converstion =  (float(value) /100)

    # This  is the decimal multiplied by the user input whhich is (value 1)
    Sales_tax = (sales_converstion * value1)

    # Then we add value to value1 - which is the salesconverstion

    Total_amount = (Sales_tax + value1)

    value3 = Total_amount
    
    return f'The state tax is: % {value}', f' {value1}', f'  {value3}'


if __name__ == '__main__':
    app.run_server(debug=True)

Thanks for any help

2

Can you define, empty box?

You can make a div that looks like a box and throw the value in it as a child.

3

Hi,
I guess what you want might be similar to the to-do-list example in this link below.

But pattern-matching is kind of complex for beginners. So, my suggestion is that you might as well design it as a table, it will be easier to start using dash-table.

4

Hi, I think this might be the way, im going to try and learn about bootstrap. So should be able to do it that way!

5

Hi thanks for this. That gave me the fear reading over the docs, i struggle with regular callbacks at this stage haha.

Good to know this is there though.