Build a Countdown Timer with React.js | Sandra L | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Build a Countdown Timer with React.js

teacher avatar Sandra L, Front Development

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

11 Lessons (1h 20m)
    • 1. Project Set Up

      4:35
    • 2. Building the UI

      8:07
    • 3. Components Styles

      4:23
    • 4. Countdown Interval

      10:11
    • 5. Time Difference calculation 1/2

      12:14
    • 6. Time Difference calculation 2/2

      1:31
    • 7. Maintain State

      6:44
    • 8. DatePicker

      13:12
    • 9. Add Styling

      9:51
    • 10. Countdown - Date picker (select date)

      5:12
    • 11. Final Steps

      4:07
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

105

Students

--

Projects

About This Class

React provides the perfect solution for creating JavaScript-based interfaces, with a huge range of uses for it including building native mobile apps and web apps.

This class will teach you to build dynamic website components and real-time applications with React.js.

===============TOPICS===========================

  1. Intro to React: Getting Started - watch
  2. Intro to React: Learn the fundamentals - part 1 - watch
  3. Intro to React: Learn the fundamentals - part 2 - watch
  4. Build a Countdown Timer with React.js - watch
  5. Simple Todo List with using React & HTML5 Localstorage - watch
  6. React, Node.js - Build a Quote Generator with a Restful API - watch
  7. Build a Weather App with React, Bootstrap & HTML5 LocalStorage - watch
  8. Learn React Redux in less than 1 hour - watch
  9. Getting Started with React Router - watch
  10. Introduction the React Hooks - watch
  11. Build a FullStack Application with MERN - Part 1 - watch
  12. Build a FullStack Application with MERN - Part 2 - watch

===================================================

React is a Javascript library, developed in 2013 by Jordan Walke of Facebook. You’ll find React is both very popular (it’s the 5th most starred JS library on GitHub) and used on major sites including on Facebook, Netflix, and Khan Academy.

You’ll love the flexibility of using React with your favorite web technologies (except for jQuery!), and this path will take you from the fundamentals all the way up to building full apps with custom styling. With this class, learn the A-Z of React :

  • the basics and fundamentals with snack-bite size video lessons. From simple to complex, tutorials and exercises will help you get up to speed fast with the main concepts of web development with react.js
  • Understanding React Components (stateless and stateful components)
  • writing and displaying data with JSX
  • Networking with asynchronous HTTP requests & RESTFul APIs
  • Maintain your Application's State
  • Passing dynamic data with props objects
  • Component lifecycle (componentDidMount, componentDidUpdate)
  • Communication between components
  • Events and event binding
  • Working with State and HTML5 LocalStorage
  • Creating maintainable code with JavaScript Modules
  • Data Persistence with Redux
  • Routing with React Router 4
  • Taking advantage of new ES6 Features
  • The React Hooks (useState, useEffect)
  • + So much more

What we will be building together?

  • A real-time and single page application - Countdown Timer - stating how many days, hours and minutes are left until this awesome event you look forward to.

  • The classic Todo List example to get up to speed with the basics and main concepts in a short amount of time

  • An interactive - checklist - developed with the Bootstrap Library, Font Awesome icons & HTML5 Localstorage

  • A front to back example with MERN (MongoDB, Express.js, React.js & Node.js)

  • a weather widget with the Restful API openweathermap(dot)org

  • + So much more

Who is this class for?

  • Anyone willing to learn and build solid frontend skills

  • Developers who wish to grow and sharpen their javascript skills

Meet Your Teacher

Teacher Profile Image

Sandra L

Front Development

Teacher

My name is Sandy. I am a freelance Front End Engineer based out of Toronto, in Ontario, Canada.

- Check out the latest Learning Path Series :

React.js - Front End & Fullstack - React 16.8 + 

Intro to React: Getting Started - watch Intro to React: Learn the fundamentals - part 1 - watch Intro to React: Learn the fundamentals - part 2 - watch Build a Countdown Timer with React.js - watch Simple Todo List with using React & HTML5 Localstorage - watch React, Node.js - Build a Quote Generator with a Restful API - watch Build a Weather App with React, Bootstrap & HTML5 LocalStorage - watch Learn React Redux in less than 1 hour - watch Getting Started with React Router - watch Introduction the React Hooks - ... See full profile

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Project Set Up: So we're going to do together these tutorial over several videos to build a countdown project. So that's gonna be a countdown to any dates that you pique your birthday, a special events, something important. Extra. So when you selected dates, it's gonna start counting down. So we're gonna create that with reacts. To begin with, we got to create a brand new project. So for that, I'm gonna sing the CD. So for change directory to the next up Perrigo. And then from here, I'm gonna create a new project. It's gonna be and p X create reacts up. I'm gonna name this one can't go, period and then we'll see from here that it's being created. Here we go with all the parts necessary dependencies required for any direct projects of the non values. First, it's gonna meet a new package. Chisholm and then for the rest will have the source holder and everything. So where So that's the place where rebuild where were built? The app. So that's the Devil Development section. Perego. Once this is ready, we're gonna take this one and drag it over to the I konw icon for visual Good studio. And it's gonna open the projects writing site so and to go over quickly. Um, all these different parts of the different parts of the projects we have the note valuables . So these are the packages installed via NPM, the public folder, which is for production. So this is the part which is presented to the browser. Um, we won't be, um, covering this part just right now and then the SRC folder, which is the place where we're going to spend the most time. Because this is the place where you develop your up and for the rest. For the rest. You have the kids ignore that's always included in any new ah product with react when it's created with the clean, and it allows to exclude any products to them, to the version in control. So it's not tracked when you are in your repository. So when you track your changes and you have a packages in which includes configurations of your products and the least of your dependencies and also the script so the one that we use all the time to run the up it's gonna be with NPM starts and then it runs on the server. Local host 3000. We also haven't read me with instructions. So as I was just explaining so how to start your APP and PM starts. So that gives you, like, the different step to test to compel your project into a a bundle, too. So it's ready for deploy, ex cetera, And finally we have a you're in luck. So this is with all it's similar to the package. Just in luck, it's gonna be like a final description off your project configuration and specifications with all the packages installed, ex cetera. Okay, so let's begin with our up. We're going to start by, actually, and we're going to do that from the integrated. It's not this one stories. So we're gonna do that from the integrate its terminal in visual code. So we have used this one as well. So the building in every maiken permits or sex operating system, Um, but you can also use the one which is part of the visual good. So you can open this one from the from the bottom like so, and it's gonna actually open so right in the place where it's needed. So inside the project and from here, we're gonna type. We're going to run NPM start to run this app and the server. There you go. It's going to open a new tab in the browser, and then we're gonna be able to see our brand new. Okay, so that's, um, the beginning. What we're gonna do together is building, um, creating the interface. Off this up for this up, it's gonna be something quite similar. We're gonna keep the header of these some of these projects, and at the bottom will have a date picker and then the least off, um, of information which will show the time eso in hours in days, starting with the days, days, hours, minutes and seconds. So let's start that in the next from the next video. 2. Building the UI: So let's start with the interface in these lessons. So what we'll do is breaking down. So what we have so like composing our interface for now. So we'll start by removing what we don't need. So first, we're gonna get this image this logo spinning. That's nice. But instead of keeping that, it's gonna be removed. Same for this link. This tank attack. With all these details to ref and everything, we're going to remove that. We're gonna keep the header that's nice. And actually in the header will have something like an H one. We're gonna add a heading, so it's gonna be very basic. HTML So you know about the pre defined? Of course. Of course. So the html the regulates GelTex that will do that. Um, I'm adding one attributes of these unique identifier for now, and this one is gonna be head and next. What will do together is also styling. The components will add some CSS that's gonna be in another parts, and then we're gonna name this heading React countdown. Pretty simple. For now, let's see how that looks. We're going to save. It's gonna do a live reload, and then here we can see the change. Okay, great. Uh, what will do as well is already have some CSS set up. Um, with this brand, new projects will go there. It So it's it's the abductees is, and so you can click twice to open this one on another top. So to have a trade a year. So next, Teoh the Abda. Jess. One thing you can do as well. So if you want to keep them side by side. So once you're gonna work on the dodgy s file and then switch to the dot CSS you can make it convenience by hear clicking. It's gonna open another tub. Another pain, actually. And instead of having the up the Jess, I'm just gonna have the abduct CSS like so I'm gonna close this one and then here ago. So now you can have, like, the the workspace split in two by having the ab Dutch gs on one side left. So and then the abduct CSS on the right. So this is one of you need to go back and forth. In that case, it's a simple I just wanted to show you this picture, but it's not something that you may want to keep forever. Um, so here, by looking at the okay, I was looking for the up Heather. Okay, here. Go. So the up header So that's that's this one that that applies to these section here. So that's ahead of time for the app header. So you see that it has thesis es s rule, which applies the heights, which is similar to which, which is the equivalent of the height, the view port height. So it's gonna be as high as the view port as you see it. But if you're on a screen a simple laptop, which is a 15 inch, it's gonna be as high as the the height of the screen off the view ports. Because if you re just the size of the screen, I mean the I mean the browser, it's gonna be also as high us the heights off the view ports. I'm I don't mean like the height of this cream of your device, but the few ports, So the view port is this one. So if I reduce like soon, so the height is going to reduce a swell at the same time. Okay, so that is the view port the viewpoint of the browser. So this is what it does. This rule, which is 100 few. The h is for a few port report tight. So I'm going to remove this one. And and so in this way, the APP header is gonna be a regular heights. It's not going to cover the entire height of the view port. So you see that he texts half the height of the screen? I mean, it is as high off whatever content it includes. So now we have this logo, we have the high the heading as well. So if I remove any piece, actually, you're gonna see that the height is gonna reduce like a za result with Harry Go. So that's not like a class about CSS. But I just wanted to explain how that works. Okay, quickly so you can actually understand and know how to customize it. So that's important. OK, so let's remove. Definitely. So let's remove firm. I'm in. Let's remove it like so we no longer used this room header and then we're gonna have this height for the head of parts. So we have we still have the logo spinning and the heading. So that's good. So far. So next what we'll do is creating one are not the list. So, as I was explaining, we'll have a list off the countdown information. So with the days, hours, minutes, seconds, it's gonna be right below, so we could have another deep. But that's optional. So just to encapsulate this section of the U y. So there's gonna be insight this Steve, and then within this deal, we're gonna be able to apply any style, any styling we need. So that's gonna be one in order list inside this new div. Eric up and then inside the cell in order list, we're gonna have four list items. So 1st 1 of the hours, actually, no. By mistake, I bet. So this third of the 2nd 1 will be ours, and then the 1st 1 would be days. 3rd 1 will be minutes and last one will be seconds. Like so. We may change that later and then Will will also have a span inside each list item to includes the actual number for the days, hours, minutes and seconds. That's gonna be within a span, and it's gonna be just We're going to read zero for each of them. So that's is the starting point. A simple an order list to list information hair ago. So let's see how that looks. OK, so this is how it is. So so for now, there's no, it's, um it's raw. There's no styling. So we're gonna need to customize we're gonna spend. Like, as I was explaining sometime, a little bit of time in this section working on this fell to add some CSS rules to apply to this section. And actually, what we're gonna do right now is adding one unique identify, which will be countdown a year ago. Just so that's just it's not something that you need to do, but just for clarity. It makes sense to, ah to compose your HTML template with the Here it's using a class name that you can use to choose to use an I. D and I d. Because you know that this is gonna be targeting this one elements specifically in your templates. Okay, either one is fine. A classes for something that, you know, you will apply to several elements in your page. So we're gonna, um, live it as is. And in the next video, we're gonna apply some styling to make it look good 3. Components Styles: Okay, so let's so do some styling. I'm going to close the Spain at the bottom for the terminal, so it's not useful for now. Okay, so we're gonna target. So as I was explaining the force of this deal with this, identify your countdown, and I'm gonna place here my new CSS roll right below this one. The uplink. Um, that's something you could actually remove, because I don't think that we are using it in our templates in our documents. I'll remove it for the APP logo. It's okay. Okay. For the rest of that song. Okay. So what we'll do is referring to this one with the numbers. Sound sounds, the numbers sign. Sorry. Number signed to refer to an I D. Here you go. And then we're gonna target specifically. So that's the ally, the and I. And it's gonna be first. We're gonna start with this world, which is display in line. Look, what it does is that in line block is gonna allow to, um, put all the because you see that the default display for an inordinate list is to put on top of each other. What we want is to align them so one after another. So on 19 But we want to keep, um, ways. Don't want to benefit from the the CSS block or box. Both container. I forgot what it's mentioned, but you could. It's not a course about CSS with basically it stills. It still allows you to apply margins and putting if you apply in line block instead of just in line. Okay, so that's why we use display nine block. Next, we're gonna apply some size, so that's gonna be with fun size. That's gonna be one five e m for the units of measurement. Also meaning that we're gonna be able to apply related Lee. So it's not something. It's not like a fixed fonts. I that's gonna ply related Lee to the View ports like the templates. Finally, one important thing is the least style type which will be known. Remember that we had the bullets for each list items, so we're going to remove it. Then we're gonna add some reading because we need some space between each of them. So that's gonna be 1 p.m. And finally, we're gonna transform the text, which will be a big case for each text that will have. So that's gonna be text transform. And that's gonna be a case. So that's, um, starting points. Let's see how that looks. Here you go. So we're gonna need also to make some change for this span because we want to put them, like, right below the zeros, But they're starting to look like, quite interesting. So the days, hours, minutes, and second, it's gonna placed right below. So for that, we're gonna target this ban. By doing so, it's gonna be countdown, and we're gonna apply to the span only, And this one as opposed to display in line the block because it interests from the the parents CSS rule. We're gonna play block, so it's gonna take all the space When you When did you in line? It's gonna take that just the space off the contents. Whereas here we allow so the elements to take the as much space as there is on the view port. So that's why it's gonna be placed right to the next lined by applying block. And then we're gonna play fun size, which will be bigger in that case. And that's gonna be 4.5 R e m meaning that's gonna be that's gonna be related to the parents this time. Okay, so let's see how that looks. So we have Biggs zeros now and then for the for each of them. We have, like, the corresponding mention the Carson, entitled for the days, hours, minutes and seconds so that it's quite good, Okay? 4. Countdown Interval: So we have a nice you wise So far. So what we would like to see next is to our see some actions with an actual with the actual time ticking and just like this example of a countdown and for this one, So you will see that as it goes down. So, second, by 2nd 1 it's gonna be done with the 62nd. It's going to go to the next minute, minutes below, so far from 43 to 42 and then it starts again with the 60 seconds some countdown. So this is what we're expecting as a result. So we're gonna proceed the same way. So what we're gonna need for that is a time interval. So we're going to do that with plain javascript. Basically, we would like to, um, apply the same trigger, the exact same action every seconds, with an interval off 1000 milliseconds. Just like the example that we've seen. Remember, with the react ducks at the very beginning of this class, we were looking at one first demo when we're trying, reacts straight from the websites here, actually hear, hear about. So these timer, which is triggered here with this method, which is set Interval every 1002nd you see. And every 1002nd it's gonna trigger execute this action in order to increments by one. So the value off the local states So here, that's gonna be the same. We're going to need to set a state and to maintain estates, to have it dated every 1000 seconds. This is what we're gonna do here. Okay, so that's enough with the presentation. So we're going to do we're gonna do some actual work starting by for no, I'm not going to need to use an easy Asus, so I'm just going to reduce. We'll go back to it later. I'm just gonna reduce the view of this one. And I'm going to start by updating these class from a function companies to a class components. So I'm going to do that with the cure class step which extends from, you know, they're react components, which is part of the reactor company reacts library. So we're gonna extend from it so we can actually define with the class Ah, react components. And then it's gonna it's gonna complain because every time that you create in your classrooms react you always need this method which is rendered. So this is this one which will do the work of rendering your templates to the browser. And then we're gonna take the whole thing because this one is to be placed inside the render methods. So that's the return. So this one goes inside the render. Here you go. So that's back to normal. So now we have a class. So now that we have a class, we're gonna be able to have estates. So we're gonna stopped, start by defining a constructor. So we don't need to specify any props, because here in that example, it's gonna be the unique competence, and we won't need to excess any props from a previous sewn from from the above from her parents components. Actually, I'm gonna remove it. It was not We're not gonna need to do the heritage of the props here, and we're gonna have a state that I'm going to define for now birth. I'm just gonna leave it empty for now, is just We know that we have now. Now we have a state full company because we're gonna need to maintain that the state and next next I'm gonna create what we call an interval. So that's gonna be this method here. I'm using the es six in tax with the our function, meaning that I'm gonna have So there's a psycho I will have here any parador that every perimeter that I would use for that method. So I'm gonna live it empty by living it with empty promises. And then we introduce the with the arrow function, the arrow and the curly braces where we want the codes. What code? We want to be executed in that methods. So this is what So that is the previous function, Like when you over over, you're going to read that this is actually the part for the function. So before that, you could you can also that's the syntax which is also accepted. Your function, like so with parentis, is and then open like so So that's also a syntax which is accepted. But in that example, so in every examples, every example, by the way, we're gonna use the six syntax with the the air A function. So we're going to start by defining the units for the time, starting with second, which will be 1000 like equivalent off 1000 milliseconds. Then I'm going to define so all the variables. I mean, it's not variable because it's supposed to be immutable for those values. But it's gonna be Constance. So we define it once, and it's going to remain the same throughout the life cycle off the components. Next, we're going to define the minutes, which is equal to second, multiplied by 60 60 for 60 seconds for a minute. And then I'm going to define at the hour, which will be equal to minutes also multiplied by 60 because it's 60 minutes in an hour. Finally, I'm going to define also day, which will be our multiplied by 24 because we have 24 hours in a day. Okay, so that's it for, um, the configuration, like with the old, the verbals, I mean, information that will use to calculate the time and next, What we'll do is creating an interval like so. So there's gonna be with this, um, function that you may know all 80 set into a little bit. Takes two parameters. First the function. So whichever action you want to to execute. Um, on this interval and a second it's gonna be the interval, so we'll see that later. So actually, actually, we could do You could do it right now, it's gonna be function, so to introduce some. So in that case, I'm going to use this in tax to have the function. So this is the first murder to first, we have the function that we're gonna execute Virago and then separated by a comma. Next, we're gonna have the interval. So for the interval is gonna be second. So here it's gonna be every 1000 millisecond that we're gonna execute. So whatever we have here, which will be the configuration off the countdown, Okay, so I'm going to start to it. So we're gonna use plain JavaScript in order to, um, to display the countdown on our page. So it's gonna be document, and we're gonna get the elements by ideas. So that is something that we have done yet we haven't done yet. Is, um adding attributes a unique identifier to every span. So it spent that in order to be able to target them individually. So we're gonna do that right now, So we're gonna do it for each of them step by step actually get documents gets element. Sorry, but I d And starting with the 1st 1 which will be days. Uh, actually, what will do? He's in a text and we're going to read for this one. So for each of them, instead of adding static So in order to instead of hard coding the text that were that we read here, it's gonna be added using javascript. Okay, so I'm gonna date here the HTML and make sure to add unidentified for each of them, starting with days. It's gonna be days ago. So for now, it's not gonna do anything. We know that it's gonna be empty now, so we won't read anything that's safe area. So when you refresh, we have nothing, because now it's gonna be added dynamically using JavaScript. So let's do that. Because now we're not calling this function anywhere. So we're going to choose to use one lifecycle method, which will be the one triggered each time that the company is mounted on. This one is gold component did melt. Okay, you know this one. So we're gonna call this function which is this set interval this because it refers to this components this is an interval. And so now we're just gonna be able to read Simple. Um, it's not gonna be like a big um Oh, this starts twist this talked interval. They said interval is the actual JavaScript method to start an interval to define it. Harry, go. So now we can read. There is. There were just for the 1st 1 So they want the one that we have just set up. So we're gonna do it's for the other ones. Actually, I'm gonna let you do it as an exercise as an exercise. I'm gonna let you refer to one elements in your documents Documents, object model, which will be a span each time. So following the same example off days, you're gonna add a unique identifier for the span. So that's gonna be the, um, the text that we read so on top off each title here. So we're gonna add unidentified air and then target. It's using the same JavaScript syntax in order to display the text. 00 to do. Let's do that. And then we're going to do it together next 5. Time Difference calculation 1/2: So I give you the task of completing the U. Y. So with some by adding those ever for every span. So the two digits, So we're going to continue, so that's gonna be very similar. Quite repetitive, actually. So that's going to document element. Get element. My idea. And this, for this one is gonna be hours and then in a text in a text, to then display the same, which will which will be zero. And actually, you can go even quicker because it's gonna be repetitive. You can compete and then simply based, like so and then replace with the corresponding texts. And here it's gonna be minutes. And here it's gonna be seconds like so. And just make sure that this one matches the I D. Which is in your general, because here it's gonna be, then not like this. But it's gonna be ours. Then for the next it's gonna be minutes. And for the next one, it's will be seconds equal, and then seconds. In that case, we're gonna be able to read for every for each of them the same digit digits, two digits, which will be zero. Okay, let's refresh because it wants you to refresh here ago. So now you have like, um, zero. Something you can do because you can see that it's actually, um, this is displayed following them the interval. So that's something that you don't see in the background, but the interval is going on. So every 1000 seconds, you have the same substance milliseconds, sorry milliseconds. And that's one second it's triggered and Reum displayed again. So it's not right away, so we can do component will mount, so it will show almost right away. Actually, it's the same. Okay, so what will do? It's probably best to keep it as a text, like just for, uh, for to make the display better. And then we know Anyway, we're going to make some calculations. So the final the final part of the project will be to actually display a computed value. So we know that for starters, we're always gonna read zero. So that's something that we're gonna switch to afterwards. We're gonna again right? Two digits, two digits static. So we we see something when we display the confident, and then once the interval is kicking in, it's going to display the computed value. Okay, And that's something that we're gonna do right now, meaning that we're gonna calculates the difference between a date and the date now, So the camp down will be actually the number off the amount of time that we have until a date. So this is what we're gonna do here. So by first having here distance I'm using let as opposed to distance because here we're supposed to have a value, which will be mutable. So it's gonna be always calculated and then used for different operations calculations. So I'm gonna have a date for now, it's gonna be just new date, like so and minus the date, which is now. Okay, So let's speak any date Actually, we're gonna do it's gonna be get time So we'll do minus new dates minus and other dates. What? We'll do it. It's gonna be within the constructor of new date. You will be able to define men to specify a date. So what? I'll do, because for now, it's not gonna do anything because it's the distance between now. So the at the time, the date at this time and this time, so it's gonna be zero. So what? I'll do. Instead, in order to have the actual date, I'm gonna console. Look so it's gonna be a literal will have, like, the date right now. And I'm gonna use that as a reference for a date to calculate the data. This study, minus the date current date, will see. Okay, so for now, it's gonna you see that it's gonna console log, actually, Uh, yeah, just one time. Just one time. If you If you put this inside the interval, you'd see that it would be displayed every seconds. If you want to try so you can experiment if you want. Let's save now. We're just gonna display once. Um, the time. Oh, it's so to inspect, to open the consult and check and console the dates. So here ago. So that's the dates September 4th and the time. Okay, So I'm gonna take this because I'm going to use that as a reference. If I was to refresh again, you're going to see that you're gonna have, like, the date again, but at a different time. So the following time, actually, 10 who dates, which is the same as this one. Okay, so that is the current time So I'm going to use that as a reference because I'm gonna put that here within quotes. Okay? We'll use that, and then I'm gonna calculate, um, the time. Actually, it needs to be a time ahead ahead off the current time. So what I'll do is simply change the digits here. I'm gonna put September 24th. Okay, So any countdown example is gonna be the time until that date, which is sometimes September 24 3rd getting It's going to give us the number of days, hours, minutes and seconds. So what we do here is calculating, calculating the distance. We'll start with our calculating. So with, um, the distance, the difference of the distance in number of days. So that's will be distance divided by day. So let's see what it does for now, Um, like, yeah, it's gonna be different of the other ones because we're not using the digits anymore. Let's see. So we're gonna go anywhere, step by step. Okay, so that's a big number. It's not what we want a za result. So what we would want is to have, like, this number without any number be after the dots, meaning the decimals because this is a decimal, but it gives you all the numbers after the decimal. So what we want is there is around number. So without the decimal, So we're gonna use this built in methods in javascript riches math floor. So it's gonna Scott this mean that it's gonna, um it's going around to the, um the smallest. The nearest smallest value first. Okay, I guess so. If it makes sense, okay, here it goes. And now it gives us 19. So that is something which is easier, like, prettier on the eyes. Because we just need the number of days, Any dis Immel, um, parts of days. Because what we had after that, what were the number off? Because it wasn't a complete date with the number off a combination of the number off off the number of hours, minutes and seconds on. This is this remainder apart that we're gonna use to calculate the number of hours, minutes and seconds. Because whichever value we had after that 19 Waas Rippers was representing the number of hours, minutes and seconds. So this is what we're going to calculate next, using the exact same, um, syntax here. So we'll do first the calculation. And for that, we're gonna use one operator. That's you may know off, which is the modular operator. So that's, like, the percent age, um, symbol. You're gonna just that this and we want to get, um, the number of hours so it's gonna be distance here again. So then above days of basically what we do here first is getting the whatever remainder we have from the division between off distance by date. Okay, remember that this is what we did here. Actually, I'm gonna take this line because we need this calculation first. And then whichever remainder that we have from distance divided by day, we're gonna divide by the number of hours that should be here. It's our without, and that's OK, so, whichever, you know, like which everybody we had after the distant after the 19 ducts. This is the decimals. This is almost one day. So that's the remainder off the number of days and this remainder we're gonna take and then divide by by our to get the number of hours in this remainder, and then we're gonna be able to get the number of hours. So let's do that and because we're using this syntax, which is math floor here as well is gonna exclude any decimals. That's okay. That's quite right just yet. Because what we're facing here, like, um, as an issue, it's It's very simple, actually. Is gonna be very quick to fix is we have a conflict between which operations should be taken, should be done at first. And the problem is, well, something we need to do is actually wrap this entire thing in, um, bracket because this is my floor for this entire operation. But that's not finished yet because what we need is whenever used the operators in just ripped or any in any other programming language, you always need to make sure that's whichever operation you want to take. You want to execute first, be in parentis is because, um, one is taking presidents over the over the other ones. So what? One is first to calculate this because the division it can be the same. Actually, they have the same type of priority. So we don't want this to be a day to be divided by the hour by mistake. First, we want this calculations to take place first and then the results to be divided by our So , um and the other mistake of mate. Sorry about that is not a division, but this is the modular operator. So as I was explaining again, so lets her Let's re round rewind. So what? We're going his first here to calculate the remainder. So it's not a division, it's it's it's a division. But instead of just having the the computed result of the division, we're going to get the result of the remainder off that division. So that's the first operation, and then the results off these remainder calculation is gonna be divided by our and Final. We're going to get, um, the rounded value to the nearest smallest value. Good. Let's say that and check this out. And here goes. And now we have 23 hours, 19 days and 23 hours to these date, which is tempt of a 24th as mentioned here. Okay, so this is going good. What we're gonna do next is calculated the minutes. So it's gonna be the same process we're going to calculate. These times. Let's take the same line because it's gonna be the same process, and I'm gonna let you get. Actually, that's gonna be another exercise for you. What I'd like you to do is to calculate this time. So the remainder off from the hours that are not complete. So whichever value is the remainder off are incomplete. Our we gonna divide by minutes in order to get the number of minutes. And that's not full hour, if you see what I mean. Okay, I'm gonna let you do that, and we're gonna complete the exercise in the next video. 6. Time Difference calculation 2/2: Okay, so let's complete this exercise together. So I had asked you to have given you the task to calculate which other remainder you have from the hour. So by calculating So the distance, um, the distance divided by the hour and divided by the number of minutes. Okay. And it's gonna be the same for, um, seconds. You got to divide. Um, actually, it's gonna be the distance as well. Divided by the number of minutes to get the number of minutes and the remainder. Whichever reminder for minister is not a minute which isn't full. And then divide by the number of seconds. And here we're gonna pursue that way, you see, So it's very progressive, straightforward. Let's do that. So now we're gonna be able to have the distance in the cat down from now to the 24th offset of September. So it's 19 days, 23 hours, 49 24 seconds. And so you see that here is the time isn't moving. It's not being dating, so it doesn't decriminalize it at all. It should be an interval off every one second week, which, with you to change, we see the countdown taking and the time passing by. It's not working as expected. So what we're gonna do is a few changes in the coat. 7. Maintain State: And so one first thing which isn't right is the distance that we calculate outside of the interval. So that would be That means that this is gonna be calculated. But just one time, although we need this to be recalculated every second so we can actually calculate the difference between the distance now and the distance Now again, one second later. So that's gonna happen every second, remember? So and then we're gonna be able to see the time taking, as expected by saying so. First, the number of seconds decreasing and so forth. So when the time is up for a minute, it's going to decriminalize minute. Okay, so here ago. So now you see that the seconds is being decree mended every second and once on the 60 seconds is finished. So when served, it's up. It's gonna go to the next minute, and we're going to see the number of minutes going down from 34. Choose 33. So that's wait for that. So now it's gonna count down from 10 to 0, its weight, and here ago, and it starts again from 60 on. It's going down perfect, though this is working as expected, so now. So the purpose of having a react company is to have a states that we can maintain. So we're gonna make some of date instead of going the distance as a local variable that works within the scope of this function on it, it's gonna be part of the of the state's off the off their components. So that's gonna be part of the entire context of this company. Let's say that you'd want to access this distance. Um, throughout the application for aneurysms, you'd like to display it somewhere. Then it's good to actually have it part off this off the state, like so distance that I'm gonna set as zero to begin with. Remember the same example example that we saw before together when we tried, reacts online with the interactive go to a doctor. Ah, playground the counter or it was seconds, actually, for the property of the state, it was at zero. And then there was the interval that was set when the component is mounted. And then, um, every second the value was incorporated by one, so we're going to do the same here, so we're gonna do the same by having here this said states, we're gonna set the state each time that we that there there's a new second passing by And what? We're gonna update his distance. And I just, uh OK, we're gonna take this entire thing entire line here and pieced here. So instead of being something local to maintain this locally, we're gonna maintain this locally within at the level of the off the competent makes more sense for these react demonstration. Okay. And after that, we update that we said the state we're gonna need to assess as access the state by doing this this time, it's gonna be this state distance and so force. So you gonna copy and paste these state distance and that's gonna throw an air. I'll it's been you. Why? Okay, So what it says is that this state this said, state is not a function, so that's very easy to understand, because these always refers. That's an object that some a concept with any in any programming language. This always refer to the currents, actual objects and this understand as referring to the scope of this function. Although that's not the case. What we want is to refer to the scope off the competent. So we're gonna fix that by doing this, it's gonna be we can do. Let that equal to this. Okay? Because basically, what we do here is capturing that this from the scope of the component and make it equal to that, meaning that that is always going to refer to the scope of the competent as opposed to this , which will be this within the scope of this function, which is wrong. Okay, so we're gonna update by doing, uh, that's every place in every place where you read this. When you are inside this function, you're going to replace with. That's so we know that that is going to refer to the scope off the components. This is what we need. Okay, so we're gonna correct in every place. So now it this is fixed. We don't want to refer to this as that. This within the function. We are referring to this as the confident Okay, that's good. So this is being updated, and that's great. But the last thing we would need to do is a few changes, you know, because you see that when you have one last digits, it always it doesn't show. Like the zero and 00 It's not two digits. You can correct that very easily. But we're going to do that next. What we would like is not to just have one date static like that. So that was just for the first demonstration. We would like to be able to pick a dates one day, so that can be your birthday. One specials, special events, or you want to count the number of days until the beginning of your next vacation? Extra. That can be anything. Any date. So what we're gonna do, ease implement a date picker? A date picker is gonna be a competent that we're gonna take that we're gonna be able to implement very easily and quickly by using a package that's gonna be installed. Yeah, NPM as well. That's a known module package. And that's gonna give us interface on an input as well. So we're gonna be about we're gonna be able to select a date and added as an input and then calculates the remaining time from that date that we select. So that so that next 8. DatePicker: so that they become that we're gonna choose. Let's look up, date picker. Yeah, we're going direct. NPM took it. Yeah, that's this one React date picker. Yeah, that's the one. So we're gonna take this one and we're gonna use NPM. Actually, it's gonna be yarn that we're gonna use to install this package to the projects. And let's go back to the product and open the germinal from the bottom so you can keep the app running on the server in early two. Added, you just simply wants to add a new a new tab. And when you take from here, so you're gonna be able to switch from one to another. So here is where is where your note applications running. And now we have a new terminal window and this is where we're gonna right the common lines to install to do other actions, like installing stuff like that. So what we want to install is this react date picker very similar to these line of common here. We were gonna copy it's copy instead of writing NPM I foreign Still, it's gonna be yarn and still date picker and I'm missing and our three end Here you go. So let's he tender. Oh, actually, it's young, it's not. So I guess that's different of NPM. It's actually yarn ad And that state Pekar followed by the name off the module that you want installed. So that is a yarn at, so that's the proper way off, adding without using your own, which is another dependency management, just like in P m. You know? Okay, So let's so he enter to install this one, and that's gonna install this dependency in your projects. You're gonna have a new, not modules. It's gonna be specified as well in your packages. And now with the corresponding version of these new module. And if you check inside, you're not modules, you'll be able to find it inside. So it's gonna be in the G section, starting with the D somewhere. No date speaker. So it's react. It's racked that day, pig, Actually, so it's not deep. It's starting with our So let's go all the way to the bottom until rich we're rich, all the are and that's react date picker here ago. So that's been installed. So when we did that, it installed it for us. Okay, so Now we have access to these baggage. That that's great we're gonna be able to implement and you date picker in our product. So let's go back, Teoh to the gold. I'm gonna close this, okay? I'm gonna close this pain as well, because we don't really need any CSS for now. And I'm gonna close as well. This page at the bottom for the terminal. Okay, so what we'll do is remember that we use at the at the top off our project. We always define the way goes right, The important statement. So this is what we're gonna do to imports the date picker that's gonna be date picker on. We're going to specify from where so from the reacts date, picker module. And we got also import the styling for the state speaker. So that's gonna be somewhere. And the react a PK itself module in the just folder. Actually, we could actually check this out as well, so you can understand how it works. Uh, if you yourself use another module so inside that this model, you're gonna find a dist folder where you have a CSS and we're gonna use the styling so we can stop. So it's gonna be straightforward. We don't need to stop myself. It's gonna be done provided by this model. So let's look for this one again. So all the way to the or letters or are Okay, react state beaker a year ago. And let's expand this one. You'll find the disk holder. And inside the dis folder, you find all this. Yes, it's that you need. You can even use. I believe that you may have a mean a magnified version. Probably. Yeah, probably this one. CSS module. This is the man ified version. If you want to improve performance of your app, you could use this one. But that's also convenience to use this one to you, this one, because actually can actually read exactly what you want to refer to because we're gonna do like, ah, few customization. It's gonna be very quick and straightforward, but okay, so you can check this this one out at your leisure for now, we're good to go. So next What we're gonna do is implement the state picker. It's gonna be because this is a reactor module is gonna be much like the company's when we defined them. So we're gonna have one component that we're gonna be able to add, like so date picker. So that is a new component of the date picker that read. That's and inside these, um Actually, what we're gonna do is just are we could just check this out, because we'll have We should be able to see something new in here. So in the interface, So you have this inputs that is added automatically, and when you click on it to you have this date picker which which is popping up. So that's it. You just need to do that. So you have also options available for this date picker, and we're going to be able to update this options by adding attributes. So I mean, it's gonna be data that we pass as props to this date picker. So first it's gonna be the selected date selected selected dates. So this one is gonna be defined as selected, and we could actually use the exact same day that we have here. Um, it could be new date or this one. Let's use this one. I believe this is the right format, or you may need to use the new date object that will check. Well, we'll try this one. And the other thing is, we're gonna be able to use the date formats. So that's something if you're not similarly with the date formats you can actually find. All right, this down for you. So this will indicate that you want the dates are fully written. I mean, that the month is gonna be full or shorts for the day. Now, that's gonna before the day. Like when you say Monday, Tuesday, ex cetera. So that's gonna be for the month than for the day and the year, which is which is gonna be display full. So we're gonna be able to read 2019 So I don't know. I don't know it by heart, but that's something that you can. You have the reference date formats. That's fine. Did to date format, simple date format, a recall reference, fermenting dates and times. Let's use this one. So that's one examples of the date back patterns, the date competent. So here, for examples who interviewed display the month like so here. It's gonna be if it's just the month using the digit is gonna be to M. And if you want to display the shorthand, it's gonna be three m's. And if you want full, it's gonna be the four EMS, for example. But I will find the reference to provide to you eso You know how to, uh, how to wreck. Know what's format to sell to select so you can display the right format. So let's check. I think I may have a mistaken. That's because, yeah, that's because it may need actually the new dates objects, I believe. So I'm gonna take this entire thing here and then a sign all the way. That's not gonna work, because that's just a string that's gonna be new date. So we'll use the constructor of new dates and wrap. This has arguments and something we must not forget is to wrap within the curly braces spirit. So now we have the date formatted nicely formatted. So you see us when I was saying for the father the day s so we have the day, Uh, we're this is Tuesday Today. So this is region in full, then for the month is just the shorthand and 24th 4 digits for the day and the year influence. Okay, so whatever Miss Elects, it doesn't change. Actually, what we're gonna do next is a dating be able. Teoh updates the date that we select by using one even handler, because what we want is to, um, actually access the date that was selected order to update the display. So we're going to do that as well by being able to update the states. And for now, what we'll do is just allowed to display the dates at the moment. And finally, we're gonna add these even headless, and we'll have one your methods. I'm gonna add this new method right here. And this one's that may handle changed. Basically, it's every James. So whenever you select and you value, that's my date. The date. So this is the event on the date, Any date picker. So this whatever you selected your value, it's gonna be updated as a result. And we're gonna add a new priority to track to maintain it's gonna be the end date. I'm gonna call this one the nd that I'm going to sit as New date. For now. That's gonna be the default value, and then we're gonna have dates with whichever dates that we select from the date picker. And that's why I'm using this. He right here because I'm referring to the value that a target as the events of whatever. I have a change in the event. I'm gonna get the value that I get by changing the events. So I'm gonna fit the states four and dates and naked, equal to eat. And so I'm going to trigger this function. So whatever, I have a change in the value of the date picker. So as an argument, I'm gonna have the events and I'm gonna call this handle change and pass the event as arguments. And so what I'll do is dating here. Finally, I'm gonna set these have this state and dates ago and we'll see how that works. So now we can read the date. I'm gonna we're And we're going to need to make some citing, obviously, because you see that this is too short, Teoh narrow to to fit the date the entire date. So one of our select right now today is September 4th. I'm gonna change to the sixth and that its gets updated right away. Great. So that's right Now we have a nice date picker. So what I'll do? What we'll do now is we're going to do some styling we're gonna use, actually, um, some would strap, we're gonna use some custom seizes as well. So just to add some space, it's gonna be very straightforward. We're gonna add some space margin between the header and these date picker. 9. Add Styling: So before moving on Teoh, adding some styling. I just want to show you the date format. So to have a better understanding of how you confirm at the dates. So here you have, like, the example. So as I was explaining, in order to have the full year you'd specified, like so, in order to have the month in digits, it would be this way on for the time, Um, plus one, it's on if it refers to the time zone or the not too sure GMT. And here for more complete data in time. You also have, like, the display, how you display the hours, the minutes, seconds except to wrong. And you have another link I'll provide with some resources and links so you can learn further about it. But here you have some examples you have, like the least, and also example as to how you can display the dates with example. So you haven't been a bit on the Senate a better understanding of how displaying the date and time, for example, if you want to display excel on the digits, that would be this way, like for the date. So that's to, uh, de lower case, then cap letters for the month for two digits. And for the year, That would be like twice the year lower case, followed by the time it's to cap for the hour. I believe that's our for the two H caps. It's for the time. 24 hours. Otherwise, if you want just a MPM, it's just small. You can find many examples in a way, and if you want to actually display full so to make it readable like so then this is the formats a bit similar of what we have used, you know, for the day of the week, Uh, the dates on the actual date, the month followed by the year full. Okay, so that's a good results that you can read when you have time. Let's go back because what we want is to add some stichting, as I was explaining, and this time I'm gonna show you get bootstrap. So what we want is to be able to display. I'm gonna show you first documentation before we had was struck to our to our projects will use the city in CSS more convenience and way better on the performance, because it's not gonna download the resources is not gonna is just gonna take it from a results which is hosted on the clout. So that's more That's better. That was better with the performance competence, And we're gonna find in the competence least form area so that this form that we're gonna use it. Actually, that's this very simple styling that I'm that I'm looking at. And basically, you just need to use this class, which is from control in a phone group. I think it's gonna be enough. Okay, So what I'll do is just just make you this one open and I'm gonna go back to installing how to install but strap And it's gonna be with this one. We're gonna add this one in the public folder. It's a four moments we're gonna let's close the known modules. We're going to step into these folder for a moment and opened this index that html because this is the one we just serve to the browser. I'm going to remove the unnecessary commence. And then at this one, this link, I'm gonna add so in the foreigner in the following line here ago, though that's a very long lines. So if you want to keep it on just one line visible on the screen. I'm going to select View and select Taco were a direct, so he's gonna be wrapped on just one line. Okay, so this is the cdn that we're going to use in order to excess resources from the wood stripe library. So as a reminder, reminder what is what struck? This is, um, a JavaScript and she male library, Shamil CSS and JavaScript that allows you to build responsive website. So it comes with competence ready to use in order to build responsive user interface very quickly and easy. So that's the goal of what's dropped and at your leisure as well. We can read more about it, and it has a recommendation which is very well detailed and laid out with examples off competence which already to use basically, what you need to do is just to capi to the clipboard. So the code snippets in order to have a similar they out. So this is what we're gonna do, uh, for the date picker, actually. Well, do is used this one because I'm going to be able to actually apply a class name to the date picker. And so we're done with this fall, I'm gonna add a class name and at form control. We'll see how this works. So we see what we should be able to see Some change Here. Go. So now you can see that, um, this is a lot nicer because it has surrounded borders and with a nice light gray color. Okay, so that's not just ah, it's nothing. It's finished just yet. We're gonna also add some margin so we can at some space between the header and, um, the inputs of the date picker. Also, we're gonna see how we can expand so increased the with because now this is too narrow to fit the entire dates when we selected, and we'll see what we'll do more. Okay, let's start with that. So I'm gonna add some margin between the two, and that's gonna be like a u to E. T. Yes, that's ruled like something that should you could use many times. And we use it in different places in your app. And basically it's gonna be margin, so we're gonna add 20 p extra for the top and bottom and for the left and right. I've just come Just gonna leave it as zero because we don't need any margin for left and right is just for the top and bottom, and I'm gonna add wanted. And this one is gonna have a class name, which will be then margin, and we'll be able to see what right away that now we have some space. That's great. Uh, the other thing I'm gonna do is adding allowed to have, uh, to increase the width of this date picker. And basically, what I can do is actually target. If we used the inspects elements, we're gonna be able to inspect how these date picker is set up. And you see that we have a class for this. The rapper of this date picker. So I'm gonna take this one so I can target it in my CSS. And I'm gonna at this one gonna have one section for the date picker and right below I'm gonna add this class, so I'm gonna override which ever CSS for which has already been applied to these saw this element with this class name, so I'm going to apply with off 60%. I'm gonna make sure that this one is placed in the middle off the view. So that's gonna be zero for the top and bottom and photo. So it's going to calculate. So based on the width and the width of the parents, the parents, you, the parent element, is gonna calculates equal spacing in order to place this one at the center off the parent view the burns elements. Finally, we're going to display in line block. Let's see. So something we're going to need to do as well it is to impact on the wrapper of the date picker itself because what we're targeting right now is being put container. So we'll see that we have a rapper at the top. So that is the parent elements. When you select it, you see that first you have this margin that takes the entire with. And then you have this one, which is the react date picker rapper with doesn't which doesn't take the entire with. So that is the one that we're gonna need to also customize. So I'm gonna select it, copy and paste and also choose to overwrite it in my CSS. I'm gonna play this one at the top and he was. Well, I'm gonna put the with, and that's actually this one that I'm gonna first customize. And that should do it. Terry Gross. And now we have a with which is a little bit, which is more, much larger. So that's good. So this is what we want and OK, that's try. So when we open the full with of this window and when we select Okay, so we have the state picker and we can dance like that. It's so that looks much better. Great. 10. Countdown - Date picker (select date): So that's it for this dining. We're not going to do more eso. We can close this one offs. Feel free to look more about some different competence that you can use with what struck. That's a very good library to know. But anyway, like the one can ignore about Willstrop, that's the the go to resource is that we go. That's the resources that we go to when we want to to interface templates of page very quickly, which is responsive on top of that. OK, so that was one introductions to bootstrap on top of that and the date format as well. So that's good. So the thing we want to do is be able, of course, to update the targets, the targeted dates whenever, with selecting a date from the date picker. That's something that's we that we're already doing. So we maintain the states by, um, selecting the dates as we see here. So, actually, we're gonna be able to see that behind the scene. This is what what happens. So we're gonna look at the react developer tool here, competence. And if we go down the yeah, that's gonna be the up here ago, so you're gonna be able to see the initial states for the distance that we have set at arbitrarily so that some static value, which for now is September the 20 the 24th. So if I refresh your going to see that, it's Ah, it's done your date now. So this is the new date. So this is the end date, and that is the distance, which is calculated between the end dates and the current dates. Okay, so that's gonna be the distance that we need to put to display right here. So now that we know we can maintain the dates when we select the date, you can see that it's gonna change here ago so you could see the change automatic like life real time. Let's try again. We're gonna gonna pick another month like October, and we should be able to read on the right as I change its October the 11th. Okay, great. So what we'll do now is make sure that we can calculate the distance between the selected date and the date now. So for that, we just need your dates here instead of having something static. It's hard coded. It's gonna be instead the States. And remember that we need to refer to that. So we're sure to referring to this off the scope, the state of the components. And this is and it's OK, so let's try that. Okay, so we've got something wrong here, and I'll show you a quick fix for that. But for now, let's make a test by selecting a dates of future dates. So we're sure that this is gonna calculate something which is bigger and OK, so that works just fine. So now we have the distance between, um the dates October the 26th and now which is 51 days total. And what we want is to avoid for the date. Because so if I check if I select a date, which is before, which is already a past state. So we don't want to see the minus because the countdown is not some working. It's already past SRD apostates. So what we're gonna do is instead adding a javascript expression, which is to check a condition. Basically, we're going to check if the distance is not is not below zero to allow to calculate the distance for the way it's not otherwise. it's not gonna do anything. So we're going to do that here. We're gonna added if statements and what we're gonna do is checking if distance is below zero or equal to zero. But we're gonna check if this is not below zero before what we do is taking This is not below zero. Because here the expression says, if distance is more than zero, then do the following. Okay, so let's see if that works. No executive. This states that state distance. There you go. Okay, so now we should check addict, which is before the fourth. We won't have anything. Okay, Of course, for the interface, we need to have something better. And it's dry that speaker date, which is later, like Christmas, 24th. And now we know that we have 111 days until Christmas. Okay, so what we'll do is, uh it's, um, allowing to read zero the digits. So when we start so we know that we won't have anything, Any problems? So when we don't have any time displayed, that's gonna be zero first. And this is only one withs elects. That's it's gonna be updated 11. Final Steps: So in order to avoid these, saw the outs you'd rather have. Like, you'd rather rude. You'd rather 32 digits, as opposed to just one When it's below town, it's very easy to fix. Actually, you could actually, you could actually have, like, another. You could have another, uh, a method that is used just to format, for example. We could actually added, like, right below formats. And this one is gonna take a value to form mets, and then we're going to return. Uh, I'm gonna actually. Right. Uh, so I'm Yeah, time. No value to just a generic. Let's say value. And we're gonna format this value to display two digits instead of just one. And this two digits we want Teoh. Check if this is below, uh, zero Big, not 0 11th if it's below 10 then we're gonna display whichever value with zero first because of perfect, that's gonna be zero and then plus value. And if it's not, the case is just gonna be the value. Okay, let's do that. It's gonna be very straightforward. And instead of having just this, we're gonna take the whole thing and erupt inside this method Bridges formats and passed this as an argument off course. We need to refer to this, which will be that as well, because that's gonna be the scoop of, um Yep. That's gonna be the scope of their of the components as opposed to the to the function, and do that for itch its value. Now, that would be one last parts to improve the interface of our application off our countdown application. Perego, let's check if that works. Fine. So we just have we should have, like, one day until, uh, the six. Yeah, that's one day. So that's good. That works just fine. So between now and September the sixth Friday, we have one date. So you see that it is showing you 01 as opposed to just one. So that doesn't look different of the other digits. And we'll wait for this one to go below 10 and you're going to see that it's not gonna show just one digit but two digits zero and then followed by the next number below 10. So let's wait. And here you see that now? It was two digits, one digit preceded by his ever. Okay, great. And now it starts of it. Okay, so now we are ready to move forward to another, um, demonstration another. All the lessons. What I'd like you to do is, uh, in order to practice more with this first example, this first workshop is to play with the layouts. Customize. I'd like to see your examples of a countdown. So which is like using the exact same base. But you can add features by, um, adding so, for example, to add visual cue. If you know that the dates is before you could put some sliding to show that this is a dates that you can pick. This is not required. So add red border as a feedback for the user. You could change also the header to have a different layout into face for the header. Change the numbers as well by grown close exit our etcetera. So I'm gonna let you have fun with the layout of this countdown, and I would be happy to see your demonstrations