Please review my web application design

[pauland]

Thanks for the tip about "no buttons". I will try to implement this option, the main thing is that users do not get confused in which field to enter the amount

I think the fields are clearly named and you can change ANY field!

[gwpriester]

Antony - What do you plan to do with this app?

[antony_k]

Antony - What do you plan to do with this app?

I made this calculator while learning css/html and javascript. Now I will improve the usability of the website.

[johnpatel]

Hi Antony,

In my opinion, you have to work on UI/UX part.
When I enter the amount and click on Add/Remove VAT button, then the new popup comes and it shows the calculated result.
I think it's not a proper way to show results. You can show results just below the calculator and remaining fields stays as it is.
Look at this one: vat-calc_dot_net

[Acorn]

As presented you offer no opportunity for What If scenarios.

I would prefer to see a set of sliders where the VAT can be dragged to a new value horizontally and the amount vertically.
A presentation like this might work on a phone:

<form>
    <input type="range" style="width:50%; height: 100%" id="capThou" data-filter="" data-unit="" min="0" max= "9" value="7" ignore="0" step="1"><strong><span id="capThouVal">7</span></strong>,000
    <input type="range" style="width:50%; height: 100%" id="capHun" data-filter="" data-unit="" min="0" max= "9" value="3" ignore="0" step="1"><strong><span id="capHunval">3</span></strong>00
    <input type="range" style="width:50%; height: 100%" id="capTen" data-filter="" data-unit="" min="0" max= "9" value="4" ignore="0" step="1"><strong><span id="capTenVal">4</span></strong>0
    <input type="range" style="width:50%; height: 100%" id="capUnit" data-filter="" data-unit="" min="0" max= "9" value="6" ignore="0" step="1"><strong><span id="capUnitVal">6</span>.<span id="capDecimal">38</span></strong>
</form>
<form>
    <input type="range" style="width:100%; height: 100%" id="capDeci" data-filter="" data-unit="" min="0" max= "99" value="38" ignore="0" step="1">
</form>

Obviously, you would still have an input box for both that can reflect the sliders' setting or adjust the sliders to the typed value.
An on-line example of a slider (almost) in action is http://www.vatcalculator.co.uk.

You need yours to be interactive to steal a march on the large number of simplistic calculators already out there.
This is the type of interactive i would promote: CSS3 Image Filter Generator.xar, which you won't be able to see or use without a Xara Desktop application.
So view here; http://acorn.xara.hosting/ImageFiltering/.

Acorn

[Egg Bramhill]

I think this is great, I just can't follow the steps to apply the generated code to an object. Any help would be gratefully accepted.

Edit: No sooner posted this and got it to work 100%. It was me not naming the image htmlclass="filter"