People of Game of Thrones using JavaScript DOM

Ajouté : 2026-06-01

[00:00:00]so in this video we are going to update an application that we have created earlier known as people of got we will be adding two new features filter by house and search people filter by house is a tags with the house name and when you click on that only the people of that houses will be visible here similarly when you start searching by typing any name then the people's name containing that search will be visible on down there before writing code let's just take a look of how this application looks like right now so here we have all the tags and search in static the only thing dynamic here is the number of people shown and if we look at our javascript it is selecting the root element that is ul getting all the people from got houses and it is coming from data.js file that is this file and getting all the people and based on that creating the li image another element and putting it into the root element so this is how we are creating the layout now let's go ahead and start working on our filter by tags so the first thing we need to do is to get all the tags or the name of the houses so how can we do that so for that we'll say let all tags is equal to to get the tags we'll have to look at the structure of the data so got houses is an array of object which contains the name of the tags or name of the house so how can we do that so here we will be using map because the input array size will be similar to output so we'll say got dot houses dot map it will give me access to one house each house is an object from that object all i need is the name of the house so we'll say house dot name now if you want to take a look at this you can just say console.log all tags refresh it and here we can see all the tags that is 11. we have to display these tags right here as our tag so we'll remove this we just have to create a ul select our tag element in js file similar to cards we'll say root tags and here it will be tags and will create a function create tags ui that accept all the tags that is that will default to empty array and it will do the same thing that we are doing it here we will copy it paste it here in instead of root it will be root tags instead of data it will be tags and we don't have to create all of it so i'll just remove this create a li and will say li dot inner text should be equal to will get one single tag and we'll say tag and we have to call this function we'll say create tag ui and will pass all tags let's see so everything is gone instead of adding it to root dot append we will be doing root tags dot append refresh it and here we can see all the tags that we need starks lannisters baratheons targaryens greyjoys and everything like that so we are displaying all the tags along with that we will have to add a event listener so we can change the ui right here so first thing we need to do is to add a event listener on these tags so how can we do that we'll have li we'll just say add event listener we're listening to the event of type click and when that happens i need you to call this function so what i need to do is in the starting no house will be selected so we need to keep a state state means data so we'll select active house is equal to empty and as soon as you click on any of this tag all i need to do is change active house is equal to whatever we are getting that is tag so as soon as you click on any of it the first thing you will need to do is to change the ui here how the ui is changing here we are changing the ui or creating the ui using create cards function that accepts a collection of people so what we can do here is we'll say filtered people or you can just say people of the house so we'll say people of the house and how we will get the people only of that house so to get the people of that specific house we will have to use the data how we can do that we just have to say got that house and get the index once we find the index we'll just get this object inside that we have to find this so let's just go ahead and find it first so we'll say got dot houses dot find we have to find the first house with that name so we'll say so we'll get access to one house and we need to say house dot name is equal to equal to whatever is a tag so this will give me access to that specific house that will be an object so if you want to check let's go ahead and say console.log people of the house refresh it click on any stock and you can see you're getting the stark house so this is an object you just need access to the people so we'll just say dot people if that is not present i'm just saying default to an empty array so we'll get people of the houses along with that what we need to do is to call this function with the new array that is people of the house refresh it click on stocks and we can see only stocks are visible when you click on lannisters look at this it is changing it is changing so all of these things are changing and it is working properly the only problem here is so we are not able to understand which tag is active so to change the visual impression of it how we are going to do that i've already created a class named active and we just need to add it whenever we are creating the tags ui here so how can we do that so simply how we should be doing it is we'll say li dot add li dot class list dot add we need to add a class of active but there needs to be a condition and that condition is whenever you have active house is equal to equal to tag then only you have to do this we are we have a variable named active house and whenever you're clicking on any other tag i'm updating the active house and whenever it is active house you just have to update it so now what we need to do is refresh this page and whenever you are saying create card along with that you also need to say create tags ui and will pass all tags now if we refresh it and click on any of the tag like stocks you can see it is active clicking on lannisters this became active now so the way we are doing it is like we have a variable called active house and whenever the active house matches our tag we're just adding active class and our active class is just adding a new style to it so whenever you click on targaryens first thing i'm doing is updating the state that is active house variable and based on that i'm changing the style so in this way we are able to complete the first part of it when you click on any of it it displays different information based on it let's move on to the next feature next feature is search so when you start typing anything here it needs to search and based on that it needs to display the output here so the first thing we need to do is to add a event listener on this one so to get a hold of that element let's give it a class of search select it using javascript we'll say search and we'll add event listener on it we'll say search dot add event listener so we're listening for the event of type input or change or key up you can have any of that and here we'll just call a function handle search we'll go ahead and create the function handle search handle search function will get access to event object and here we just need to say console.log event dot target dot value refresh it click on it and you can see you're getting the value here now what we need to do is this is a text people are searching for so we'll say text or better let's call it search text now once we get the search text we just have to search on all the people so we'll say let filtered people is equal to all people dot filter will get access to one person and will say person dot name dot includes any of it any of the search text so we'll say search text here if that is the case all you need to do is to update the ui how we are updating the ui by calling this function create cards so we'll call this function create cards and we'll say all people sorry instead of all people will say filtered people refresh it now if we go ahead and search for it we'll see let's search for stocks oh it's not saying anything do you know why because if you look at the name stock starts with capital s and javascript is a case sensitive language so obviously it will not be same so what we need to do is to convert name and search text both in lower case so then it will become easier to search so we'll say p dot name dot to lower case [Music] same here we'll say search takes dot to lowercase let's see if it works now let's search for stocks and we can see all the stocks are visible here similarly if we search for a dodd you'll see all the things are working so as soon as you're typing for something say for example you want to search for tyrion so you'll say t y all the person whose name contains t y you can see it here so in this way we are able to complete our search along with we are able to complete showing individual tags and when you click on it it displays people of that house only important thing to notice is here we have a active house based on that we are displaying which one is active we are getting all the tags all people we are creating cards and here we are creating tags ui and adding event listener here and we have a function named handle search so in this way we completed adding new functionality to people of got