welcome back everyone so this is going to be our last video of the entire series we're gonna design the UI page so for that we are going to use materialized CSS this is a CSS framework pretty much similar to bootstrap but has different style so we can have a look in their official website so we can see how the components to look like so you have buttons like this we have like cards and so on so it can take your time to look how we can use the entire code and Haswell how to get started so you do have actually all the information needed what you should insert in our code so I have already done that part so you can see here I have all the libraries there are few links okay lines JavaScript July CSS and as well as some of the link and not the new some Google icon fun so this is the these are the first thing that you have to do I'm gonna put this link in the description below you can as well look here how to get started okay you have the same information now the second thing we're gonna create a template the template which will have all the different section okay so we're gonna have our buttons input or the different days VI plays summary temperature and time zone so basically I'm going to create theoretically a table with two different columns three different rows which makes six cells so I can have all these informations as we have three six different things here so let's get started let's create our div so I'm gonna have a div wage which is going to have a class equal to row okay the first day is [Music] and now I'm gonna create a form class leave it empty because here I'm gonna give the size for the phone for now and when I leave it empty and come back later how sizes work here this is going to be the entire big form inside the road okay like this space here and then each the phone will have three different rules okay we're gonna have changed from rows in our form so I'm gonna create three different two blocks of day okay let's close that so I just copy this part paste it here let's put it this here and each different it's different let's say row will have individual let's say individual days because we want two cells okay so we're gonna create two different div inside and the first one will have their for example the input field the second one the bottom so I'm gonna have you create a class for now I'm gonna give it empty okay for now with VMT later on when we come to decide so you have two days on the here and then another one okay so now we have our template basically everything that we need so let's now work on the size it's like in bootstrap so there are two equal columns so this I'm gonna divide by 50% so I'm gonna have example see your help which stands for column L stands for large devices for now I'm going to just work for large devices I'm going to put instead of twelve six this is the size of my form the entire form is going to take 50% but my individual cell in each row will have 50% of this entire size so I'm gonna have here Cu l : and 3 so which will apply for every other class that I have so in here now the first thing is the class that we have here is an input field so I'm gonna say input this is a class that we have take input field and also I forgot to put the size it's going to be called entry I'm gonna give the same thing here okay because I won't have the same type of sorry same type of styling so I'm gonna put even though it's not a input field I'm gonna keep it as an input field yeah okay so now what we are going to do is just drag and drop the code that we have it first one is going to be the input and take this one put it right here okay somehow I delete it so I'm gonna just rewrite it so it's going to be input type equal to text and I'm gonna have let's say placeholder so this kind of text that we can have in our input field [Music] silly okay and basically that's it so that's all we need I'm gonna have another div as well is going to be a label so I'm gonna have a small text just above our input field I'm going to go for city see I'm gonna have the following great so we have done our first part let's move on to the second one where I would like to have my button so I'm going to just take this one lady here just drop it here and we're gonna apply the styling at the bottom so you could actually search here the button you want for example can go here and the button have different styling and I guess I'm going to use the following one that I'm just going to take this one here yeah so I'm gonna put it right here okay that's it so we have done in here instead of having in search text I'm gonna have an icon okay so you can actually click on icon look for it but I have already seen here so I'm going to change that okay and then in here okay it's done we're gonna have an icon instead of having search and that's it so we have done for our first part for input field and as well format the button now we're gonna do for the remaining part of the code which is what we should have in each different cells for the second row and the third row so here I'm gonna have first Ain the city of the country the second one I'm gonna have let's say those summary I guess I want to have the time zone time zone here I'm gonna have you know I'm gonna have the summary okay we have down pretty much and then I'm going to eat this one and you have to make sure that everything goes entire this tip which is the most important one so that's where I'm gonna say 200 is you should apply everything like this tip put this one here delete this bar and bring this so we have done with our code it's pretty we have written everything that we need so let's save it and look the result okay so right click open an incognito window say kind of good-looking page okay so we do have now the bottom we want the placeholder enter any city that detects the label so first like Prague I can just click on search it should bring me back some results it's not bringing the result that I want that is because just back here go back here I forgot to put in this input ng-model equal to location great so I should have the proper result great let's refresh let's see okay great I do have the city in the country and also the kind of the timezone the I'd say the most cloudy did the summary of the day and as well the temperature okay right we have pretty much done we can add one more thing which is the degree in Fahrenheit so let me just take the we have to create somehow a bit go back here now AI script and then we have to create a variable called scope degree equal to the small Celsius sign his type Celsius let me just copy this one okay this is what we want great save this one here in my web page I'm gonna write here the expression let's look at the result now load the page once more and now I have the Fahrenheit so the F so we are getting the result it's proper is good we have it we have done pretty much good you know to build this simple single page application we could do a lot of more things you we can actually work on for example how to have autocomplete filled here so that can be one idea I can change here for example I can make make the eighth letter as a clickable so I can click on it so it can change to Celsius on this results and we can actually collect the data insert into a table and then make a graph out of that so we could we could do a lot of different things we can bring icon I guess this kind of thing I guess these are going to be my upcoming videos so thanks for watching hope you enjoyed bye