Build a simple pomodoro app with next.js and tailwind.css

all right so welcome back to the coding so in today's video we're going to build the promoto raw apps which is the productivity app which is a really small app right here so you can go to the link in description to test it out so for this projects we're going to use the neck.js and with tailwind so the functionality you can see right here is really simple we have the short breaks we have a long breaks and we can start a countdown for this one so when wallets count down when i try to switch to short break they ask for me that do i really want to switch or not and let's say when the timer is starting so if i want to refresh the page so i prevent the user from accesses right away i ask for confirmation also when they want to exit the site same thing here and also they can be able to change the time so right now i'm click reset so right here so i can change this one to yeah let's say 50 for this one so if you go back and you can see the short break is going to go to 50 and all right so and also when the timer has gone let's say if it's reached to the zero zero we have the alarm clock to ring for the user as well so this app is really simple and i hope you like this one all right so let's start so here i'm using vs code so you can use any target that you want and this is just a boilerplate from um create next apps so i have added the uh tailwinds already and i'm also adding the music the alarm i'm p3 right here to it's already if you want to follow along uh you can go into the github page and then you can go to the startup project and then you can just clone from this one and then you can um you can follow the video or if you want to do it on your own uh you can't go into tell-in documentation it is really nice so that they allow you to do it with talon easily with three and not just you can run this command and it already plug in talent for you you don't have to do anything you can just run this command it will add taiwan for you all right so after you're doing that so you can see right here we have the page that we're going to have an index page and right now it's running on local 3000 let's say welcome to deliver coding so we're going to be doing this one so daily focus and there you go all right so we're going to build a ui first i think for the functionality we going to implement it late uh implemented later so first we're going to focus on the ui so i'm going to go into the index apps right here so all right so let's do this so first what i can do is i try to create um set up the background so class names uh bg is gonna be gray 900. all right so as you can see all right so i see there's something is wrong with this one what is that min height okay i see so we have so what i'm gonna do is i'm gonna reload the window so sometimes when you actually install this one it might not work right away so okay so as you can see right now when you clone you need to do some reload so to get it works so right now i can do is min height to screened and since i set up already fun so i can do the fonts enter okay so as you can see right here i have the style and font css i import the phone from enter so i place it right over here and so this is how i do import the fonts and also you do you uh you need to add the fondant right here as well the extent so that we can find what is internet cool so right now we have this one so we'll be able to change the background um the next thing is as you can see right here we work only on the small part of right here so i uh so we're gonna set the maximum a width for this one so for this i'm gonna get the inner div i'm gonna give a class name for this one so class names i'm gonna give the width of this one just max with the two xl's so the two xl right here and then i'm gonna set the min height this one as well let's do let's see the background what does it look like i'm gonna give a gray 900 um so you can see it this size so what we want to do is to make it to the center so to make it center is really simple you can do just an x auto there we go so right now it's in the center okay so i think that pretty much it so i can remove this one the background so next is we're going to build the navigation right here so this is i'm gonna do navigation and as you can see we have the um the icons right here so for that we're going to use the react icon so this is the reacts icons that i like to use there's a lot of icon that you can choose from and so i have already installed it into our projects already so once you get a start project you have everything that needed so we're gonna build the navigation so i'm gonna create a component folder for this one so outside so right here i'm going to do components so inside component right here i'm going to create the navigations navigations.js or c oops so the navigation right here is going to it's really simple so we're gonna have like an l right here and for this one is inside this one as you can see we're going to have the the icon and our logo and also the another icon as well so for this is we're going to use the icon is going to be from icon fee i'm gonna use feather icon so you can choose any icons you want let's say i'm gonna choose the uh fv command right here so i can just copy first i'm gonna copy this one and then i'm going to do like this and then i can just click on one of the icons that i want let's say yeah this one and then i can just paste it right over here i think there's another one is the fee setting so we can search for this one setting so i'm going to just copy and also paste it right here as well so the next thing is we're going to do is to make it uh use it together so this one is going to be the icon is going to be big b command and to style this one it's just a really simple so it's kind of like you give it uh if you wanted to give it bigger you can do text excel or for this one i'm going to make it smaller i'm going to do text sms and then we can do give it a text-wise to give it a color-wise so i think i'm going to import this navigations i think that my navigation i spell wrong now we gations all right this one i'm going to reach i change my name in the name of the file a little bit so navigations okay perfect right now i'm gonna go into index right here so i'm gonna import the navigations oops all right so if we go back into this one we could be able to see this one as you can see we have our navigations very nice and then the next thing is we're gonna have like a text around it so i'm gonna do like an h1 for this one but this one we're going to say delay focus okay so then i'm going to give a class names for the the daily focus is going to be text wise and i think the tag is kind of okay for me this one so you can see and we want to be this one on the same page on the same line so we're going to do flex and we're going to go with the item center we want a little bit of space between this one we're gonna do gaps once and for both of this one we're gonna do custom pointer there we go so right now as you can see it's kind of close to the top so i want for the navigation i want to go the pattern top to five so there we go so let's get a little space from the top so the next thing is going to be a really simple it's just we have to use the b settings right here and for this one it's we need to give it a little bit bigger so i can give it the text for this one the two xls 2xl and then for the cursor it's going to be the katha pointer and for the color for this one we're going to go text wise so you can see right here we have a lot of text y so what we can do is to let's say i i'm going to replace the text y right here uh and then we can use in once for all so it's going to be right here we can do text y there we go so right now everything is y and so we want to be this one from side by side so for to go back into the now we can do flex and now we can do justify this one is going to be between so it's going to push to the side and then i want to be it's a little bit i want to with this one let's say because this one that if imagine if we go on a small screen you can see it's over the edge so what i like to do is to give the width of 11 over 12 so it's and then we make it to the center so we're going to do a max auto and i think that pretty much it for it this one very nice so same thing for this one so you can see we go on a small screen and so for now uh when we click on this one it's going to give us like you know the modal pop-up so for this module moto pop-up we're going to implement it later first we're going to implement both of this ui first okay perfect so next we going to work on the ui so this one is going to be the timer for this one so for this is going to be a really simple i'm going to create another functions uh another component sorry uh called timer.js i'll do ofc again so we have a timer and then we're going to put our timer inside here so all right very nice um and then let's go to our timer um okay so right now our timer we're gonna have this option uh like say this one this three right here option and then we have to show the time and then we can have just uh one button right here which is pretty simple so for that the options so what we can do is to create an option for them so that we can loops because it's going to be a realist are the same things so i'm going to create an options right here as a constant so we're going to do and now we're going to do short breaks and then there's the last one is going to be long break okay perfect so for this one is we so as you can see we have this one uh we want to give it a width of uh it's kind of really small for this one so i'm going to do let's see so for now i'm going to give a background for this one let's say bgy let's see what it's look like so right now since we don't have any contents we do not see anything so i'm going to do we have a div right here that inside this div we're going to do maps our options so option.maps is going to have an options and then we're going to have an index i'm going to use this one as a key so what we're going to return from this one is an h1 off the option so let's say options and then we're going to have like a key now for this one it's going to be equal to index okay very nice so now let's go back in here so this is what it's look like so i want to make this one a little bit smaller than um than the actual size so we want to match the this one right here so what i can do is i'm going to go to width for this one to 10 over 12 and we're going to do mx auto very nice and also we want to put everything into the centers okay all right so for this one i'm going to go to give it like a pt2 phi so a little bit of part in tops now i'm going to remove the bg wise right here okay for the text is going to be all white so i can use on top right here text wise okay very nice uh the next thing is we want to do is to make this one flex so as you can see right here um all right so what i'm gonna do is oh oh forget i forget about making everything into the center so to make the center i'm gonna do flex uh this one justify content centers and it's gonna be atom center as well so you can see right now it's in the center and for this what i'm going to do is flex this one and then i'm going to have the gaps between this one a space between is going to be phi and we're going to go with the item center there we go so as you can see we have a little bit of spacings between this one so we're gonna do that as well um all right okay very nice so for this one i'm going to give the empty for this one so the mt is going to be 10 okay good so next is so after we doing this one we can set the key index so for now let's say uh if we are selected so for now we don't we don't do the functionality yet so but we just do the um statics first so we can do like okay if the key let's say for this one i'm gonna do something like this so we're gonna do pattern inside this one is going to be p1 a little bit inside uh small and then we're going to do the cutter for this one is going to be pointer we're going to do transition so we're going to change the uh so as you can see right here so when we we change this one so there's a little bit of transition when whatever the boudon is select is going to have this background right here so that's what we're going to do and so we're going to do at some our condition right here we can say okay if the index is going to be equal to whatever that's going to pass to or whatever that's going to indict right here for now i'm going to set index zero so we're going to give it the bg the background so let's say the bg gray to 500 and then i'm gonna give the bg opacity to city okay so right now so if we go back in here so as you can see we have this background and then we're going to give this one around it as well so it's a little bit of my photo radius around this one okay very nice all right so i think that's pretty much it for this one so next we're going to create this timer right here so for this uh we're going to go outside this div we're going to create another div but this one is going to be on the same line because we're using flex so to make it on top of each other we're going to do flex calls and inside here i'm going to create a little bit of spacing i'm going to do mt to 10 and then um b for this one to 10 as well and then for the h1 of this one uh we're going to go with the class names of text 2 eight excellence and fun for this one is going to be bowl and now we're going to do selects to none so we don't want to select all right so and then for the h1 is gonna have some margin so i'm gonna do the margin for this one to be zero so for the value like this here i'm sorry i'm gonna set it like a default value so for now like i told you we're gonna focus on the statics first there we go very nice so the next thing is we're going to do is going to create the tongue for this one really simple so and now we can just do the start and then we can give a class name for this one it's going to be the px of 16 py 2 so to give it uh uh x and y and then we're gonna do our text going to be 2xl and rounded to umd so it's really nice brown it and then we're going to give a b g for this one to y so and then for the tech for this one it's going to be text to i'm going to give it blue 500 and then we want to give this one to uppercase and then we want to do fonz bowl there we go so you can see right now it looks the accurate and it looks exactly the same very nice so right now we finish our uis already so we're going to next is going to edit this one is going to be the uh kind of like the about page for this one so so we're going back to our index so we have this one so we're gonna have create another component called about dot js it's gonna be a really simple about uh mostly just uh answering the questions so for this about i'm going to import this one first it's going to be about and then inside here first i'm going to give a class name of which 11 over 12 to match from the navigation so it makes sure that we going to be on the same um with so and now we're going to do the mt 36 a little bit of space and then i'm going to keep a text wise and p5 and then we're going to do yeah d5 right here and then we're gonna have the first questions it's gonna be a div right here and follow up by the questions and for the question right here uh i'm gonna copy this one what is photomode techniques very nice so for the what right here we're gonna do as you can see we have highlight this one on the score so so right now let's see now this is what does it look like now okay very nice so for the what right here uh first we're gonna add the spans around this one so we're gonna do spans okay all right so i'm not sure what's wrong oh okay i see my bet all right so for this band right here what we can do is we can give just a border what is one two border four uh so bottom bottom so and now we can do bottom uh red oops border red 400 so if we go back and you can see we have the highlights right here very nice and for the question right here we can increase the size so it's going to be the text to two xl's uh from the small so on a small screen uh from from a small from the live screen textures album from the small screen we're going to do the text excels and the font for this one isn't going to be fonz mediums and yeah i think that pretty much it okay very nice and then we're gonna have a description right here so what you can do i'm gonna copy this descriptions and then inside here i'm gonna create another paragraph of this one i'm gonna paste this one and for the class of this one as we gonna do is mt phi a little bit the spacing and tracking y so to give it a little bit of um a little spacings and right now okay but the color is gonna be a little bit the same so i'm gonna uh give opacity for this one a little bit so it's a little bit off color i'm gonna do 70 and then text for this one to lg there we go looking good and so the next one is going to be the same things but the different content so i'm just going to copy this once right here so for the question is going to be you know what is uh what are we billing so you can add whatever you want inside here so i can just copy this one and i'm gonna delete the what's right here and for the content i can just uh because this one has a link because it's a little bit different um so i can just copy all of this content and paste it right here and for the link part right here um so what i'm gonna do is i'm gonna create the a tag for this one so for this one i'm gonna create an a text that the ref for this one is going to be this link right here and the content is gonna be this one i'm gonna cut cut and this one right here so we're gonna do a little bit of style for this one but first we're gonna do target for this one to be blank and then we're gonna give a class name to underline and then i'm gonna just copy from this one and then i'm gonna cut this one and paste the links right over here so right now as you can see both of this one is looking the same but we just give this one a little bit of spacings so i'm gonna do is to give a class name as this one to empty to phi okay yeah i think that's pretty much it for this one maybe okay maybe a little bit of spacing are not correct but it's all right so for now the functionality uh the uh this one is already finished the ui so we're going to create our timer so let's do that so first uh what i'm going to do is go into our index right here so we're going to use the state for the state that we're going to use we're going to pass it from the from the tops right here so okay so what i'm gonna do is so as you can see we have three options the photo mode short break and long breaks right so for that i'm gonna create a different state for this one so pomodoro and then we set for more low row equal to use state and then i send the default value i'm gonna put this one at 25 uh there's gonna be short breaks that would break okay and then this one is going to be long breaks and then this one is going to be sets long breaks okay so this one is going to be 5 and this one is going to be 10. so for all of this value is we going passing down to the timer and the next thing is we're going to have as you can see right here we have a different stage so when i click on this one let's go into different stage so i can create a stage of the state right here as well so i'm going to create cons stage is going to be set stage equal to use stage is going to be 0 so i'm going to pass this stage right here for now let's say i'm going to pass stage equal to the stage right here so if we go back into our timer uh we should be very so we received this stage and then when this one is going to be the stage so whenever the index right here is going to be equal to stage and then we're going to change uh this one so for now we need to be able to change the stage um so i can create another function called let's say this one is going to be switch stage so switch stage is going to be like this and for the switch stages we're gonna have like the index right here um let's say index and then for this one we just set state stage to the stage of the index that we have now we can pass this one as well to the retimer and then we can use this as props i think i misspelled this one it's going to be t and also this one as well very nice go back in our timer we should be able to get a switch state and then we can use on clicks so whenever we unclick on this one we're gonna use switch stage and now we're gonna pass our index right here very nice right now if i click on here so you can see we switch between short break long breaks but right now we haven't switched the times that we are selecting this one yet so we're going to pass this one so so that so this we need the functions that gonna be generate the uh the stage so you can see right now when we switch the state we're gonna we don't know which timer we're gonna use to show the user so we don't know which path to the timer right so we need to create a function for this function it's going to be get times so for this one let's do that so we can do can't get ticking time so the time that we're going to select is going to be it's going to be doing ticking so we can do uh best on the stage that we have so we can do if else but i think it's not really good so you can do if stage is equal to zero uh we're going to return podomo and then a lot of if l but there's a better way of doing that so you can do the time stage and then you create an object for this one let's say for the zero you you call for the up point uh for the key zero we're gonna do promoto key one we're gonna call short breaks and key two is we're gonna do long breaks all right and then so the return value of this one is going to be time stage slash the stage and then we'll be able to get the times very nice so then i'm going to pass the get time for this one to to the timer there's a lot of prop trailing but it's all right and then we're gonna be get time and instead of this 25 right here so you can see so we going to call this one is going to be get times function so right now if i switch between this one so as you can see we have the time right here very nice but um for this time right here i want to do is a little bit uh different so all the seconds right here okay so right now we'd be able to switch the time so next up is we going to start the countdown the timer so that's what we're going to do so we're going to start countdown from this one uh all right so let's do that so so to start a countdown it's going to be um a really simple one so let's see so what we count down let's say depending on the stage that we are in so let's say if i'm in a stage one so what i'm count down is going to be i'm count on the po pomodo stage if i'm in the short break i will do the countdown for the uh the short break stage right but this one is all in a minute so we need to half the way to half a second as well so for that i'm going to create another stage called seconds so for this second is going to be set seconds so we're going to update the second as well it's going to be use stage is used is going to be zero very nice and then i'm going to pass a second to this one as well go back into our timer and then instead of this one we can call second and we've i've got to pass this right here so right now we have only one zero so to make it two zero it's really simple so you can convert this one uh two strings and then for this one so you can go to pet start for pet start of this one is going to be two and then you can just click uh power zero so you mean like you add two and then the value is going to be zero so right now we have as you can see right here we have two zero very nice so okay so let's do our countdown so for the countdowns what we can do is to let's say when i click on this button i want to start a countdown so right now i'm going to do use date use effects sorry so it's going to be really simple so for this use effects right here what we're going to do is going gonna set the timer a set interval i'm gonna do set interval set in the wall and then for this is gonna be for every 100 um for every uh thousand milliseconds so which is one second we're gonna run the timer so i'm gonna do the timer stored from unvariable and then we're gonna do let's say the we're gonna clear this one clean the wall so this in the wall is gonna run forever so when you switch the component we should be able to do this but like components and so then it's gonna be clear our timer so that's what we gonna do and then we're going to create a function that is going to be called whenever setting the wall i'm going to create another function right here called clocks ticking okay so what i can do is to create uh update this one so let's say i'm gonna create i'm gonna get a minute so cons minute it's going to be equal to get times and best on a get ticking times so then for this one it's going to be either which state that we are in so you can see get taking time either return us the time based on the stage and then we're gonna get the set minute so we're gonna know which ones are we going to the update the stage right now they update the times based on the stage so let's say update minute it's going to be another function basically it's going to be the same as this one so i'm going to set this one oops and so i'm going to copy from this one everything is going to be the same so because we don't know which function are we going to call right we we don't know which either we're going to call set promoto we don't know which one we're going to call set sprig or set long breaks so that we're going to create this one is going to be update stage and then this one is going to be set promoto that short breaks and this one is going to be set long breaks and then for the return time so we're going to return either update of both of this stage depending on what they are using so we can do this one is going to be set minute is going to be update minute all right so for this one so after now when we get this to value we can do our logic for our timer so we can do okay if the minute is gonna be equal to zero and the second is going to be equal to zero as well so we're gonna do let's say this one is gonna be times up so for now i'm gonna just do simple thing a lot times is up okay else if seconds is equal to zero so so we then we're gonna set the minute and equal to our minute uh the minute right here to the minute let's say a minute minus one and then we're gonna set our second is going to be equal to 59 right else if this if the it's not zero so we're gonna set the second is going to be equal to seconds equal to seconds minus once all right so i think that pretty much it for this one i'm gonna call this function inside our interwall right now let's see what's gonna happen oh so as you can see right now it's that tickings but i think the logics that we set this one is wrong uh let's see set seconds we not updating this one okay actually we update this one but uh let's see why it only do this one it update for only one times only um so i think for this one we need to uh set up the run the interval so this one is going to be seconds i'm going to put the second inside here so you can see right now uh this one it's gonna run so whenever the second has changed so we're gonna run again and also we're gonna shoot past the promoto we're gonna pass a short break as well and then also we're gonna pass the long break so whenever either both of this one has changed we run the use of x all right voila so right now it's good so for let's see for example so i'm going to change this one so what we can do is to stop the timer and also enable the timer so right now it's kind of like automatically running this one so we don't want to do that right so we don't want we want to use it to clicks on start and doing this one so we can do create a stage for this one let's say call uh tickings set ticking set tickings set ticking equal to use stage to be false okay very nice and then all right so for what i'm gonna do i'm gonna pass to this once all right so let's see what we can do is to set ticking so we're going to do ticking past we pass ticking for this one and also we're going to pass set ticking as well to set ticking so we're going to pass everything down through our stage let's go to our another component this one right here the king and then we're gonna set tickings right here oops okay very nice so for the mutong right here what we can do for this one is we to on clicks so we on click when we on click on this one what we can do is set ticking to not um let's say this one is taking value let's say takings so we can do is oops i think my bad so ticking to not ticking and then for this value right here so we can say if it's ticking we're gonna show stops else we're gonna show start so right now when i click on this one so you can see we switch between these two but we don't uh for our timer it's not yet ready i think it's not correct for our timer so let's go back in here so this one it should be running if if it tickings right so i can do if tickings so we're going to do ticking clock ticking so right now it's weight so if i click in here so it's not running the reason that it's not running is because our interval right here it's going to re-run after this one is gonna change so for example this use effect right here is already running and it's gonna rerun unless this four parameter is gonna change so what i'm gonna do is i'm gonna set the ticking into right here so for that when i click on this one it's going to run our timer so for now let's say for what i want to see if it actually times up and it's going to be working oops i think that's uh for the our small screen it's not working properly yeah so as you can see right here so i'm gonna debug this one um all right for now we're gonna focus on functionality first i'm gonna go into the i think it's gonna be homes right let's go to here so you can see i'm gonna change the state to zero and for this one i'm going to go 2 not 22 i'm going to go 2 0 2 1 and this one shoot our time's up so you can see it's stopped running forever so there a lot so we're going to do the uh do our times ups properly so rather than a lap right here we're gonna do time's up since we're going to uh reset our timer or we're going to um running alarm clock something like that so but for now i'm gonna do i'm gonna create a function called reset which we not created yet so reset so i'm gonna create the function on top right here reset so when resets right here so the reset right here is going to set everything to back to full so let's say set ticking to false and then we're gonna be set promoto to whatever like a d4 value so let's say for now i'm gonna do the hard code value 25 that's long breaks um to 10 and then that short breaks to phi so this is our reset so whenever it's finished so we're gonna call reset this one so right now let's say for example i'm going to change this one to two or zero and for the zero right here i'm going to go to change the two so let's do start zero one two and it's reset so you can see right here let's go back to the stage which is really nice okay so what else are we going to do for this one i think the next thing is we're gonna do is to let's say we haven't do let's say when i in this stage i can switch and you can see it's wrong right here it fails so this is not the right way so when it's already start so we want to want to use a hey you want to switch are you sure you really want to switch or something like that so [Music] all right so for that we need to keep track whether if we actually running or not so to do that it's going to be i'm going to create another stage called consumes seconds assume seconds is equal set consumes uh seconds right yeah consume seconds is equal to use stage of this one it's going to be equal to zero so and i think i'm spelled this one wrong all right so wait a minute so this one is going to be stats consume seconds okay very nice so for this one it's gonna be update whenever the ticking as well so whenever the clock is ticking so i'm gonna set the consume second is equal to uh value of this one is gonna be plus one all right so it's going to be value it's going to be you plus 1. okay very nice and so if you can see right now it's going to our component let's go to our state so when i click start so you can see our consumers start running three two one and four if it stops the consume is stopped as well very nice so what we can do before we switch we can check and then we ask the user if they want whether they want to switch or not so first we're going to do 10 is yes um let's say consume second so let's say if we have consumed seconds and the stage right now is not equal to the index so if this happens we're gonna ask the user confirms are you sure uh you want to switch are you sure you want to switch else we can set false for this one but if the user is yes so it's yes if they want to switch so we're going to call reset for this one and also we're going to set stage of this one to index but else if it's not consumed second so which mean that okay sometime when we confirm they confirm no and if they confirm no uh and the consume second it's not like you know it's not being run so we can say just switch the states right away so right now let's let's see that so let's say i'm gonna start from this one i can zoom one second if i try to switch it's going to ask me you want to switch if i can sell let's go back to ok i can continue so but if i switch right here so right here as i'm reset so but i reset this not properly so for our reset we should be able to set the seconds to zero as well right so right now if i do this let's say if i consume seconds like here if i switch i'll be okay but the state but if i try to reset again it's going to ask me why for this one because i forgot to reset the consume second so you can see the while you consume second is one so for our reset we should be we should do that as well i'm gonna set consume second to zero as well right now let's do again so i click start okay it's nice it working and if i go switch so right now it's reset so if i switch again it's fine so this one okay very nice okay i think uh that pretty much it for this one let's see what's l that we wanted to do okay i think the next thing is let's say when we start this one we don't want to use it to refresh the page immediately so we need to prompt the user let's ask them hey you really want to do this or not something like that so to do that is really simple so inside the usefx right here we can do windows dot on reload on before unload right here before re until there's going to be an an arrow functions that's going to be asked the users it's going to be returned because we ask this one if whether if we consume second or not like whether it's like the timer has been ticking or not so we can do show warnings to the user else we're gonna do no so right now if i refresh it's okay if i've been already starting the clock if i try to refresh it's going to ask me hey you really want to do this if i want to close it's going to prompt to ask me as well i think that's really neat for this one okay i think that pretty much it for our timer so last but not least uh we going to add the alarm clocks so all right so let's do that all right so i think before we add alarm clocks for this one let's check for the responsiveness under this one i'm not sure let's do the because the about page right here but checks the about page the about page is going to be this one i'm not sure what's breaking right now all right so let's see the about page somehow it's broken at it at our apps so i think it's due to this one let's see i'm gonna reload yeah i think it's because of this one so i'm going to put back the about page and we set this max width right here and then i thinks i think this one should be okay but somehow it's not okay um mm-hmm okay oh no it's not okay so you can see let's see why i think because of the value of this one uh let's do let's see this one on a small screen is it okay yeah i think this one is okay except this one i i'm not sure why it's this one all right let's do the uh okay so for this i think uh maybe i forgot to do like a break words okay there we go so right now i've got just to do a breakword between of this one that's why it's cast this area right here very nice so far so good so i think everything is fine and the last one is we're going to do the the alarm clocks all right so for this i'm going to create another function another component called alarm a chairs okay inside the alarm right here is going to be really simple so what we can do is to the set the audio up this one and then so we can do source uh let's say source of this one is going to be soc and so we're gonna get this one from our um public directory so you can see the alignment b3 right here so what we can do is flash alarm alarm.mp3 and then for the type of this one is going to be types audio dot mp3 slash mp3 oops audi audio slash mp3 okay and so we may bring uh this one if the your browser do not have to support this one so we should have this one as well now i'm going to set the control to true to be able to see this one so it's going to be alarm right here so let's see so you can see if i click play so you can see the alarm clock very nice so right now i'm gonna do the un control so there we go it's gone so we want to be able to control this one so we need to pass like a reference for this one so ref and then i'm going to do make a passive reference to this audio and then we need to create the alarm right here as well so what i'm going to do is i'm going to create the alarm graph is equal to use ref this one and i think that's pretty much it so then we're gonna pass this alarm breath to the our alarm so let's go back in here we have the reference so it's going to be alarm ref very nice so for now we're going to test this one so the alarm ref is going to run is only when the time if ups right so when the time's up so we're gonna do with the alarm so right now let's see so right now it's just this one for when the time's up i just call reset but i think there should be more uh to our ups so let's do that so i'm going to create a function rather than reset i'm going to create one more function called time's ups so inside here what i can do is i'm going to uh times up this uh reset and also for i'm going to call the times up and for this one we want to play the alarm breath as well so alarm ref dot current dot play really simple is that so what i'm gonna do is to all right let's see we have this one ref it's not a propped okay let's see so the ref right here is not a props aha let's see all right the ref right here so okay i see i see so because this one is not r uh uh this one is not a props um that's why it's good fail so what we can do is to create just um so this one and we we're gonna have like a prop for this one and then we're gonna do a like a wrap for this one just something like this ah i see wait a minute so yeah i think this is this is it this one is strange okay so right now oh i think for this one for for the ref right here we going to use the forward ref instead so i'm going to do alarm right here is going to be equal to react dot forward ref and for the forward graph right here let's see uh let's say the returner here i'm going to cut this once and then so for this is we're going to return so we can just return right here and for the one the first one is going to be a prop and this one is going to be a ref so and inside like the index right here we're going to have the right front here i think that's pretty much it like okay the alarm right here i've got to export so export default alarm oops very nice so right now let's try to do our alarm clocks let's go to our component go index i'm going to set this one to zero and for the zero right here i'm going to set it to um two i think this one is stage uh let's say i'm going to go for this one is going to be two oh i think this one right okay two and this one is going to be zero so whenever this one is hits uh times up so we're gonna play so you can see it's play the alarm clock very nice uh and the next thing is we want to show the icon to mute the alarm clocks um let's do that so let's see so we can go back to our index right here and then we can create another function calls cons mute alarms okay so this mute alarm right here so we're going to do alarms dot another let alone ref.currents that's a path and also the alarm that ref the alarm alarmref.current.currenttimes [Music] so it's going to be equal to zero okay so when's are we gonna call this mute so this new dry key is going to um it's going to be uh the same as the we're going to pass through the timers mute alarm so go back into our timer it's going to be inside this one right here gonna be inside this div so we're going to import a react icon let's go to mute i'm not sure which icons that we're gonna using but um let's see for the mute icon is we're gonna do this one right here barbell off so i'm going to copy from this one i think i'm going to copy from this one as well go back to our timer and then i'm going to copy this for alarm off very nice and for this one we're gonna check okay if and only if it times up so we're gonna display this one so if it times up so we're gonna using this one but where is this times up so we're gonna pass uh this one to this one as well and so whenever this one on click we're going to pass the mute times up all right so but right now we don't we do not have any timestops so we can go back into our stage and then we can do okay but this one sets on uh time's up set times up is going to be equal to use stage to false so i see so we think it's because it's like a duplicate so we have this function right here so this one we can set is times up set these times up uh i can pass to the stage right here is times up there we go so we set this one set time subset is times up so when it to be true if this one true okay true right here very nice so right now if i going to click start from this one and i'm going to go tweak the other component let's go to zero uh for the second right here is going to be two so zero one two well uh so you can see time up so when i click on this one it's pass so for this one i'm going to make this one side by side and what if i click start again so when we click start again so i should be able to set the times up right here to be false so that it's not displayed as one so so for that first so when we start ticking right here rather than this one so i'm going to create another function called dot timer so for this start timer right here is to start the timer we can set is set is times up to be false and then we can mute the alarm as well so because let's say and now we can start taking two uh ticking right here to not ticking okay so rather than past that ticking we're gonna pass set timers that's that timer go back to our time right here and then so whenever we click on click on this one set the timer and now we do not have anything we can just okay start the timer and then for this one we can just do something like this again i'm gonna reload start a timer go back to zero this one go back to two zero one two so you can see and i click mute when i click start it resets this one very nice i click stops okay right now it works um the next things that we're going to do is going to be set the ui for this one so you can see our timer right here it is not running pro it's not looking good so i'm going to do flex for this one i'm gonna do gap this one to be two so if we go back again i'm gonna do zero and then this one is gonna be two and then let's start zero one two it's ringing so you can see we have this one and so we're gonna go with the item center as well okay very nice so right now we have the this one right here uh yeah i think that pretty much it for this one let's see did i miss some things okay i think for the last but not last one is we're going to create the reset button that let's say when you click start right here you want to reset this one so what i'm gonna do is to outside right here i'm gonna create another button called reset okay so for the reset right here we can do a little bit of style for this one it's going to be uppercase check for this one to be wise and we're going to do underlying and then we do empty to phi but start uh here right here we do the logic is that it only happens if when whenever we the clock is ticking okay so when it's tick so it's going to be reset so what's going to happen so when we click on this reset what i wanted to do is to reset our clock that's going to be really simple so we're gonna do on clicks it's gonna be called reset okay so i'm gonna pass our resets right here and then let's go back into our index and then we should pass be able to pass resets for this one okay i'm going to reload so right now i click restart so if i click reset so everything is go back to reset right here so let's go back to normal so switch all right let's just check the functionality and it's right here and we switch and that way okay yeah i think that pretty much it for this uh one right here um i think for the next part is we gonna do the optimize this one a little bit and also i think i forgot to add this one right here the nail bar so when it's gonna change the timer so for this i'm gonna do that for in the next video or maybe in the next part so the optimization is that as you can see right now if i go into individual letter of the navigation right here if i console this one console.log i am rebuild okay so if i click on this one so every time the navigation is rebuilt so because the reason that is because we used uh the stage right here it's kind of like a parent stage so whenever the parent state is changing the child both child of this one is going to chain and this one is going to be reload so everything that happened inside this component is going to be rebuilt so we don't want to do that so we don't want we want to optimize this part right here but i think for that part we're going to do that in the next part plus the um the set of the module power up this one right here as well so i think that pretty much it for this part alright see so i'll see you guys the next part all right so for this part what we're going to do is to create the uh time settings uh mode pop up so you can see it's for this pop-up right here so we'll be able to change the times so and whenever i click on the background it's i'll close the model and also i can change and click save to change it as well all right so let's do that so for this one i'm going to create another component for this one i'm going to call modal settings dot js i'm gonna do ofc right here and then for this one i'm going to put this one below the alarm clocks the modal settings okay very nice so for this one so what we're gonna do in this so we're gonna have so as you can see if we go back in here if i click so you can see as the background is a little bit dark so when i click on this one it's close to model as well so for this one we can create let's say i'm going to give a class name of this one to give it to absolute and then we're going to do height fools and then we're going to do with full i'm x i'm x auto i think no not known it this one is going to be left let's see left 0 and then it's going to be top 0 as well it's going to be g2 blacks so right now if we go back in here if i try to reload but you can see it's completely black so what we can do is to get the background opacity with this one to 30 so then we can see the background so there we go so and the next things is that we're going to do is we're going to create a module pop-ups uh this one right here so for this one i'm gonna give a class names of the width of this one to max with two xl's that's for now uh we're gonna do bg toys and then for the i'm going to set the content for this one a little bit so let's say the h1 is going to be times settings right so okay can we see this one okay we can see that it's on the bottoms so which is not good so what we wanted to do this one is to do the absolute as well so i'm going to do absolute and then i can give a width of this one let's say from the small width is going to be the width is going to be 96 and for the lower width so let's say when a small resolution is going to be 11 over 12 and we're going to do left but this one is going to be ft to be one over two and the top for this one is going to be one over twelve one so make sure that's in the middle but it's so we need to do some tweaks uh this arounds a little bit is we need to add some styles or this one is just css so we can do transforms um translate this one transform translate and we're gonna go with 50 for this one so then a minus 50 so then it's going to go into the middle there we go so you can see um for the pattern for this one i'm going to give a pattern for this one to be fine and also i'm going to give a border radius as well so it's going to be rounded to md very nice that looking really good okay so for this one when i click open this one so you can see we have time settings now we have this one close icon right here so for this i can wrap this one in another div and then i can copy one icon i think it's gonna be uh close right so let's see i think it's gonna be fixed right okay so i'm gonna copy this one and for this one is going to be f i x so it's going to be x icon so i'm going to do this one it's going to be a component so for this it's going to be class name for this one is going to be for both of this one is going to be class text to gray 400 and for this one the size of this one is going to be tagged to 2xls all right and then i want to be this one to be flex and then justifies between if we look it's right here if we can see and we're going to make item center make sure everything center and for the h1 right here i'm going to go with the uppercase and fonts this one to be bold and tracking for this one to be wider a little bit of leather spacings and there we go so you can see very nice um next is we're going to have like um a border of this one so you can see this one so for this it's not like a really border so i'm going to create another div with the class name of higher one with to be full and mbg gray 100 and then i'm going to give a little space i'm t5 and then i'm b by very nice so the next thing is we going to have the the the inputs so you can see we have three inputs right here which have the names and we have one button so for this input right here it's going to be the same thing so we can create a loop uh for this one so i'm going to copy the options that i will set up so i'm going to explain what is that so it's gonna be right here okay for the options right here so you can see we have like a reference uh so that is gonna be passed from the top so it's gonna be passed from the as a prop so that we can control of each of the input so i can put this one as a props short reference and long ref so we're gonna go back we're gonna come back to this but for this one as you can see the value for the options that okay i'm gonna change this one to input uh the while you name is gonna be uh put a mo short break long break and the default value is gonna be 10 20 if something like this one all right so right now we can have this one uh what we can do is to this one we can put this inside a div and then i can give a class names of this one to be flex because we're going to loops inside of the input so input that maps and now we're going to have inputs and we can have index so use this as a key and then we're going to return a div here and the key of this one is going to be equal to index okay key uh and then we're going to have one is going to be an h1 of the value so class name for this one and then we're gonna have like a value input value that value and the next one is gonna be an input right here that is gonna have like a default value is going to be the input dot default value and for the type of this one is going to be types number and for the class name is going to be width full i'm going to give a bg of this one a little bit to create 400 and bg opacity okay bg opacity for this is going to be 30 and py to 2 a little bit of windings and then for the reference is going to be input.graph and put that all right okay very nice um okay we have this one and for the text right key i'm gonna do text gray 400 and then the text to be sms a little bit of small all right so if it looks right now there's real kind of okay so you can see it it is okay but we want to be half the gap so i'm going to keep the gap of this one to gap to 5 a little bit of spacing for the inputs right here i can do one more it's going to be rounded and then it's going to be some [Music] i think outline none so you can see uh and then also we're gonna you make this one is gonna be tech to center okay so it's gonna be only number so you can see it's good uh all right so i think that pretty much it the last one is we're gonna have is we're gonna have like a boudon so this one is gonna be safe and then for the class name of this one is going to be bg greens 500 and we're going to do uppercase which is going to be full empty to file a little bit of spacing on tops for text to be white and we're gonna have a border radius and for the i'm gonna give a little bit of patent okay so there we go so you can see very nice but we do not have a default value so where is that ah this one should be default value not d4 checks if we refresh we could see okay very nice that's good but we don't want to beat this to open we only this one to open only when we click on this one right so we need to have um but open this one so let's go back into our index so we can create another state uh let's say calls open settings and then we're going to set opens settings it's gonna be equal to this and we're gonna be use state it's gonna be false uh and then we can pass this one to our modal and also to our navigation as well so let's say set open settings to be uh open this one so for this one is going to be um open settings it's going to be equal to open settings uh set open setting as well is equal to set open settings we need this one there's two right here for the navigation we're gonna pass the set open settings to all right cool let's do that um and i forgot to create so we need to have like uh this model right here is gonna have this three right right here so we're gonna create this one so all right so this is a reference so okay it's going to be equal to use ref not your state use ref and this one is going to be equal to use ref as well and also same thing for this ones user f very nice and then we can go back into here we can pass the reference promoter reference is equal to pole model ref short break ref equal to short break ref and then long break graph is equal to long break right okay cool so right here we're gonna have like uh open settings so this is just two more prop that we're just passing in so this two so as you can see right here i'm gonna pass this one and then we're gonna do some logic to our components so this one it should be hidden for both of this one i should be hidden whenever this open setting is true so what i can do is to add some logic it's like okay if open settings if it's true um so so if it's opened we're gonna do nothing right but if it oh so if it's not open it's like it's it's false so we're going to be hidden this one so i think the same logic is going to apply at the bottom as well so i'm going to copy this once and then we add the backticks for this one and also for this one again here and there we go so right now this one should be gone and next is we need to be able to click on this one to open it up so let's go back into the navigations i'm going to close delete this one and what i passed to this one is going to be set open settings so whenever the this one is on click so whenever this one is on clicks we're gonna set open settings and the value so we're going to be like toggle between this one so not value okay very nice so by clicking here so you can see we open this one so whenever i click on this one or click on this one or click on the background it should be give me like a close this one right so go back to modal settings so i'm going to keep like on clicks so i'm gonna set open settings to false okay and also for the close this one on save i think not yet i'm not unsafe i think this one so if i click on here it's close if i click here it's closed as well i think for this one i'm going to give the cursor 42 pointer as well though so there we go so you can see very nice so i guess we're going to make a reference and update this one so to do that uh we we're going to create a function that's going to update our state um so we can go back into our index right here for on save i'm going to set i'm gonna update times default so all right so i'm gonna create a function right here called update times our default value is going to be this and we're going to be set promoto is going to be uh promoter ref.current.value there we go that short breaks is going to be short break short break graph that current that value the same thing and then we're going to short set long break is going to be long break ref.current dot value and then we're going to pass this one into our model right here very nice and then for our model we can receive this one and then whenever it on save so let's say on save on save on click this one when we on clicks uh we gonna call update this one very nice uh and also when we update this one we should set the open settings to be full as well so we don't want to close we don't want to open but let's say i'm going to open this one i'm going to change this one to 45 click as you can see it's 45 there we go so right now we'll be able to change this one very nice i can change this one to 10 i click on this one and reset so but right now our function is reset it's not uh correct uh the reason is that um if you look at right here it's 10 but when whenever we reset our function is going to set this one to 25 so you can see when we reset i think i will look it right here so right here our reset is wrong all right so what we can do for this one is we're going to set this one to the real value so in instead of this one so for this one week what we should do is so i can erase this one i can just call the update time default value and also when we call the set update time value right here what i want is to set the seconds is going to be two zero as well all right so right now we go back in here so if i clicks on the stats right here so if i were to change this one let's say i'm going to change this one to 15 i'm going to click save go back and then we change every switch this one there we go so right now as you can see it's go back in here so if whenever you hit save on this one it's going to change everything so whatever that you're running so let's say if you are currently running on this one um you may want it to uh let's say if you click on reset so it's going to reset this one and then right now when we switch i think we shouldn't call the switch of this one right the reason that we call that we switch this one because we used to consume so you can see we can zoom four seconds so for this one we can set the consume second to be zero so then we don't have the a prompt to uh to ask us to confirm so right now i'm going to reload our server let's reload this one so let's say i'm going to reset stop this one i want to click this one to change so i'm going to say chain is 1 15 i want to change this one to 50 i click save and then we switch it's okay so you can see and also if i click on reset so it's going to set to 15 because it pick up from our states from our input right here all right so i think that's pretty much it for this one for the last thing that i'm going to show you is the uh the things that i have the this one so as you can see i'm going to console the lock this one is that i am rebuild and let's say if i click start timer so you can see uh this one is going to start rebuild so i think this is not a really nice things to do because that imagine if that this one have a lot of computation imagine that if this fund this function or this component to make an api request so every time that the time is ticking it make an api request to your server so this is going to be a meth so it's going to be like a server overload that's going to be like a detox with your server so the way that you do this one is gonna be if you know that this thing is gonna not gonna change often what you can do is to create the export default is gonna be i'm gonna create this one not like this we have a function we can do memo this once and we're going to do navigations so right now i'm going to reload this one let's see right now you can see our build one time let's do when we uh like talk clock is ticking so it's not gonna rebuild so because re-access know that okay there's nothing changed to this one so we shouldn't rebuild this one so all right so i think that's pretty much it i think we're gonna do that for every components that we have so let's see the about page as well um okay so it's gonna be the same thing so i'm going to cut from this one let's copy it's from another navigations okay so we can do this and then we're going to put the about in here like it's going to be modal settings so it's going to be this one and it's going to be a modal settings i think but this one has a lot of things a lot thing changed a lot but let's see so we click on this one i click stop and i click open this one i click save so everything is working as expected so you can see let's see what's l i think it's going to be alarm so it's going to be the same things i'm gonna do alarm right here very nice so yeah i think that pretty much it for our timer right here we don't do memorize because that this component is gonna be a reveal that depends on like the props that we have so we're going to keep this one so i'm going to remove the console a lot from this one oops i did i mean something okay very nice though i think yes that's pretty much it for our apps uh this one um so if you want to deploy this one so you can go to wassels.com so as you can see right here you can choose the deployment so this one i have already deployed so you can go into the app so you can choose a new project you can connect it to your um you connect to your github so then you can import this one i think so pretty much it like adjust your github permission because this one i set up only the project that i want to be deployed so once you import this one [Music] it's automatically deployed for you you can go to your apps so you can see the deployment right here you can go to settings so you can choose let's say git integration uh and this one is the branch so whenever this is gonna be like a production branch so if we have two or three branch that you want to do production you can do like okay which one is it going to be like a master or main in my case i'm do main you can change this one as well and it's automatically deployed for you whenever you push the new code in so i think that pretty much it for this one i hope you like this one if um if you have any feedback if i make any mistakes or some things for this one please let me know in the comments i hope you like this one see you guys in the next video peace

Channel: Daily Web Coding

Views: 408

Keywords: build a pomodoro clock, build a pomodoro clock part 1, build a countdown timer with react, how to build a web app, tailwindcss, build html css and javascript projects, build 3 projects with html css & javascript, build a project, get a programmer job, reactjs pomodoro timer, pomodoro technique react js, simple css circle progress bar, react pomodoro timer, nextjs, pomodoro timer tutorial reactjs, reactjs pomodoro clock, tailwind, next.js, react.js, project

Id: fZaxD9nHrtE

Length: 91min 6sec (5466 seconds)

Published: Tue Oct 26 2021