Setup TypeScript Project

ToDo Application Using TypeScript: Build Application UI

Whenever I think of building a quick web application with good UI and layout, the first thing which comes in my mind is Bootstrap. During this chapter we will build application ui using bootstrap. Bootstrap is plays a great role in layout of the application. I am not going to go in depth with Bootstrap here, it just all what solves our purpose. In case you are the late comer to this blog post and have missed the previous chapters on Learning TypeScript and Building an Application with TypeScript, you are recommended to do so.

Building an Application with TypeScript

Understanding the Layout First

We have 4 main components in our application, Action Bar, List Container, List Item, and the Bottom Navigation. Here we are going to see how they are placed on the screen.

The Layout
The Layout

The design is built using mobile first strategy, so almost all the screenshots here you are going to see are Nexus 6 (Yes, I still have Nexus 6) screen sized. The orange color is one of my favorite colors (I use this color or its shades in almost all the applications I build … creepy right!) and this shade of sea-green color was going well with this design as assent color.

Coming back to the layout components, let’s discuss the role of each in brief here fist.

Action Bar

The very first part of our application is the action bar which hosts the textbox and the related action buttons for the new tasks to be added or to edit the text of the existing task. There is hidden button, which rolls out as soon as we select an item to edit.

The Action Bar
The Action Bar

List Container

The major portion of the screen is cover with this component which can scroll its contents vertically if they exceeds the bounds. There is no lower or upper limits (virtually speaking, as computer can count to a finite number only :P) of the number of the items this list can contain.

The List Container
The List Container

List Item

Each list item represents an individual Task recorded in the application and distinctly operated upon. A task item actionable for editing, setting complete or incomplete and user can remove them from the list too.

The List Item
The List Item

Bottom Navigation

The idea here is to keep the navigation at the bottom of the application layout as it is playing a least significant role in application. As of now it is not going to contain anything other than the title of the application. But I am sure, once you are there, you will figure out the better use of this component.

So now you have seen that all in action, and must be a little bit curious on how to achieve that all. Don’t worry, we will see that to, but in the next post. The next post will be all about code and only code. Be ready to see a lot of code and chop down your finger nails to keep up to the speed.

If you have not yet subscribed yet to this blog, I will recommend to do so as you will notified as soon as the new post on this series or any upcoming series are published.

Have a nice day and see you again with the next post very soon.

Leave a Reply