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.innerText. ...