The Development Process of a Web Application

As we continue to work on our web application, we are now focusing on the design and functionality of the search bar. We want to ensure that it looks visually appealing and functions smoothly. To achieve this, we add the necessary styles to the search bar component.

Our goal is to make sure that the search bar looks perfect and does what we want it to do. We use the exact dimensions provided by Airbnb to ensure accuracy. However, when we hover over the search airbnb link, it becomes transparent, which we don't want. To fix this issue, we add a CSS rule to invert the colors on hover.

The updated code looks like this:

```

.search-bar {

width: 300px;

height: 50px;

background-color: white;

color: #333;

}

.search-bar:hover {

background-color: #333;

color: white;

}

```

With this change, the search bar now looks perfect and functions as expected. When we hover over the search airbnb link, it changes to a dark gray color with white text, making it look clean and visually appealing.

We also receive some donations from our viewers, including $5 from Danny Finkelstein and €5 from Devon. These donations are greatly appreciated and will help us continue to create high-quality content for our audience.

Now that we have the search bar working perfectly, we can move on to the next step in the development process: adding a date picker component. We want to make sure that this component looks beautiful and functions smoothly.

To achieve this, we go back to the banner and update the code for the search dates. We want to change the text to "Hide" when the user clicks on the search dates button. To do this, we use JavaScript and add a condition to check if the show search variable is true. If it is, we display the text "Hide".

We also receive an epic donation of $20 from PathReSFL. This donation is greatly appreciated and will help us continue to create high-quality content for our audience.

With the date picker component added, we now have a complete set of features for our web application. However, there's one last thing we need to do: add some cards underneath the search bar. We want these cards to be visually appealing and function smoothly.

To achieve this, we go back to the home page and update the code for the cards. We want to make sure that they are centered perfectly and look good when clicked. To do this, we use CSS and add some styles to the card component.

The updated code looks like this:

```

.card {

width: 300px;

height: 200px;

background-color: white;

color: #333;

}

.card:hover {

background-color: #333;

color: white;

}

```

With these changes, we now have a complete set of features for our web application. The search bar is working perfectly, the date picker component is added, and the cards are visually appealing.

We also want to make sure that the status bar at the bottom of the screen is not too distracting. We can achieve this by making it smaller and more compact.

To do this, we update the CSS code for the status bar:

```

.status-bar {

width: 50px;

height: 20px;

background-color: #333;

color: white;

}

```

With these changes, we now have a complete set of features for our web application. The search bar is working perfectly, the date picker component is added, and the cards are visually appealing. We've also made some adjustments to the status bar to make it less distracting.

As we continue to work on our web application, we want to ensure that it meets all of our requirements. We'll keep updating and improving the code until it's perfect.

We receive another donation from Pastor, who has donated $4. This donation is greatly appreciated and will help us continue to create high-quality content for our audience.

With this final update, we now have a complete set of features for our web application. The search bar is working perfectly, the date picker component is added, and the cards are visually appealing. We've also made some adjustments to the status bar to make it less distracting.

We'll continue to work on our web application and add more features until it's perfect. Thank you to all of our viewers for their support and donations. We couldn't have done this without them.

"WEBVTTKind: captionsLanguage: enyeah oh nice that looks clean like a crisp little look to that uh and what we're gonna do now is actually go ahead and have so we've done that sort of very nice sort of look and feel to that part what we're gonna do is have an actual search button at the top so a search bomb which has search dates right so at this point to add that search button i'm going to go ahead add a another div on on top of this and this one we're going to call someone say div like here i'm going to give it a class name so i'm going to say class name last name of banner and this is going to be banner underscore underscore search like this and here i'm going to basically add in a button so i'm going to say a button will exist here and this button will essentially say at this point we're going to say just search dates right so something like this button search dates and what i want to do is i'm going to give it a variant of outline so i'm going to go ahead and do this oops i've forgot that we don't have previous i'm going to go ahead and do variant of outlined oops variant of outline like this awesome and then what i'm going to do is give it a class name as well so i'm going to go ahead and say class name of banner underscore underscore search button so we can start this later on so banner search button and with that said it should we should have a button on top and you can see it's actually there it's a little bit difficult to see but it's actually sitting there at the top and it says search dates at the top so that's very clean now we're going to go ahead and style that so whenever we give a material ui class a class we actually need to style it with the important properties so i'm going to go ahead and add the following styles to that button i'm going to say a background color of white i'm going to say the font weight should be 900 and it should have a text transform so to get rid of the uppercase text and we're going to give it the text itself a color of the airbnb pink so that's how we get that look and feel and then what i'm going to say is for the banner search so the actual div surrounding it i'm going to say go ahead and do the following so i'm going to say give it a top of zero so it should be attached to the top give it a display flex so actually let's go ahead and get rid of this one we can do display flex and then we're going to say flex direction column and this will actually span the entire width of the screen so display column and now you should see it takes up the top of the column so you see at the top now we have that search dates and i'm going to get rid of the home component text over there because that's just ugly right now so boom there we go you've got the search dates at the top right so that looks clean um but what we want to do now is have it so that when you click search dates we essentially change it so it says search dates and then hide search dates and hide and have to to demonstrate this go to the deployed version quasi yeah let's go and if you click on search dates so you see it says hide at the top and then it says search dates every time you click the button it changes the state right right so we want to get that functionality and then basically we and that nice little like nice little animation when i click it at the top yeah so that's actually already in there at the moment so if you go ahead and go to r1 so that's the reason why we get that is because we're using the material ui button nice okay yeah so that's why we get that one right there so awesome so now what we're going to do is we are going to go to the um search dates and what we've got to do to get this functionality is actually add in a piece of state so the piece of state that we're going to add in so state is essentially just how you write a variable inside of react here we're going to have a piece of state which is called show search right and the reason why we're going to do this is because we want this but we want this variable to keep track of if we click that button or not and by default initially when we click it we're going to have false and the reason why we want to do this is because we're going to say if you click it so let's just say for example um whenever it says show search so if so show search is true then i basically want to render out the search element that you guys saw earlier so let's just say show such uh show date picker let's show show date because that's what we're trying to do here um exactly now if we go ahead and say it says use state is not defined we need to import that so we need to import that as such at the top of the file there we go save it and then we should be able to see now if we save that so kazi now if we actually change this to true you should be able to see that it should say show date picker awesome and if i change this to false it goes ahead and it hides that right so now we have some kind of functionality to it right so what we need to do is that button we're going to tie the functionality to that button so i'm going to say on click of that button whenever you click that button i'm going to shoot off an arrow function so it's going to shoot off a function and this is going to say set show search to whatever the opposite of show search currently is so if it's currently true it's going to become false if it's currently false it's going to become true so now to show this in practice kazi go ahead and hit the search date button or search yeah search dates and now you can see show date picker there we go so you see we have some kind of functionality to it now right and now that is gonna that basically sets us up for the next part this the next part is essentially building that beautiful date picker that you guys see in the final build which is a really nice all right i'll add that i'll add that to the top so currently we're working on building the date picker yep we're building the date picker at the moment okay i just added that to the top awesome so now what we're going to do is let's go ahead and go to um let's go ahead and actually go to we need to basically we're going to replace this show date picker with some kind of component which looks like this so we're going to have a search component right and this search component should render out to be essentially what we see in the final product so let's go ahead and create search.js so we should snap into that file any second now i've just created a search.js file and boom we are in it and if we do rfc a we should get our es7 snippet and let's go ahead and do our normal bem naming convention so we say search let's go ahead and create the appropriate css file so we're going to import from search.css save that create the search.css file nice um by the way we just broke 1 000 likes yeah thank you guys so much for that that is huge and meriban says that if sunny could he would shower with the airpods chris thanks so much for the five dollar donation really really appreciate you damn and he goes finishing up the hulu shadow clone you did yesterday but wanted to show some love hey that's awesome dude glad you're doing that because yeah the hulu clone was the hooligan was one of the funnest builds i didn't think it would be that fun but it was free if you guys haven't yeah if you guys haven't that's something which like just looks so nice on your portfolio like the hulu clone um it might already be deployed actually so you might have it um is it clone let me go ahead and see if i've got it so i've got the actual link here i can drop it tunes let's go ahead and do it i'll drop it in the code quasi so go ahead and check out that okay boom all right got it so this is the one you guys built yesterday damn it just looks so freaking slick like look at that wow insane yeah and it's completely uh connected to an api so if you go to the top and you actually go ahead and click because i was wondering i'm like how much accurate dummy text and data did you guys add like holy crap oh wow so if i actually change horror romance it changes yo this build is actually sick kind of regret that i wasn't like here for this build this one was pretty fun yeah like look at how juicy it all looks like even before the even the animations like me and frankie were saying adding those animations changes it from a website to an app yeah yeah true true true yeah that's true so this is the kind this is the kind of app that you guys would see on like a fire stick tv app or something you know like this is the kind of thing that you would be used to seeing as opposed to just a website like you so you could probably build this deploy on some kind of fire stick app and yeah that'd be awesome nice somebody asked luke says why don't you guys work at google guys we're not the guys who work at google we get the guys who work at google at google we're those guys literally those guys yeah yeah hopefully in the next one or two years like the probability of somebody asking like how'd you get a job at google like and somebody like saying clever programmer would be like massive like hey it was clever programmer exactly nice so with that said let's go ahead and build the search functionality so let's go back to search and here this is where this is going to be an intricate part of it hold on so are we building search or date picker yeah uh so we're building the date picker but this is it's part basically the date picker is the search component um okay all right i mean i i don't underst how does that work there this is the date picker component yeah right so are we working are we not working on the data picker component then okay okay all right i'll just let you keep going yeah oh yeah we are yeah the search component i'm gonna add this in here date picker component there we go all right nice so um now we've got the i think maybe loves your chair this is this new chair by the way i swear i think i've seen this in the previous ones oh yeah thank you guys by the way this is a brand new chair i just got actually it has a nice little pillow here for me to sleep on look at that you know there's a proper stream streaming yeah yeah yeah and then it has like this back support thing which is hard to show right now but it's right here this thing right there nice so it has yeah because what was happening with other chair was i couldn't like i couldn't actually sit with my back on it so that was the problem i'm laughing because meanwhile frankie's gone like yeah frankie's chair no frankie has a pretty cool chair right this is a mess he has like a wooden chair yeah you know hey man when you live stream you know you got you need all this i just walk around like this now i don't even let my neck go from here i try to keep my neck glued all right here we go back back to the date picker nice so inside the date picker we need to do a few things right so the thing that actually allows all that date picker magic to happen is um the react date range so i'm trying to kill the laughter let's open up the terminal quasi whoops raffle there we go raphael says honey is that your amg that is my amg thank you dude hey that guy's name is but his name is mine what the hell is going on here i'm rafi oh yeah nice frank goes frankie has he friend goes frankie has the junior dev chair because he has a senior dev chair yeah let's go to the second terminal um okay so second terminal right here type in here npmi icu yep npm i and then react date range so this one right here and it doesn't matter if you're in that folder or in the actual app folder right yeah it doesn't matter which one well cd anyways bro cause we're gonna forget when we're about to deploy oh damn wait no hold up did i do it okay good shot dude good job yeah make sure you're in the right one because otherwise that will be an issue uh it's being super slow it's being super slow right now make sure you're in the right photo guys because that will i don't know my terminals being so slow who retracted that message damn dude why are they that's funny dude somebody's message just got retracted they're like i don't know what he said but he's like am i the only one who thinks sunny is looking fat today i don't know why people think that you're more jacked than everybody here i'm the one who's actually fat i gotta work on my my belly you know gotta work on it i'm trying to box every day mma again hey let's go bro yeah i'm doing krav maga which is like an israeli style of mma yeah damn yeah it'd be dope man yeah yeah i'll show you jiu-jitsu you can show me some krav maga let's do it dude i'm down i want to learn jiu-jitsu as well i'll be sick yeah so now guys we're going to import the date range picker so this is like a very handy npm module that i found and we've got we're going to import and now you also need to import two other files so these are css files that the guys who made this module recommend that you you bring in and this is because basically this is going to give you all that styling that you guys saw in the final one that's how the date picker looks the way it looks uh sharia sharma mma tutorials coming soon yeah just to see us doing react one day jiu jitsu the next unboxing the the day after that that's it nice so we've we imported the date range picker and to use it there's a few things we need to do now right so we need to add two pieces of state and to add those pieces of state it's very simple one is going to be for the start date and one is going to be for the end date so here we just done that so we've added in the start date and date let's go ahead and do yep that's it nice and for the start date we're going to give it a we're just using today's date as the initial value and for the end date we're doing today's date as well now once we've done that we need to actually add in the following object so here we basically say cons selection range now this stuff you don't really need to know why we need to read it this way the main thing is is somebody said sonny can't stop laughing at frankie's chair it does make me laugh yeah frankie frankie show us your chair again oh it's because oh what happened here yo who's manning the live chat damn guys it's because you're like this you're like super stern on your jet you know bro i'm not leaving this thing bro i'm just glued to this thing because i've learned my lesson my neck starts breaking after doing the live streams yeah it does it does we need to add this selection range and this is something that they want you to do if you're using this so you need to do section range start date end date and then the key which is just selection i'm not sure what the key is for in this situation but you need to have it so add that in and then we're going to create a function and this function is basically responsible for this function is responsible for when you basically select a date so here we're saying whenever you select a date set the start date to whatever range you selected the start date and then set the end date to whatever range you selected the end date now this is all done by the library itself so we just need to have this function in here and then they handle everything else um so manava ross says are you going to launch any react native course and he just dropped a donation thank you for that thank you um yeah not a react native course at this point but react we're covering so uh yeah so we'll actually be dropping some content on react native very soon nice so we have the search here and now what we're gonna do is we are actually gonna go ahead and add in the following line of code now this is the date range picker itself so date range picker ranges we basically pass an array with selection range so this one here and that's an object and then on change we pass in our handle select function okay so this is stuff that i would recommend you guys just follow you literally just follow it along you do it as i've written it and everything will just work for you as well inside your project so cozy let's go ahead and open up our localhost and what i'm going to do is i'm going to import the search so import import search from search yeah there we go and now what we should be able to see is it says use state is undefined okay so you state is not fine we need to go ahead and do this nice save it and now it also says i can't read that it says cannot resolve something what does that say cannot resolve um let me go ahead and pop this in because oh yeah i've got it localhost 3000. nice but but it says cannot resolve date fns oh yes okay so this actually requires something called fns so you need to do mpmi so let's go ahead and pull it up npm i date fns so it's a peer dependency to be honest they should have set the the modules up to actually do this for you but you need to do this step guys because you need that um otherwise you're going to run into this issue so that's they're bad but it should be fine so now once that installs that should fix this issue for us um okay there we go so now if we actually see it should be loading up for us in a second so nice so now if we click search dates awesome because you go ahead and click search days hey it's opening that thing up bro let me refresh and let's click it again boom look at that got yesterday this week damn bro that they built all of that out of the box i was like i don't know why but i was thinking man i'm like sonny must have done a lot of math here to make this stuff work like damn bro i should have just made up some some excuse me like yeah dude you know what to be honest i have built one of these manually at a previous job and guys it's actually a headache to build that so using a package like this is actually really really handy and this one is actually looks beautiful it looks it looks really nice it's a really really good library to use because there's a lot of edge cases that you have to account for when you're doing this guys stop repeating questions in the chat we are gonna block you so now what we're going to do is let's go ahead and add in um let's go ahead and add in the following so i need to actually i want to check something actually i wonder if we removed this from underneath here and changed it over here and then we tried it so let's go ahead and save i just want to try something quickly so now if we go ahead and try and click the search dates okay that's pretty clean but it's not as nice as we want all right anyway so going back to the point so let's go ahead and we've added in this the this date picker functionality so we need to style it to look the way that we want it to look right um so in order to get it to look like that we need to do a bunch of styling to this thing um and in order to do that let's go ahead and do the following so inside of search this target search let's do the following so we're going to say position absolute uh top 35 pixels left 25 width of 100 view it so um because if you go ahead and click on the search dates yo thanks adam whoa what happened to my voice there yo thanks adam for the 79 cent uh pound is it 79 euro what is this that's a pence like pounds this is wait are you serious it's like pennies yeah 79 pennies 79 pence it's like it's like you know pounds and pence and dollars and cents oh bro i did not know this thank you for the 79 pence really appreciate it thank you dude so here we're going to do so click on search dates all right boom clicked yeah and now as we style it you'll be able to see everything sort of move around as we need it so click leave that open uh what we're going to do you want me to make it half the screen yeah that's too hard enough nice so now what i'm going to do is i'm going to add in boom i'm going to add in this and we're going to make it so now it's saying top 35 pixels from the top left 25 pixels and then width 100 view it let's do half enough quasi for this fit all right i will somebody is like yo if you guys are making so much money why do these little donations impress you guys that's the humility that actually got us here today exactly yeah and that would never change guys like even if somebody sent us one like literally no like thumbs up button yeah hitting the thumbs up button we're so grateful for like it literally doesn't like i remember in the beginning we started off and it was like a four dollar donation and it was like it blew our mind so yeah yeah dude is that what mike pence's is a one yeah one uh pound one one cent one pounds i'm not just a bad joke but okay got it nice so now i was talking about this guy like mike pence but i'll just remove it so now we're going to do the we're going to target the h2 uh which is so right now we don't actually have a h2 element so i'm going to go back to our search i'm going to add in a h2 which is basically going to be the number of guests so we're going to have that number of guests pop in underneath and then we're going to have number of guests and also we're going to have an input field for the number of guests so here we're going to have an input field for like how many guests you want to have and they're also going to have a button which says search airbnb right so i'm going to add a button so here i'm going to say i'm going to say button and i need to do an import for that and here i'm going to say search airbnb so let's go ahead and do that search airbnb let's go ahead and import that at the top so boom like that save the file and it says people icon is not defined because the people icon is an icon that we need to import from material ui so go ahead and save that hey adam tate just dropped another donation of two pounds he says thanks for taking your evenings up to do this dude you're welcome like it's insane the amount of value that we see you guys like you know thank you bro this guy's working his way up from pants to multiple pens thank you really appreciate it i think the first one was just a feeler you know yeah damn all right thank you bro nice so now what we're going to do is we have the dates popping up um so again if you could just click on the search dates button cozy reason why we have to click it is because yeah it refreshes at times so now you can see it says search at the moment oh salman fazad uh for faizal has dropped five canadian dollars nice so we'll be coming back to this later at my own pace just passing by to say thank you hold on let me pop that in let me pop that in okay now cover it so he says we'll be coming back to code this later on at my own pace just passing by to say thank you from everyone by the way we will be coding react native anytime soon of course dude we will be definitely calling native soon so stay tuned for that and again massive thank you for donating that's it we really appreciate that thank you bro awesome so let's go ahead and do um the h2 yeah so now for the h2 what i'm going to do is i'm going to do this i'm going to copy a bunch of styles in here and i'm going to explain through what they're doing so as soon as i hit save on this you actually see the style looked a bit different there right and the reason why that happened is because i don't display flex align item center which means that the um we now have that icon so that people icon push to the right so um we now have the people so uh cause you might need to move our face on the uh on ecam so let's move our face to maybe the center you got it because right now it's covering the number of guests um so so that should be you should go you guys should be obscene now on the drop down it says the number of guests and then it actually has that people icon and then we got that with justify content space between and display flex so now they're spaced apart and we gave it a width of five five nine padding of 10 pixels background color of white position absolute left of zero and top of 380 pixels and the parent we actually gave it a position relative so that's why it stays in its place so the next thing is i'm just going to go ahead and style the input so the input field is this one here so this one over here and this one i'm going to go ahead and do this so i'm going to say a width of 539 padding at 20 pixels position absolute left 0 height 30 pixels top 420 and border of none so you guys can just go ahead and actually just use these styles and copy us and it will work for you um and that actually drops it down to the next line and that's actually a very nice um uh number sort of that you can now select and it will show you uh and the final thing that we're going to do or not the final thing but i basically now when you click the number of guests because you click on the the number two and you'll see that you'll see that nasty outline so uh not not that one it's just number of guests yeah so you get that nasty outline so to get rid of that we add in this we say when we focus make the outline with zero so you can see it's gone now oh that is but now i can't hold on yeah it's definitely gone yeah it's true it's gone but the date picker kind of blends into the page a little bit so i can't see where it's ending but yeah definitely it looks much better yeah so right now that's fine because we will be adding a button which you'll be able to see in a sec yeah so for the button to style we need to do the following we're going to say go ahead and target that button and do the following so position absolute left of zero but top four text transform inherit and that's because we don't want to be uppercase background color of the airbnb color and then color white and the width of 57579 and that will give you the exact perfect dimensions that you guys are going to need and it should do what we want so there you go you've got it looking pretty good but when you hover over so because if you hover over search airbnb right now you'll see it kind of goes transparent which is nasty like so the the search airbnb yeah we see that kind of we don't want that we want it to basically invert the colors right so to do so to do that we add this in we say when we hover whenever we hover over it we want to basically do a background color of white and a color text to be that so now if you do it and you hover over that you actually see it so if you click uh hover over search airbnb click it nice not looks clean you want me to click it uh not yet not yet got it got it because i i will click it danny finkelstein says keep up the awesome work guys i will watch this oh snap let me find out damn thank you bro for that five dollar donation and said whoa okay nice danny thoroughly tonight hey let's go emotional code coming in with the heavy hidden 20 donation thank you so much and all he said was that was his message to us thank you whenever i see like a 20 donation or something i just picture somebody coming in swinging everything's frank seriously yeah this is just epic thank you for that we are at 111 dollars in super chat thank you so much we just broke a hundred dollars and uh you guys are awesome that's insane thank you so much guys let's keep this going so now what we're going to do is we are going to have it so now we actually have that date picker component looking beautiful it looks really nice but when we click search dates we want to change the text and we want to change that text so that it actually says hide right so how do we do that we go back to banner and here where we had the search dates what we can do here is we can actually go ahead and change this now so that it says the following we can actually say we can do this we can get rid of this right and inside of here what we can do is we can say if show search is true then show hold up text one second so sunny yeah hold up hold up hold up hold up how do we is there a way we can hide the side bar completely which one the status i think it's the is it the activity bar or the status bar oh you're talking about that blue stuff at the bottom on the left hand side i think that's the status the on the left hand side the one that with the file and the icons because the code is getting way too rap like it's getting wrapped up way too much um what we can do you know what i mean like it's looking too goofy now yeah i think we can do like what is this show sidebar i mean i can make it smaller but i think then it becomes really hard to read unless everybody's okay with reading that i think that's okay i think that's okay yeah i think that will be pretty good okay if you guys are okay with that tax just let me know otherwise i can change it back yeah and thank you so much devon for the five euro donation thank you so much brother i really appreciate it awesome that's nice thank you dude so now what we're going to do is we have the search dates uh added on and if you click on uh the search dates cause you saw in localhost 3000 you'll notice it says hide so it's a search date and then it says hi yeah that's awesome so we have this whoa yeah okay if you make it bigger there you go it centers perfectly so you get a nice like little look to it awesome so now what we're going to do is we're going to make it so that we are actually going no actually at this point i think what we need to do is add in the cards right so the cards are what we see underneath those like those really nice looking cards um and what we need to do is we go to home and essentially what we're going to do inside of home another epic donation by path re sfl four dollar donation thank you so much my man really appreciate you and guys if like pastor you've also been enjoying this video so far what can they do sunny they can smash the thumbs up button guys make sure it's blue so it's done and yeah we appreciate that it'll get the video out to as many people as it possibly can and it will help more people out there so go ahead and smash that thumbs up button do it guys thank you awesome so with that said guys now what we're going to do is we oh damn dude this is the donations of flying today damn let me let me find it first let me findyeah oh nice that looks clean like a crisp little look to that uh and what we're gonna do now is actually go ahead and have so we've done that sort of very nice sort of look and feel to that part what we're gonna do is have an actual search button at the top so a search bomb which has search dates right so at this point to add that search button i'm going to go ahead add a another div on on top of this and this one we're going to call someone say div like here i'm going to give it a class name so i'm going to say class name last name of banner and this is going to be banner underscore underscore search like this and here i'm going to basically add in a button so i'm going to say a button will exist here and this button will essentially say at this point we're going to say just search dates right so something like this button search dates and what i want to do is i'm going to give it a variant of outline so i'm going to go ahead and do this oops i've forgot that we don't have previous i'm going to go ahead and do variant of outlined oops variant of outline like this awesome and then what i'm going to do is give it a class name as well so i'm going to go ahead and say class name of banner underscore underscore search button so we can start this later on so banner search button and with that said it should we should have a button on top and you can see it's actually there it's a little bit difficult to see but it's actually sitting there at the top and it says search dates at the top so that's very clean now we're going to go ahead and style that so whenever we give a material ui class a class we actually need to style it with the important properties so i'm going to go ahead and add the following styles to that button i'm going to say a background color of white i'm going to say the font weight should be 900 and it should have a text transform so to get rid of the uppercase text and we're going to give it the text itself a color of the airbnb pink so that's how we get that look and feel and then what i'm going to say is for the banner search so the actual div surrounding it i'm going to say go ahead and do the following so i'm going to say give it a top of zero so it should be attached to the top give it a display flex so actually let's go ahead and get rid of this one we can do display flex and then we're going to say flex direction column and this will actually span the entire width of the screen so display column and now you should see it takes up the top of the column so you see at the top now we have that search dates and i'm going to get rid of the home component text over there because that's just ugly right now so boom there we go you've got the search dates at the top right so that looks clean um but what we want to do now is have it so that when you click search dates we essentially change it so it says search dates and then hide search dates and hide and have to to demonstrate this go to the deployed version quasi yeah let's go and if you click on search dates so you see it says hide at the top and then it says search dates every time you click the button it changes the state right right so we want to get that functionality and then basically we and that nice little like nice little animation when i click it at the top yeah so that's actually already in there at the moment so if you go ahead and go to r1 so that's the reason why we get that is because we're using the material ui button nice okay yeah so that's why we get that one right there so awesome so now what we're going to do is we are going to go to the um search dates and what we've got to do to get this functionality is actually add in a piece of state so the piece of state that we're going to add in so state is essentially just how you write a variable inside of react here we're going to have a piece of state which is called show search right and the reason why we're going to do this is because we want this but we want this variable to keep track of if we click that button or not and by default initially when we click it we're going to have false and the reason why we want to do this is because we're going to say if you click it so let's just say for example um whenever it says show search so if so show search is true then i basically want to render out the search element that you guys saw earlier so let's just say show such uh show date picker let's show show date because that's what we're trying to do here um exactly now if we go ahead and say it says use state is not defined we need to import that so we need to import that as such at the top of the file there we go save it and then we should be able to see now if we save that so kazi now if we actually change this to true you should be able to see that it should say show date picker awesome and if i change this to false it goes ahead and it hides that right so now we have some kind of functionality to it right so what we need to do is that button we're going to tie the functionality to that button so i'm going to say on click of that button whenever you click that button i'm going to shoot off an arrow function so it's going to shoot off a function and this is going to say set show search to whatever the opposite of show search currently is so if it's currently true it's going to become false if it's currently false it's going to become true so now to show this in practice kazi go ahead and hit the search date button or search yeah search dates and now you can see show date picker there we go so you see we have some kind of functionality to it now right and now that is gonna that basically sets us up for the next part this the next part is essentially building that beautiful date picker that you guys see in the final build which is a really nice all right i'll add that i'll add that to the top so currently we're working on building the date picker yep we're building the date picker at the moment okay i just added that to the top awesome so now what we're going to do is let's go ahead and go to um let's go ahead and actually go to we need to basically we're going to replace this show date picker with some kind of component which looks like this so we're going to have a search component right and this search component should render out to be essentially what we see in the final product so let's go ahead and create search.js so we should snap into that file any second now i've just created a search.js file and boom we are in it and if we do rfc a we should get our es7 snippet and let's go ahead and do our normal bem naming convention so we say search let's go ahead and create the appropriate css file so we're going to import from search.css save that create the search.css file nice um by the way we just broke 1 000 likes yeah thank you guys so much for that that is huge and meriban says that if sunny could he would shower with the airpods chris thanks so much for the five dollar donation really really appreciate you damn and he goes finishing up the hulu shadow clone you did yesterday but wanted to show some love hey that's awesome dude glad you're doing that because yeah the hulu clone was the hooligan was one of the funnest builds i didn't think it would be that fun but it was free if you guys haven't yeah if you guys haven't that's something which like just looks so nice on your portfolio like the hulu clone um it might already be deployed actually so you might have it um is it clone let me go ahead and see if i've got it so i've got the actual link here i can drop it tunes let's go ahead and do it i'll drop it in the code quasi so go ahead and check out that okay boom all right got it so this is the one you guys built yesterday damn it just looks so freaking slick like look at that wow insane yeah and it's completely uh connected to an api so if you go to the top and you actually go ahead and click because i was wondering i'm like how much accurate dummy text and data did you guys add like holy crap oh wow so if i actually change horror romance it changes yo this build is actually sick kind of regret that i wasn't like here for this build this one was pretty fun yeah like look at how juicy it all looks like even before the even the animations like me and frankie were saying adding those animations changes it from a website to an app yeah yeah true true true yeah that's true so this is the kind this is the kind of app that you guys would see on like a fire stick tv app or something you know like this is the kind of thing that you would be used to seeing as opposed to just a website like you so you could probably build this deploy on some kind of fire stick app and yeah that'd be awesome nice somebody asked luke says why don't you guys work at google guys we're not the guys who work at google we get the guys who work at google at google we're those guys literally those guys yeah yeah hopefully in the next one or two years like the probability of somebody asking like how'd you get a job at google like and somebody like saying clever programmer would be like massive like hey it was clever programmer exactly nice so with that said let's go ahead and build the search functionality so let's go back to search and here this is where this is going to be an intricate part of it hold on so are we building search or date picker yeah uh so we're building the date picker but this is it's part basically the date picker is the search component um okay all right i mean i i don't underst how does that work there this is the date picker component yeah right so are we working are we not working on the data picker component then okay okay all right i'll just let you keep going yeah oh yeah we are yeah the search component i'm gonna add this in here date picker component there we go all right nice so um now we've got the i think maybe loves your chair this is this new chair by the way i swear i think i've seen this in the previous ones oh yeah thank you guys by the way this is a brand new chair i just got actually it has a nice little pillow here for me to sleep on look at that you know there's a proper stream streaming yeah yeah yeah and then it has like this back support thing which is hard to show right now but it's right here this thing right there nice so it has yeah because what was happening with other chair was i couldn't like i couldn't actually sit with my back on it so that was the problem i'm laughing because meanwhile frankie's gone like yeah frankie's chair no frankie has a pretty cool chair right this is a mess he has like a wooden chair yeah you know hey man when you live stream you know you got you need all this i just walk around like this now i don't even let my neck go from here i try to keep my neck glued all right here we go back back to the date picker nice so inside the date picker we need to do a few things right so the thing that actually allows all that date picker magic to happen is um the react date range so i'm trying to kill the laughter let's open up the terminal quasi whoops raffle there we go raphael says honey is that your amg that is my amg thank you dude hey that guy's name is but his name is mine what the hell is going on here i'm rafi oh yeah nice frank goes frankie has he friend goes frankie has the junior dev chair because he has a senior dev chair yeah let's go to the second terminal um okay so second terminal right here type in here npmi icu yep npm i and then react date range so this one right here and it doesn't matter if you're in that folder or in the actual app folder right yeah it doesn't matter which one well cd anyways bro cause we're gonna forget when we're about to deploy oh damn wait no hold up did i do it okay good shot dude good job yeah make sure you're in the right one because otherwise that will be an issue uh it's being super slow it's being super slow right now make sure you're in the right photo guys because that will i don't know my terminals being so slow who retracted that message damn dude why are they that's funny dude somebody's message just got retracted they're like i don't know what he said but he's like am i the only one who thinks sunny is looking fat today i don't know why people think that you're more jacked than everybody here i'm the one who's actually fat i gotta work on my my belly you know gotta work on it i'm trying to box every day mma again hey let's go bro yeah i'm doing krav maga which is like an israeli style of mma yeah damn yeah it'd be dope man yeah yeah i'll show you jiu-jitsu you can show me some krav maga let's do it dude i'm down i want to learn jiu-jitsu as well i'll be sick yeah so now guys we're going to import the date range picker so this is like a very handy npm module that i found and we've got we're going to import and now you also need to import two other files so these are css files that the guys who made this module recommend that you you bring in and this is because basically this is going to give you all that styling that you guys saw in the final one that's how the date picker looks the way it looks uh sharia sharma mma tutorials coming soon yeah just to see us doing react one day jiu jitsu the next unboxing the the day after that that's it nice so we've we imported the date range picker and to use it there's a few things we need to do now right so we need to add two pieces of state and to add those pieces of state it's very simple one is going to be for the start date and one is going to be for the end date so here we just done that so we've added in the start date and date let's go ahead and do yep that's it nice and for the start date we're going to give it a we're just using today's date as the initial value and for the end date we're doing today's date as well now once we've done that we need to actually add in the following object so here we basically say cons selection range now this stuff you don't really need to know why we need to read it this way the main thing is is somebody said sonny can't stop laughing at frankie's chair it does make me laugh yeah frankie frankie show us your chair again oh it's because oh what happened here yo who's manning the live chat damn guys it's because you're like this you're like super stern on your jet you know bro i'm not leaving this thing bro i'm just glued to this thing because i've learned my lesson my neck starts breaking after doing the live streams yeah it does it does we need to add this selection range and this is something that they want you to do if you're using this so you need to do section range start date end date and then the key which is just selection i'm not sure what the key is for in this situation but you need to have it so add that in and then we're going to create a function and this function is basically responsible for this function is responsible for when you basically select a date so here we're saying whenever you select a date set the start date to whatever range you selected the start date and then set the end date to whatever range you selected the end date now this is all done by the library itself so we just need to have this function in here and then they handle everything else um so manava ross says are you going to launch any react native course and he just dropped a donation thank you for that thank you um yeah not a react native course at this point but react we're covering so uh yeah so we'll actually be dropping some content on react native very soon nice so we have the search here and now what we're gonna do is we are actually gonna go ahead and add in the following line of code now this is the date range picker itself so date range picker ranges we basically pass an array with selection range so this one here and that's an object and then on change we pass in our handle select function okay so this is stuff that i would recommend you guys just follow you literally just follow it along you do it as i've written it and everything will just work for you as well inside your project so cozy let's go ahead and open up our localhost and what i'm going to do is i'm going to import the search so import import search from search yeah there we go and now what we should be able to see is it says use state is undefined okay so you state is not fine we need to go ahead and do this nice save it and now it also says i can't read that it says cannot resolve something what does that say cannot resolve um let me go ahead and pop this in because oh yeah i've got it localhost 3000. nice but but it says cannot resolve date fns oh yes okay so this actually requires something called fns so you need to do mpmi so let's go ahead and pull it up npm i date fns so it's a peer dependency to be honest they should have set the the modules up to actually do this for you but you need to do this step guys because you need that um otherwise you're going to run into this issue so that's they're bad but it should be fine so now once that installs that should fix this issue for us um okay there we go so now if we actually see it should be loading up for us in a second so nice so now if we click search dates awesome because you go ahead and click search days hey it's opening that thing up bro let me refresh and let's click it again boom look at that got yesterday this week damn bro that they built all of that out of the box i was like i don't know why but i was thinking man i'm like sonny must have done a lot of math here to make this stuff work like damn bro i should have just made up some some excuse me like yeah dude you know what to be honest i have built one of these manually at a previous job and guys it's actually a headache to build that so using a package like this is actually really really handy and this one is actually looks beautiful it looks it looks really nice it's a really really good library to use because there's a lot of edge cases that you have to account for when you're doing this guys stop repeating questions in the chat we are gonna block you so now what we're going to do is let's go ahead and add in um let's go ahead and add in the following so i need to actually i want to check something actually i wonder if we removed this from underneath here and changed it over here and then we tried it so let's go ahead and save i just want to try something quickly so now if we go ahead and try and click the search dates okay that's pretty clean but it's not as nice as we want all right anyway so going back to the point so let's go ahead and we've added in this the this date picker functionality so we need to style it to look the way that we want it to look right um so in order to get it to look like that we need to do a bunch of styling to this thing um and in order to do that let's go ahead and do the following so inside of search this target search let's do the following so we're going to say position absolute uh top 35 pixels left 25 width of 100 view it so um because if you go ahead and click on the search dates yo thanks adam whoa what happened to my voice there yo thanks adam for the 79 cent uh pound is it 79 euro what is this that's a pence like pounds this is wait are you serious it's like pennies yeah 79 pennies 79 pence it's like it's like you know pounds and pence and dollars and cents oh bro i did not know this thank you for the 79 pence really appreciate it thank you dude so here we're going to do so click on search dates all right boom clicked yeah and now as we style it you'll be able to see everything sort of move around as we need it so click leave that open uh what we're going to do you want me to make it half the screen yeah that's too hard enough nice so now what i'm going to do is i'm going to add in boom i'm going to add in this and we're going to make it so now it's saying top 35 pixels from the top left 25 pixels and then width 100 view it let's do half enough quasi for this fit all right i will somebody is like yo if you guys are making so much money why do these little donations impress you guys that's the humility that actually got us here today exactly yeah and that would never change guys like even if somebody sent us one like literally no like thumbs up button yeah hitting the thumbs up button we're so grateful for like it literally doesn't like i remember in the beginning we started off and it was like a four dollar donation and it was like it blew our mind so yeah yeah dude is that what mike pence's is a one yeah one uh pound one one cent one pounds i'm not just a bad joke but okay got it nice so now i was talking about this guy like mike pence but i'll just remove it so now we're going to do the we're going to target the h2 uh which is so right now we don't actually have a h2 element so i'm going to go back to our search i'm going to add in a h2 which is basically going to be the number of guests so we're going to have that number of guests pop in underneath and then we're going to have number of guests and also we're going to have an input field for the number of guests so here we're going to have an input field for like how many guests you want to have and they're also going to have a button which says search airbnb right so i'm going to add a button so here i'm going to say i'm going to say button and i need to do an import for that and here i'm going to say search airbnb so let's go ahead and do that search airbnb let's go ahead and import that at the top so boom like that save the file and it says people icon is not defined because the people icon is an icon that we need to import from material ui so go ahead and save that hey adam tate just dropped another donation of two pounds he says thanks for taking your evenings up to do this dude you're welcome like it's insane the amount of value that we see you guys like you know thank you bro this guy's working his way up from pants to multiple pens thank you really appreciate it i think the first one was just a feeler you know yeah damn all right thank you bro nice so now what we're going to do is we have the dates popping up um so again if you could just click on the search dates button cozy reason why we have to click it is because yeah it refreshes at times so now you can see it says search at the moment oh salman fazad uh for faizal has dropped five canadian dollars nice so we'll be coming back to this later at my own pace just passing by to say thank you hold on let me pop that in let me pop that in okay now cover it so he says we'll be coming back to code this later on at my own pace just passing by to say thank you from everyone by the way we will be coding react native anytime soon of course dude we will be definitely calling native soon so stay tuned for that and again massive thank you for donating that's it we really appreciate that thank you bro awesome so let's go ahead and do um the h2 yeah so now for the h2 what i'm going to do is i'm going to do this i'm going to copy a bunch of styles in here and i'm going to explain through what they're doing so as soon as i hit save on this you actually see the style looked a bit different there right and the reason why that happened is because i don't display flex align item center which means that the um we now have that icon so that people icon push to the right so um we now have the people so uh cause you might need to move our face on the uh on ecam so let's move our face to maybe the center you got it because right now it's covering the number of guests um so so that should be you should go you guys should be obscene now on the drop down it says the number of guests and then it actually has that people icon and then we got that with justify content space between and display flex so now they're spaced apart and we gave it a width of five five nine padding of 10 pixels background color of white position absolute left of zero and top of 380 pixels and the parent we actually gave it a position relative so that's why it stays in its place so the next thing is i'm just going to go ahead and style the input so the input field is this one here so this one over here and this one i'm going to go ahead and do this so i'm going to say a width of 539 padding at 20 pixels position absolute left 0 height 30 pixels top 420 and border of none so you guys can just go ahead and actually just use these styles and copy us and it will work for you um and that actually drops it down to the next line and that's actually a very nice um uh number sort of that you can now select and it will show you uh and the final thing that we're going to do or not the final thing but i basically now when you click the number of guests because you click on the the number two and you'll see that you'll see that nasty outline so uh not not that one it's just number of guests yeah so you get that nasty outline so to get rid of that we add in this we say when we focus make the outline with zero so you can see it's gone now oh that is but now i can't hold on yeah it's definitely gone yeah it's true it's gone but the date picker kind of blends into the page a little bit so i can't see where it's ending but yeah definitely it looks much better yeah so right now that's fine because we will be adding a button which you'll be able to see in a sec yeah so for the button to style we need to do the following we're going to say go ahead and target that button and do the following so position absolute left of zero but top four text transform inherit and that's because we don't want to be uppercase background color of the airbnb color and then color white and the width of 57579 and that will give you the exact perfect dimensions that you guys are going to need and it should do what we want so there you go you've got it looking pretty good but when you hover over so because if you hover over search airbnb right now you'll see it kind of goes transparent which is nasty like so the the search airbnb yeah we see that kind of we don't want that we want it to basically invert the colors right so to do so to do that we add this in we say when we hover whenever we hover over it we want to basically do a background color of white and a color text to be that so now if you do it and you hover over that you actually see it so if you click uh hover over search airbnb click it nice not looks clean you want me to click it uh not yet not yet got it got it because i i will click it danny finkelstein says keep up the awesome work guys i will watch this oh snap let me find out damn thank you bro for that five dollar donation and said whoa okay nice danny thoroughly tonight hey let's go emotional code coming in with the heavy hidden 20 donation thank you so much and all he said was that was his message to us thank you whenever i see like a 20 donation or something i just picture somebody coming in swinging everything's frank seriously yeah this is just epic thank you for that we are at 111 dollars in super chat thank you so much we just broke a hundred dollars and uh you guys are awesome that's insane thank you so much guys let's keep this going so now what we're going to do is we are going to have it so now we actually have that date picker component looking beautiful it looks really nice but when we click search dates we want to change the text and we want to change that text so that it actually says hide right so how do we do that we go back to banner and here where we had the search dates what we can do here is we can actually go ahead and change this now so that it says the following we can actually say we can do this we can get rid of this right and inside of here what we can do is we can say if show search is true then show hold up text one second so sunny yeah hold up hold up hold up hold up how do we is there a way we can hide the side bar completely which one the status i think it's the is it the activity bar or the status bar oh you're talking about that blue stuff at the bottom on the left hand side i think that's the status the on the left hand side the one that with the file and the icons because the code is getting way too rap like it's getting wrapped up way too much um what we can do you know what i mean like it's looking too goofy now yeah i think we can do like what is this show sidebar i mean i can make it smaller but i think then it becomes really hard to read unless everybody's okay with reading that i think that's okay i think that's okay yeah i think that will be pretty good okay if you guys are okay with that tax just let me know otherwise i can change it back yeah and thank you so much devon for the five euro donation thank you so much brother i really appreciate it awesome that's nice thank you dude so now what we're going to do is we have the search dates uh added on and if you click on uh the search dates cause you saw in localhost 3000 you'll notice it says hide so it's a search date and then it says hi yeah that's awesome so we have this whoa yeah okay if you make it bigger there you go it centers perfectly so you get a nice like little look to it awesome so now what we're going to do is we're going to make it so that we are actually going no actually at this point i think what we need to do is add in the cards right so the cards are what we see underneath those like those really nice looking cards um and what we need to do is we go to home and essentially what we're going to do inside of home another epic donation by path re sfl four dollar donation thank you so much my man really appreciate you and guys if like pastor you've also been enjoying this video so far what can they do sunny they can smash the thumbs up button guys make sure it's blue so it's done and yeah we appreciate that it'll get the video out to as many people as it possibly can and it will help more people out there so go ahead and smash that thumbs up button do it guys thank you awesome so with that said guys now what we're going to do is we oh damn dude this is the donations of flying today damn let me let me find it first let me find\n"