![]() At any given time, each hand will be rotated according to its value, which we'll achieve by an inline style that applies a transform rule with translateX(-50%), and rotate set to the applicable value via a value prop. ![]() Each hand will have some common styling, but will be differentiated by color. These were abstracted into a general Hand component. Watch hands, one each to indicate minutes, seconds, and milliseconds. ![]() Controls to start, stop, resume, and reset the timer, and to mark laps.įrom these visual requirements we can infer the basic components we'll need.įor pure visual coolness, I want to show the elapsed time as an analog stopwatch with minute, second, and millisecond hands spinning around the center.What will the user see? How will she interact with the application? From our functional requirements, I knew I'd need: The next thing you need to think about is UI functionality. With those requirements in mind, this is what our API looks like:Įnter fullscreen mode Exit fullscreen mode Mark any number of laps, which simply involves saving a list of arbitrary timestamps.Start a timer by tracking the number of milliseconds elapsed between the start time and "now.".The first thing you need to think about when starting on any application is: What is this thing even going to do? What are its functions? After refreshing my knowledge of stopwatch functionality by looking at several online (because what normal person is just using stopwatches regularly?), I decided that my basic requirements should be: If you're still here, let's walk through the project. TLDR: I made a stopwatch in React and CSS and it's pretty sweet. The math was basic, but there were some concepts that were new and maybe even tricky. I decided a stopwatch would be the perfect micro-project. Recently, I found myself wanting to continue that exercise, but with something more complex, and maybe even interactive. I had never coded a clock before, and was shocked how easy it was. I was given a little less than an hour to complete the exercise, but crushed it in under 15 minutes. Once upon a time I was interviewing for a Principal Front-end Engineer role and was challenged to create an analog clock in vanilla JS.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |