Assembling the Stopwatch
Explore how to assemble a stopwatch application by integrating multiple RxJS observables and handling events with subscriptions. Understand using TypeScript to specify HTML elements, applying operators like takeUntil to manage event lifecycles, and separating business logic from UI. This lesson guides you through creating a responsive stopwatch that efficiently manages event streams and updates the view.
Stopwatch application
All three observables have been created. Now itβs time to assemble everything into an actual program.
Bud1
x . h t m l
i n d e x . h t m lIlocblob ; (ΓΏΓΏΓΏΓΏΓΏΓΏ p a c k a g e - l o c k . j s o nIlocblob Β© (ΓΏΓΏΓΏΓΏΓΏΓΏ p a c k a g e . j s o nIlocblob (ΓΏΓΏΓΏΓΏΓΏΓΏ p a c k a g e . j s o n . s b - a 4 8 e 3 b 4 8 - L E 4 G 1 wIlocblob ΒΓΏΓΏΓΏΓΏΓΏΓΏ s t o p w a t c h - c o m p l e t e . t sIlocblob Β
(ΓΏΓΏΓΏΓΏΓΏΓΏ s t o p w a t c h . t sIlocblob Γ³ (ΓΏΓΏΓΏΓΏΓΏΓΏ
t s c o n f i g . j s o nIlocblob ; ΒΓΏΓΏΓΏΓΏΓΏΓΏ w e b p a c k . c o n f i g . j sIlocblob Β© ΒΓΏΓΏΓΏΓΏΓΏΓΏ @ Β @ Β @ Β @ E
DSDB ` Β @ Β @ Β @ πββοΈ Joe asks: What does that
<HTMLElement>mean?This course uses TypeScript for all the examples. The <angle bracket notation> denotes the specific return type for
querySelector. TypeScript knows thatquerySelectorwill return some kind ofelement. In this case, we know specifically that weβre querying for an element of the HTML variety, so we use this syntax to override the genericelement. With that override, TypeScript now knows thatresultsAreahas properties specific to anHTMLElement, such as ...