# Currency converter with GUI

I assume you have gone through section {ref}`avalonia-gui-framework`.

GUIs provide a more intuitive interaction with most users. In next weeks, our projects will be GUI-based.

:::{activity} Converting currency converter to a GUI app
:label: currency-converter-with-gui-code
In section {ref}`a-currency-converter-with-input` we created a currency converter that inputs DKK and outputs EUR equivalent.

1. What is the input and output to the currency converter?
1. How does your GUI look like? Sketch it on paper or [xaml.io](https://xaml.io)
1. Browse the [controls of the GUI framework](https://docs.avaloniaui.net/docs/reference/controls/). Which controls could be used to implement your GUI?
1. Create a new GUI project and create your XAML.
1. Use an event that is associated with your chosen GUI control/s that should trigger the currency conversion process, e.g., `Click`, or `TextChanged`.
1. Add the corresponding function to the code-behind.
1. Copy the code from {ref}`a-currency-converter-with-input`, paste it to your code (where does it belong to?) and modify it.
   - Remove `Console`-related functions and connect the data input and output to your GUI instead.

```{dropdown} Hints
- `TextBox` has an event called `TextChanged` that is fired every time the input changes.
- Use `Double.TryParse` that we learned in section {ref}`conversion-between-datatypes`
:::