Angular Practice

Build a small flight status badge that shows a flight's current state - like On Time, Boarding, Delayed, or Cancelled - with the right color for each, plus an optional gate number. A quick task to show you can turn simple display rules into a clean, reusable piece of UI.

Build a single line of a restaurant bill showing the dish, how many were ordered and the price each, then work out the line subtotal, the service charge and the line total. A straightforward task to show you can derive accurate figures from a few values and present them cleanly formatted.

Build a small form where a farm worker enters the tractor's current hour-meter reading and immediately sees how many hours have run since its last service - with Confirm blocked if the reading is lower than last time. A nice task to show you can keep a live display in step with what's being typed and catch invalid input before it's submitted.

Build the shelf listing for a library's browse page: every book numbered in order with its title and author, and a clear message when the collection has nothing in it. A quick task to show you can render a list efficiently and handle the empty case as a first-class state rather than an afterthought.

Build a progress panel for an online course showing each module as completed, in progress or locked with its own icon and message, and a header reading either "Course complete" or how many modules are left. A neat task to show you can branch a display across several states including one you didn't expect.

Build a reusable piece that attaches to any element and colours it by an air quality reading - good, moderate or poor - revealing extra detail when someone hovers over it. A good task to show you can build behaviour that travels between elements rather than a component locked into one layout.