Get the Unit Conversion Result On-the-Fly

-

Previously, if you have read this blog: Angle Conversion Release , you will find that to get a converted angle value, you have to do at least 3 steps:

  1. Choose the source angle unit and target angle unit from two drop down menus.
  2. Type the source angle value.
  3. Click the blue submit button to get the result.

Here we won't show the screenshot any more as you can find it from the previous log.


But now things become more easy and convenient 😆

You only need following 2 steps:

Choose the source angle unit and target angle unit from two drop down menus.  But one difference is that the drop down menu supports autocomplete feature and if you type something in the search bar, it will show all the possible candidate units of which user typing is the sub string.

Here is the sample screenshot:

Even if the drop down list is long, as long as you know the name of the unit, it is still easy for you to find it. ✌

Type the angle value of source unit. Now while you are typing, the angle value of target unit will appear at the same time as long as your input is a valid number.

Here is the sample screenshot:

No need to click the submit button any more! And as we can see, that blue submit button is gone. 😊

Note that all the unit conversion UI use this new pattern now. This article just uses the Angle Conversion page as an example.

Hope you like this new UI pattern and let us know what you think of it.💪




 



Comments

Post a Comment

Popular posts from this blog

Angle Conversion Feature Release

-
Image
 Today StringLand Tech starts to support angle conversion feature. 😁 Here is the Angle Convert web page link : https://stringland.github.io/web/#/math_operations/convert_angle And here is the screenshot:   Currently, only following angle units are included: Degree Radian Gradian Gon Turn Arc Minutes Arc Seconds Quadrant Sextant Hexacontade Octant About the conversion formula, please check the Wikipedia page: https://en.wikipedia.org/wiki/Angle
Read more

Using Next JS in Stringland Tech

-
Next JS - Server Side Generation Previously Stringland Tech used React JS, which caused an issue: Google could only index home page. That is because other pages are generated on the fly when browsers visit their links, which make it hard for search engine to add them into index. To do the SEO (search engine optimization) so that Stringland Tech is easier to find by everyone, while without making too much code changes, we rewrite the whole front end side using Next JS. Next JS support web pages server side rendering. It means that every pages have their own static html files and they can be easily collected by search engine and added to index. Another reason to choose Next JS is that it is based on React JS. Stringland tech front end code change scope can be reduced. Here is the Next JS wiki page .  And here is Next JS official pages .   How to Migrate from React JS Next JS official document has complete guideline . Actually the basic idea is simple: For routing and redirection, just fo
Read more

Adding Direct Entries for all the Lands

-
Image
As we know, the homepage has card for each function module. Each module has a picture and description for that function, like Math, Text Editor, and so on.  When you click the card, you will be redirected to one of the sub functions of the module. However, that redirected sub function page is fixed, and it may not be what users' want. So now we add a Go To button in each card. When you click that button, a list of sub functions will be shown, and you can click any one of them to go to the corresponding sub function page. Here is the sample screenshot: Hope this UI improvement can improve your user experience. 👋
Read more