**Creating a Flip Effect with React and State**

In this tutorial, we will explore how to create a flip effect using React and state management. We will start by transforming and rotating letters individually, and then take it a step further by flipping out each word.

To begin, we need to import the necessary libraries and set up our initial state. We will use `useState` from React to manage our state, which will keep track of whether each letter is flipped or not.

```jsx

import { useState } from 'react';

const Flip = () => {

const [flip, setFlip] = useState(false);

return (

);

};

```

Next, we need to create a new component for our letter table. This will be responsible for flipping each letter individually.

```jsx

import { useState } from 'react';

const LetterTable = () => {

const [flip, setFlip] = useState(false);

return (

{[...'ABCD'].map((letter, index) => (

))}

{letter}

);

};

export default LetterTable;

```

In this component, we use `useState` to manage our state, which is a boolean value indicating whether the letter should be flipped or not. We also use `map` to render each letter as a table cell.

Now, let's add the flipping effect to each letter. We can do this by using `setTimeout` to flip each letter after a certain amount of time has passed.

```jsx

import { useState } from 'react';

const LetterTable = () => {

const [flip, setFlip] = useState(false);

const timeout = (index) => {

setTimeout(() => {

setFlip(true);

}, 100 * index);

};

return (

{[...'ABCD'].map((letter, index) => (

{index > 0 &&

}

))}

{letter}

);

};

```

In this code, we define a `timeout` function that takes an `index` as a parameter. This function is called for each letter, and it sets the `flip` state to `true` after a certain amount of time has passed (100 milliseconds multiplied by the `index`). We also add a `timeout` prop to each table cell, which calls the `timeout` function with the current index.

Finally, let's create our main component that renders both the table row and the letter table. We will use `map` to render each word in the table row, and pass the `letter` and `index` as props to the `LetterTable` component.

```jsx

import React from 'react';

import LetterTable from './LetterTable';

const Flip = () => {

return (

);

};

export default Flip;

```

In this code, we map over the words 'ABC', and render each word as a table cell. We also pass the `letter` and `index` as props to the `LetterTable` component.

When you run this code, you should see a flip effect where each letter rotates individually. This is just the beginning of our animation, and we can take it further by adding more complex animations or using other libraries like React Hooks.

"WEBVTTKind: captionsLanguage: enthis course will increase your knowledge of JavaScript node.js apis react databases and more Anya Kubo is your instructor she'll show you how to build the same project using three different methods and this will help you gain a deeper understanding of each method hey everyone and welcome to this compilation video which we're going to build the same three times so we're actually going to go to the flight widget we're going to start off super easy we're going to start off building this and vanilla JavaScript so if you're a beginner this is the perfect one for you okay we're going to build the widget and then we're going to display data onto it onto these flipping little cards right here and get new data every so often next up I'm going to show you how to essentially build this by using an API I'm actually going to build it in JavaScript for the front end and show you how to build a node.js backend in order to get data from the API that we're going to use okay so this one right here this is real data this is the real stuff and finally I'm going to show you how to build the same thing but using react at this time I'm going to show you how to use react for the front end and then a database with our own data to pretending we're at the airport and we're updating this data I'm going to show you how to get that data Again by building a node.js backend and using this free database so you don't need any credit cards or anything like that so I'm excited let's do it okay so let's get to building Australia flight widgets so no apis for this one this is going to be super vanilla JavaScript for those of you learning JavaScript however if you do want to learn how to do it with an API please do check out the link in my description below but we're going to do the same project however using an API so it's either project for whatever level you feel comfortable with let's do it so first off I am using web store so this means I can just open up my wet storm and create a new project and I'm just going to choose to call this flight with jet vanilla JavaScript and then click create okay so there we go you will see a directory has been created for me and all I'm going to do is create a new file an HTML file which can be an index HTML file just choose HTML5 right here or if you're not using website you might need to type.html to give your file the HTML extension so that your code editor knows to treat it like an HTML file so there we go there's my HTML file with the boilerplate thank you or webstorm and I'm just going to call this flight widget just like so the next thing we need to do is create an app.js file and a style sheet so Styles CSS once again I'm just going to choose to select the dot CSS file so if you haven't got a web store make sure to put dot CSS to make sure that your code editor treats this as a CSS file and once again I'm just going to create a JavaScript file and call this app and once again make sure to have the dot JS extension if you are not using webstorm okay great so now first things first let's go ahead and connect our style sheet using the link tag it's a self-closing tag and all I'm going to do is make sure that this is going to the path of where we keep our Star sheet as it's in the root of our project along with our index.html file so the same location I could just type in the file name like so we don't need to go into any directories or anything like that and once again I'm going to use the script tag like this and use Source in order to get our app.js files so again the same way that we went and got our CSS file we're just typing in the file name as it's in the same level it's in the same directory so we don't need to go finding it in different folders it's just there so we use the file name great now this is a JavaScript tutorial so we're going to be writing very limited HTML on purpose for this so the only HTML I'm really going to have is a div that's going to I'm going to give this the class of departures so that we can see it and we can style it up a little bit and I'm actually going to have let's just have a header why not like so and then I'm going to have a table now my table well I'm going to hard code the head of the table so if you haven't used tables before you have the table tags that take another tag called T head for the header and then T body these are optional I like to keep my header and my body of the table separate especially for this tutorial it will really help us out a lot this is because I'm going to give the tea body an ID of table body so that we can pick this out and then inject table rows into here using JavaScript so like I said I'm going to hard code the header the table header but this is all going to have injected JavaScript I'm going to show you how to do that it's really exciting let's do it so here is the Syntax for a uh table you have the table row so you have two table row tags like that and then the table row is going to well as this is the table uh header I'm going to use th but these will have TD so the first table header is going to say time and then I'm actually going to pick this out as well so I'm going to give this the idea of time because we're going to want to give this some custom styling later as well as other things this is going to be destination destination and then we have th I'm gonna have flight then we're also going to have the Gate of the flight and then it's also have the remarks so once again let's give all of these an ID so this will be Destination Unknown Known destination then we're gonna have ID of flights and I'm gonna have ID of Gates and this one's going to be ID of remarks okay so that's hard-coded and all of this we're going to be injecting with JavaScript so let's go ahead and do that by picking out this table body element by the ID so in here I'm going to use document get element by ID and look for the table body just like so okay so once we have that I'm gonna actually save it as const table body so that we can work with it easier in our JavaScript and just get rid of that great so the first thing first as we are just you know this is just for fun I'm just going to use an array of data for this so uh let flights I'm using let for a reason which will become more apparent later as this we will want to change this so each of my flights is essentially going to be represented by an object and that is going to have a time so here is my first flights going off at 8 11 A.M its destination is going to be uh a month the flight number is going to be ox 203 the gate number is going to be a01 and the remarks is going to be that it's on time okay so that is one I'm not gonna uh just sit here allow you to watch me type these out I have pre-made this so here are all my flights we have Oman we've got a flight to London that's been canceled Dubai Frankfurt and Tokyo okay so those are my flights I have or I will be putting the code in the description of this video if you want to take that or if you want to you know take this video and just pause it while you write this down it's totally up to you whichever version you prefer but yes I will be sharing the final code with you in the description below okay so those are all our flights this is what we're going to be using in order to create our flight widget so in order to populate our widget with this information I'm going to write a function called populate table just like so and we're going to be using uh for Loops to do this and I'm going to say that four so obviously this is called Flights I want to Loop for as many flights as we have so again this is one flight this is one flight we have one two three four five there's gonna look five times and we can do so with this syntax so flights is the name of our array const flight of flight so we've now defined that one of these is a flight and all I'm going to do is for each flight I'm going to use document to create an element and that element is going to be a table row so once we have done that let's actually save this as const table row great so as it stands for each of these we have created a table row so just like we see here a table Row the next thing we need to do is actually create a table or a TD to hold all of this information so for each one of these lines we need to create a TD element right so let's do that document create element TD and I'm going to save this as const so let's do that so we've done that and the next thing we need to do well actually let's put this in to our table body first so I'm going to get the table body and use append to append the table row into our table bodies so each time this Loop is going to go into the tail what do you put in a table row put in a table row do that five times okay so that is being put in however before we put that in we want to create the five uh TD elements so let's make another loop for this for this time we're going to look in here so we're going to look in the flight look in the flight because we're working with objects this time I'm going to get the flight details so we are saying let's define each of these lines or sorry to be more precise each of these as a flight detail okay so all I'm going to do now is use document create element TD and then const table cell that's what I'm going to call it so we're creating a table cell and now what we want to do is essentially well we can I'm just going to console log for you what this looks like console log the flight detail and of course we need to call this function so it's looking here I can just use this button because we are using webstorm or for those of you not using webstorm you just need to get the absolute pass I'm going to copy the path at the absolute path and then in the browser I'm just going to paste it in like so it's the same thing and now if we inspect the page you will see here's our body there's the div that we made called departures there's our hard-coded header and there's the body and we have injected five table rows as we said okay five table rows and the next thing we said we want to do is put in the table data right and that table data based on the flight details so as you will see here the flight details that are just the essentially the keys we want the values so flight gate remarks so if I was just to use the flight detail for example if I get the table sell in a text flight detail and then of course we need to actually get the table set and put it in the table row so table row append child or pen whichever one you want table cell it would just look like this we don't want that we actually want to get the value so we do so by doing by getting the objects and then opening up the array and finding it based on the flight detail so we're looking in here I'm going our destination and that will return the value just do this instead okay so that will give us the actual flight details cool you think this is pretty much well wrong because this is at the moment just all one word I don't want that I actually want to split out each letter so that we can flip each one and I want to put each one onto a div essentially so that's the next thing that we are going to do so to do this I essentially need to make an array of all the uh letters so instead of doing this here let's get the word and I'm going to use array from this essentially so we don't need this anymore so we're getting the word but obviously the words all like split up into an array it's an array of all the letters and now for each letter so again we're going to use four const a letter of word this time um we're going to create an element and it's going to be a div however yeah that's fine we're going to create a div and then let's save this as letter element so we've got our letter element and then we're going to just get the letter element uh classless ads we're going to add the class of flip and then the letter element text content is just going to be letter right so now if we look in here we of course need to put that in because we haven't done that yet we're gonna get the table sell append letter element go so it looks like this it looks a bit like Matrix so let's do some styling so what do or we want to do so let's go to Starship up now I'm going to use a Google font for this the font is uh condensed Ubuntu so I'm just going to get rid of that Ubuntu Ubuntu sorry Ubuntu kubuntu condensed and I'm just gonna select well there's actually one so it's easy I'm going to use this version to import it into the style sheet directly not into my HTML but you can of course choose to do whatever you wish now for all everything in here I'm going to choose the font family Ubuntu so this one and as a backup Sans serif so I'm just going to paste that in here like so I'm going to say that all the text I want to be like an off-white so I'm going to do that now and the font size is going to be font size sorry it's going to be 35 pixels okay and then the body of the whole app itself well I just want to Center everything so I'm going to use display Flex so I'm initializing the flexbox and then I'm justifying content Center so you can't use this line without initializing flexbox just be aware of that I'm going to give a height to the body because I then also want to align items Center and you can't do this without giving it a height so just keep that in mind and let's make the background color um I'm gonna do two five one one nine nine one two seven great and now the header we did have a header so I'm just going to give that some padding of 10 pixels and then we also named the div that holds everything we gave it the class so dot for class of Departures right so dot class of departures and I'm gonna give this a background color of RGB 666 and let's round it off because I do like a border radius to make it seem kind of like softer I guess border radius 10 pixels and then padding 10 pixels and then we could add some box Shadow later but I'm not going to do that now let's also get the departures uh and say that any table that exists in the div with the class of Departures is going to have a background color of RGB 46 46 46. and I'm going to do text align left so let's see what this looks like so far Okay so we've done that we just need to go into the TD and make sure that everything's kind of aligned next to each other as well so I think that's because of the T or it could be done on the div okay so I'm gonna say that any TD element that lives in the table that also lives in the div with a class of Departures dot for class is going to have a border Solid 4 pixels RGB so this is each cell right and let's give it a background color of black actually we should be doing this on the divs themselves so on each of this div I want to make sure that each div is kind of like a black it has a little border Square so obviously that looks really weird at the moment and this should be black sorry let's make it black and let's make them all float left okay there we go so that's a lot better that is looking so so good I'm also going to actually assign this a height just in case you know there isn't something there I don't want it to kind of look weird so I'm just going to hard code that there and I'm also going to do the same for the actual uh whole cell that this lives in so a TD so like one of these TD cell right so let's hardcore that too so every TD is going to have a height of 50 pixels no matter what cool so great and now one last thing I'm going to do is actually pick out so in here I'm going to pick each of these out by its ID and then just space them out a little bit more because I think they're a little bit too loose together so the hash is for ID so ID of time is going to have a hard-coded width of 160 pixels no matter what and then uh destination and also going to have a hard-coded width of 260 pixels no matter what and then we also have the flight it's gonna have a width of two or five pixels and then the gates we which is going to have a width of 135 pixels and then I think we have one more remarks remarks just gonna have a width of 260 pixels okay so now that just looks a little bit better I believe okay so that's what it looks like I think it's just a little bit spaced out a little bit nicer wonderful so the next thing I want to do is just add a flip animation so we've already added the class of flip to each of these divs that hold a letter each of our word so now let's get the class dot for class of flip and I'm going to add an animation to it so the animation is going to last for 0.5 seconds it's going to be a linear animation linear and the animation we're going to call flipping so we have to call it this and now it means flipping we have to define it so I'm just going to say that a zero percent uh I'm going to transform it so that it rotates on the X oops rotate X it's going to start at zero degrees and then we're going to do 50 it's going to be 90 degrees on the X axis and then at 100 it's going to go back to zero great so that this means if I now refresh this the flipping however I want it to look more like you know it's going which means we need to put on a set timeout so I'm going to show you how to do that now so when we add the class of flip for each letter so for each of these I want this one to start first and then after a certain amount of time this one so basically create essentially let's see if I want this one to be at 100 milliseconds then this one to be at 200 milliseconds and this one to start at 300 and then sort of 400 milliseconds or just however many letters we have right we need a loop for this so in here I'm going to uh we'll put a set timeout to start a kind of loop in a way because this set time out well first off it's gonna go after 100 milliseconds but then I'm going to multiply it by either 0 1 2 3 or 4 whichever index of this we are on whichever index of the loop we are on and this is kind of tricky to do with the four const of but you can do it it's actually why I turn this into an array because you can't do this on an object uh if this is an array we can get the two uh the entries method and use it on here which means we can now add an index to this and we can access the index of the loop okay so that's how I did that that's a little bit of advanced JavaScript hacking I guess I don't know if it's a hack for you so now we've got a set timeout that will uh essentially execute on zero then 100 and then 200 300 milliseconds and all I want to essentially do is add the class of flip after that amount of time and then add the letter and then put it in the cell okay so that's all I am doing I don't know why it's not like what's happening here oh comma great so now maybe let's actually put this all together so it's a little bit easier to read this is my populate table function so now it looks like this so this is looking great really I'm going to show you how to do one more thing just for fun and that is delete the first line and add a new random line with a time that is essentially going up and if it gets close to midnight then that time reset so it looks like it's going on forever and ever and ever without you having to do anything or add new data because we're going to use some under two arrays to either pick out the destination or the remark and this we're going to generate with random letters or numbers and this we're going to increment with time okay so let's do it so const destination like I said this is just for fun right what kind of destinations be we can have Tokyo we can have Frankfurt we can have Dubai we can have London let's also have Oman and let's have Beirut see the desk to Nations and then let's also have remarks so we'll only have three remarks possible uh on time delayed and canceled great and then let's start with the hour being uh 15. just because we're on the 15th hour here last okay so now let's write a function called let's make some space um function Shuffle Up Shuffle Up and what do we want to happen well we're going to get the flights array and we're going to get rid of the first one using the JavaScript method of shift so that will literally get rid of this first item in the array and then to add a new item we're going to get the flights array and we're going to use push I'm going to push in something to the end of the array so what we're going to push in is an object so hence I have this and the destination well let's actually have the same structure as we have here so here's our object and I'm going to push in a time which I'm going to write actually a function called generate time to do this destination well that's just going to be I'm going to go into destinations array I just wrote and pass through so destinations array we're going to open up our array we're going to pass through a random number based on the array length so we can do so easily I can get the destinations length and I can multiply it by math random and that will give me a random number anywhere from 0 to this destinations destiny anyway so just under the length but then I need to sorry yeah just under the so for example if there's nine things right it will come back with 8.9 but of course there's no such thing as index 8.9 we have to round it down to index 8 to get to the ninth item so that's why I need to round it down using math floor just like so the next thing we need to do is um what we can do actually is the same for remarks so go into the remarks and then thank you very much uh get the remarks length multiplied by math random and just pass through math flows around it down and that will return a remark from the remarks all right the next thing we need to do is actually write a function called generate Run Dom letter okay and this is going to generate a random letter for us that will help us write our flight and gate randomly so to generate a random letter I'm going to say well first we need the alphabet right we need to actually choose uh A B C D E F G H I J K L M N M okay so there we go thank you but I'm going to get rid of these we just want capitals so that's my array and I'm just going to return a letter randomly so I'm going to get alphabet uh Char at and then instead of at zero I'm going to pause through once again I'm going to get the alphabet length I'm going to multiply it by math random and I'm going to pass it through math flow so that it returns back a random character from the string okay but only based on you know however long this is you don't want to be picking out something here on the nothing exists right or throughout errors so that's how we generate a random letter which means we can now use it for here so for example Generate random letter and then we're going to generate a random number plus again generate a random number with this space in between so let's just add a space like so and of course we need to write the function generator random number so function Generate random number this time it's going to be exactly the same as we did up here so I'm literally going to copy this but this time we're going to choose zero one two three four five six seven eight nine which means that we're going to return and let's call this numbers we're going to return numbers based on the numbers string let great so that's how we would generate a random number so let's replace this so for a flight we're gonna generate a random letter plus another random letter plus maybe an empty string and then some numbers right so maybe let's have two numbers again it's up to you whatever you want wonderful and now one last one we're going to write a function to generate time this isn't so much random so I've left out the random because we're going to use the current time in order to uh or the current hour in order to make sure that the hours are increasing so I'm going to get the hour well first off I'm gonna use let's display our I'm going to assign the value of hour to it which we have assigned as 15 above here 15 just because we're on the 15th hour here so once we have that if the hour is smaller than 24 well then that's fine we just want to increase one to the hour right and then if our is then suddenly larger than or equal to 24 well then we want the hour to go back to being hour one and then we can show that the display hour is the hour right okay and if our is smaller than well the display hour is gonna we're gonna add a zero to it and the hour because we don't want to be one which wouldn't be zero one or zero two zero or zero nine so that is some logic that we have to do before we can return the display hour plus the string of this and then we can just use Generate random number plus Generate random number uh we don't need this however the second number can only be Max up to 5 right so maybe if we pass through a Max number into the generate number functions So Max number we can say that if a Max number exists well then I'm going to get the numbers I'm going to slice 0 by Max number and make a new array so constant new numbers and that's what I want to return but only if there's a Max number to return this by the new numbers length okay so this is looking good and the shuffle up how often do we want this to happen so we want to get rid of the first one we want to add something else to the array which is going to be our new object um and then we want to essentially redraw the table but the table body we want to clear it right if anything that's in there at the moment otherwise we'll just keep adding more items to it so I'm going to go text content nothing and then I'm going to call it populate table function again so now let's put this on a set interval because I want the shuffle ARP to run I'm going to shuffle up to run every 200 sorry 2 000 milliseconds or every two seconds so let's check it out so there's one two and one should disappear uh we're getting some errors Max number oops this should be new numbers sorry new numbers because we just made a new array okay so and mine should disappear London appears beirut's been generated frankfurt's been generated London's been generated and you will see the time is going up by the hour let's just check it goes up to well and just as long as it stays under 24 we're fine okay so it's actually stopping at 23 I mean I'm cool with that maybe that makes our lives easier and this number's not going above five either I wonder if it can be five or if we need to change that because five should technically be allowed I don't see a problem with that we've had an error here already okay so this is looking good however we just need to maybe make this smaller than and then Max number slice it at Max number plus one just so it includes the five and let's check it out so now should see it you should see fives showing up in here five there's a five and it should go up to 23 but not go over oh no this is going above 24. okay it's smaller than or equal to equal to 24. and great so it's resetting let's just leave it as this I'm happy with that again this is just for fun remember so I hope you're enjoying this you can have have your very own I'm just going to slow this down a little bit as it is very fast you can have your own departures table just like so okay great so I hope you've enjoyed this tutorial um please feel free to mess around with this as much as you like uh take it it's yours and if you want to see how to incorporate actual data not just made up data that we're generating randomly then please do watch my tutorial on this in the description below thanks very much and I'll see you on my channel okay so let's do this let's start off on the rapid API Hub where I'm gonna get my flight API so please go ahead and sign up as I've already signed up I'm going to log in and I can do so with my Google account so that's what I'm just going to do I'm just going to go ahead and log in with Google of course you don't have to that is just my choice now the first thing you're gonna have to do is do a little bit of configuration which I've done but I'm gonna walk you through it in order to use the API and that API that we're going to use there's actually loads of flight apis there's in fact just so many apis in general but the one that we're going to use is of a specific airport we can use we could do Madrid's airport to find out what kind of arrivals and destinations they have or we can do Toronto so it's totally up to you for this tutorial though I am going to go with Toronto's Airport and this is cool like with every API on rapid API I'm just going to show you it here you get a little dashboard like this and you get the code so you get the code required in order to for example here I can search an endpoint we're going to want to get the departures by get all departures so if I click on get all departures from Pearson Airport this is the code that I would need to put in my node.js backend in order to get the departure details and if we want to see the example response without signing up we could just see what this will come back as you can see it comes back as an array of objects and each object represents a departure okay with the terminal the gate the time is departing the airline flight number destination and status as well so this is what it would look like if I ran this code and the best thing about this is that you know we can just use one API key one API key to control them all in the rapid API Hub so that is pretty cool oh so I'm going to show you how to essentially subscribe to this you're going to have to put in some details like your billing details and so on now most of these apis are free some will charge you but this will only charge you charges you if you go over 5 000 requests per day I think which we're not going to go over don't worry so just go ahead and under my apps you'll go to the developer dashboard and here is where you're going to have to put in your billing information so under billing information you'll see I've already done this please go ahead and add that here add your billing information save it and then we can go back to the API of course you can do a bunch of other things in here too you can also make your own API but we're not going to do that once you put in your billing information please go back to the Toronto Pearson API and we're just going to test the endpoint so as we said the endpoint we want is to get all departures and then this is the code we're going to need with one API that controls them all so that is my X rapid API key I'm going to test the endpoint uh and great so that is what we're getting back these are the current departures at Pearson Airport which is pretty cool now I'm just going to actually take this code snippet there is of course all these other languages but we are using node.js for this tutorial so I'm just going to copy this so first off we need to actually create a project so let's go ahead and do that what I'm going to do is get up my webstorm please feel free to use whatever code edits you wish webstorm is just my choice of code editor or technically IDE that I'm going to use for this tutorial now in here what I'm going to do is just create a new project so this is going to have let's have the front end just in plain or the vanilla JavaScript because I have made this project before in plain old vanilla JavaScript and in this one I'm going to show you how to essentially make a backend for it in order to get data from Rapid API so I'm going to go ahead and create a new project let's call this flight with jet live and let's just go ahead and click create and that will be created in my webstorm directory okay where I store all my other projects please feel free to create a directory whatever directory you wish so once that is done we're just gonna have to create some new files so we know that we're going to have an HTML file I'm going to call this index.html so there we go we also need a style sheet I'm going to call this Styles and I'm going to you can either write CSS but in webstorm I can just say that this is CSS file and that extension will be added for me and finally we also need some JavaScript so let's go ahead and put in a Javascript file so we've got an index HTML style sheet and app.js file great now let's go ahead and put in some code into the index HTML page to get started so let's just go ahead and put in the title for this fast so there we go flight widget so we're going to have to do a few things here we're going to link this up so we're going to use the link tag and we're just going to put this means a little bigger so everyone can see Style sheet and then we are going to add the href to the Styles CSS file okay it's in the root so that's all we have to do next let's also put the script tag in so we're going to put a script tag in so that we can essentially connect this app.js file to here so we're going to read everything above the body blue and then we're going to read this which will take us to the app.js file and then read all the JavaScript so the first thing we're going to do is actually create our table this can be static I'm not going to be changing anything with JavaScript here which is why I'm just going to make it in the HTML file it's actually just style this out a little bit more so just have the correct indentations so yep okay so now in this div this div I'm just going to give this a class of Departures as it's going to hold all our departures and we're going to make a table now so let's use table and then in our table well of course we're going to have a table head so this is going to give semantic meaning to our browsers that this is the table head and then this is the table body and in the table head I'm going to well yes we can actually hard code this it's the table body that we're going to want to insert stuff into with JavaScript so how do we make a header get well we need a row so let's create a row and in the row we're going to have table header elements and we're going to have to have uh five for the time destination flight gate and remarks but then also one spare one because I want to put in like a little icon on the left so of a little airplane so we're gonna have to leave space for that so let's make five sorry six in total that is one two three four five six so the first one is going to be blank this one is going to be time this one is going to be destination flight and then we have the gates and then we also have the remarks okay so there we go and perhaps let's give these an ID so we can pick them out later in our styling okay oops that you should be ID time this one is ID destination this one's gonna be ID of flight and then of course we have the well you guessed it gauge and the remarks for saying like if it's delayed or canceled and and so on so that's our header and like we said we're going to inject stuff into the body using JavaScript so we could just pick out the t-body tag or you know you really should pick it up by the ID so I'm going to give this the ID of table body wonderful and then also let's give this a header so we're going to use the H1 tag for this and let's put departures so heading sorry I've got a heading there we go so at the moment if we open this up so I can use this shortcut right here to open it up for me thank you so much webstorm that's what you'll see and if we inspect the page get about console logs and if we inspect the page maybe just make this smaller you will see that in the body we have a div we made with the classic departures you've got H1 element and then we've got a table with the table head and the table body so basically everything we've just added great now before we get to the JavaScript just going to start this up do some very basic styling so that we have a little bit uh more of a visual to work with essentially so let's carry on so if you do know how to open that and you're using vs code perhaps all you'd have to do is right click on here copy the path so the absolute path and then in here you just paste that okay so I could do that in word sum too great so now let's do some styling right let's do it here's my style sheet and the first thing that I'm going to do is just say that everything I'm going to give this the font family of uh Ubuntu which we're gonna have to get from the Google fonts uh webpage Ubuntu something that's a little bit bigger condensed and then as a backup let's just have Suns serif why not so now if I go to Google fonts to search for Ubuntu condense that's the one we want let's go ahead and add it so I'm gonna actually just pick how many of these okay let's put the 400 oh there's only 400. great so we can do it two ways we can put it in our HTML but I'm going to choose to put it in our CSS using this so using import so just go ahead and copy that and then back in webstorm just gonna paste it in like so I'm just going to minimize this you can see a little better great so this is looking good and if I now open this up in here and refresh that font will be applied so now let's well let's carry on styling so what else I'm gonna do so we want every the font to be applied to everything and the dock and we want the font to be white so I can just write white or let's make it like an off-white because white is a bit too jarring for me and let's make the font size 35 pixels okay so that's going to be applies everything now and now in the body well the body I just want to Center the actual div with the closet display so I'm going to give the whole body display Flex justify content Center so that will Center it uh in the middle of the page but you also want to center it from the top to bottom so to do this I'm actually gonna have to assign a height otherwise that will not work I'm just going to give it the uh height of my viewport and then we use align items Center okay so without giving it a height this would not work and this would not work and this would not work without a display Flex got it good so you need all for to Center something in the pitch and now let's also give this a background color I'm going to go with RGB this is a color that I picked out previously from the previous tutorial where we just did this in JavaScript with no API great so now if we once again just have a look and refresh the page amazing so you will now see that this the departures the div with the class departures it's centered in the page and the styling's been applied as well great so let's carry on so we've done the body now let's actually also just give some padding to the H1 element so I'm just going to do padding 10. pixels just like so and let's grab the div with the class of departures so dot is for class name and I'm just going to give it a background color that's a bit darker right because we're essentially trying to create something that looks like a board visually so that's what I'm doing and then it's just round off the corners using border radius I'm going to use 10 pixels for that and also give it a padding to space everything out from the everything that we're going to be putting inside of this of this great so there we go and now if I want to say that the table that lives inside the departures the devil class departures I mean it's unlikely we're going to put another table in on the uh document but you know just if if you didn't know how to do that I'm picking out the element of table that lives inside the element with the classes departures okay and only this site and this side will only be applied to that element that lives inside the div with the class of departures so let's give this a background color of a little bit lighter now I'm going to go 46 46 46. and let's make sure that all the text is aligned left because at the moment it's centered so if we have a look at what this looks like now there we go so our departures do our div of the class of Departures this color and then our table is this kind of lighter gray cool let's carry on what else do we need to style well I'm actually going to say actually this should be fine for now let's carry on so in my app now I said that I want to start injecting stuff into my uh my my table essentially from JavaScript so that's what I'm gonna do so once again we're going to use this API so again these are example responses we're going to get the destination the status the departing time the gate I'm essentially going to feed it into here okay as table rows okay I'm also going to make them do this cool flipping animation if you saw my previous video on this where we make this in pure JavaScript so let's do it to do this fast I'm just going to build a mini backend so in my file structure you'll see I just have three files however I think it might be nice to now put these three files in a folder called client so we can separate out from the back end I'm just going to drag these three in here like so so they are all now in the folder called client and we're going to make another folder or we don't have to you can make another folder for the server but as we're just having one file I'm not going to I'm just going to call the file server.js okay so that shouldn't be in here that should be on the same level as the folder client so there we go server client and it lives in the flight widget live project great so here is where we're going to be writing our backend however we need to do a few things you need to have node installed okay because we're going to have to use node and we're also going to have to use npm so if you haven't please go ahead and visit here so install node and just select which one you need for me it will be the Mac OS installer so you're going to have to do that and then also we're going to have to install npm so that we can use it and store packages okay so here we go npmg install npm this is for installing it globally okay so just go ahead and do that I'm going to show you how so you just do that I mean that's it or if you're using uh vs code you might want to get your terminal up your terminal looks like this okay and it doesn't matter where you do it because it's Global so just go ahead and do that great now that we've done that once again I'm just going to show you how to do this uh in your terminals so you would go into wherever you stored this project so for me it's with some projects and then I go into flight widget live and then you're gonna have to do npm in it okay so run that I'm not going to do it here I'm actually going to do it in here so I would just do npm in it making sure that I'm in the flight widget live and hit enter and then I'm just going to go through these and hit enter okay the package name correct version one correct description I'm going to need blank entry point blank or savage.js sorry it says come on blank everything is just the default and then is this okay yes and that will generate a package Json file for me you're gonna watch it happen I'm gonna wait for that to happen and there we go so you'll see this file show up and this is what's in it we're gonna have to add some packages in here as well as well as a script to start our back end but first off let's go ahead and install the packages that we need they're Express that will help us get uh roots uh with our routing so to get uh certain things as well as listen out to the port we're also going to need axios in order to make the requests we're going to need cores we're going to need dot EnV in order to hide our uh rapid API Keys safely so we don't upload it onto GitHub or anything like that and we're also going to need nodemon to listen out to changes on the backend so please go ahead and install that using npmi or npm install and hit enter okay and that should populate in here with the versions that we're using for this tutorial so if you're watching this in the future something doesn't work it could be down to the version you are using so just remember that okay so there we are that's when populated with the versions you know you can just change these if you need to and then just run npmi again after saving that file but of course I'm not going to do that because this is the versions I'm using and 0.6 probably doesn't exist yet right cool so those are the packages now let's write the code for our server so the first thing that we're going to actually need to get is the packages but first off no sorry we need to define the port so I'm going to define the port as running on Port 8000 on my local computer now let's start off actually with getting the code that we need right so this is the code we need in order to get this response so again I'm literally just going to copy all of this I'm going to take it looks super easy I'm just going to paste it in here okay so that is the code that we are going to need in order to get the flight data from Pearson's Airport so we're gonna have to wrap this in a uh get root so to do that let's use express or const Express equals require the package express okay and once we have that we actually need to call the Express to release all of its wonderfulness and save it something else I'm going to choose to save it as app so we can actually use it uh an app use will also allow us if I do app use allow us to use course or not block by course we're going to call cores but of course we also need to install cause so require s if you don't know much about cores I do go into it in a few tutorials so I'm not going to go into it now but just know that if you get a message saying block I call us it's probably because you haven't done this and then of course we need the dot in V package in order to hide our rapid API key great I think that's it uh axios course we'll just I'm just going to move this up here actually and add default great so yeah wonderful let's carry on now just to check everything's running I'm going to do app Listen to listen out for changes on to listen out to the port so I'm just going to pass through the port number and then write console log running on port and then the port number okay I'm actually going to put that at the bottom and now we're going to wrap this in an app get so this is something this is Express routing and if we visit localhost 8000 forward slash flight so we're defining this ourselves we could have just left it as you know localhost 8000 if we wanted to but I think it's more readable to give it an actual path and then we get the request and response and then I'm literally is going to take all of this all of that code that we copied from Rapid API and just put in here okay so that is what it looks like now let's also make a DOT EnV file on the same level as the server so just in the root of my project a file dot EnV so that we can hide our rapid API keys I'm just going to go ahead and Define it here rapid API key and then I'm just going to grab this paste in here we don't need to say it's a string that's kind of implied and now that means I can use process e and V and go into the EnV file so and then get the rapid API key okay so I'm just going into that file great so we're console logging the response data we also want to actually show it in the browser so to do this I'm going to do res Json and just pass through the response data as well wonderful now let's write a script so we can run this right so I'm going to say that if we write npm run start oh I feel like that's already been added for us did we do that I don't think so so that's quite cool however I'm going to do node and one so it continuously listens out to changes okay so note of on node will just listen out once because no demand will continuously listen after changes on the server.js file great so now like I said if I run npm run start this should it's running on Port 8000 this also means that if I now visit localhost 8000 forward slash flights you will see all the Destiny or the departure flights for Pearson Airport and there's a lot so this is looking cool I'm just gonna say I want the first six however and we could do this on the server and it's probably better to do on the server right so I'm just going to dot slice the first I think that's fine great so that's our super simple backhand look we can even like just put it all in might even all fit nearly it nearly all fits uh that's our super simple back end okay now we need to get this data and bring it to the front end so I'm going to show you how to do that so back to here now the first thing I'm going to do is just pick out this element by the ID so we can start injecting the flights into it so I'm going to Define it as table body and I'm going to use document get elements not animations get element by Adi table body and now I'm actually going to write let's just do it in a function because I think it makes it more readable um you can write function I'm going to use a function expression though so there's my get flight and I'm going to use fetch to fetch literally this URLs of course our backend needs to be running for this to work we're going to get this and we're just going to fetch all of that Json so this means we need to do some chaining right so once we once that promise returns then we're going to get the response response from response Jason and then whatever comes back as the Json we're going to save this as I'm going to save as flights I'm choosing to call it flights and I'm actually going to for now just console log flights so we can see what's going on but we're going to pass this into a function right because we need these to resolve before this happens hence I'm going to pass it into a function but I'll show you that later on and then we're going to catch any errors so catch error console log cool so now if I of course call this and then we go in here to our flight widget refresh and we move this didn't we we move this into client there we go so if I look in the console log now we have to wait a bit ta-da okay so that took a while and that could be problematic so this is again I'll show you this later but it's problematic but we'll get over this right I'm going to show you how to uh essentially make stuff happen once this is resolved and once we get the data back so this is what we are working with okay of course the object doesn't really come back in the exact same shape as we would ideally like like we did for the plain JavaScript tutorial where we made our own object but don't worry we can use this data to create our own objects too in the format that we want but essentially we've got all the information here so this is looking great so what I'm going to do now is get all of this data and pass it into a function to populate the table okay because once again if we just for example if I just wrote a function here populate table then we wouldn't have the data and it would read the function populate table without the data okay and then nothing would work so again I'm just going to write if I um function expression for this you can just write function if you wish but this is what I have chosen to do so here we go here's my function populate table and what I'm going to do is I'm just going to pass through the flights into it which means that here once this is all this is resolved then I want to pass flights into populate table and call this function okay so let's get rid of this console log cool and what do I want to happen well for each flight so for each flight I'm gonna say that each object I just named flight of flights so once again I'm just going to show you because we have an array right it's an array of objects so I've essentially called each object a flight now so each object so the the whole array is flights each object is called flight so for each object in the array essentially this is saying what do I want to do well I want to create a document create element and I want to create a table row so let's save this as table right and what else do I want to do I actually want to create a table icon too so as I said I want a little icon of a um airplane so create element and I'm just going to create I don't want table data because each row takes table datas yeah okay so once again just going to show you here's our table here's a table head we're going to create a table row and then we're going to create table data here is called th but for the body we're going to use TG so we're going to have to create one two three four five six table datas cool so I'm going to create a table icon for the first one uh and so table icon text content I'm going to give it this like I said the airplane just like that and now we're going to essentially get the table icon and put it in the rows we're going to get the table row and use append table icon okay so we'll put the icon in the table row and now we also need to put the table Row in the table body so table body append table row so let's refresh that and wait for it to resolve so there's our first uh row column sorry and we've put in a little airplane in it yay cool however I don't know why there's only one there should have been a lot more let's check it out so I'm just going to console log flights here to see what's going on okay so yes we are getting six items put only one table row is being created why is that it's because we didn't put this I need to wrap that or in here it needs to be in the loop so now there should be more of the little icons there we go so we get six icons now okay because We're looping over for every flight or every item that exists in our array great so now that's working let's continue so now for each flight so for each I guess um object before we put this all in the table row so up here I'm going to redefine my object so I'm going to redefine the flight details so I'm literally going to make an object that is going to take the time a destination the flight the gate and then the remarks okay so essentially we're just kind of trying to get something for these five columns okay and from our data where we can see that we can get the flight departing so the we've called it flight so the object's departing let's use that would probably also slice it down right just so you get the first five characters and then the destination that's just destination the flight is the flight number and the gate is gate and remarks's Status so let's see if we can remember that flight departing again because we've called this object flight up here flight oh my gosh what was this flight details it's like number wasn't it flight number this was flight gate and this was flight status and then we said we wanted to party and we wanted to just want to get the first five characters so there we go and let's make this to uppercase and this also to uppercases or capital and this was in an array so I'm guessing there's going to be more than one but we just want one so I'm just going to return the first value from that erasing the shift method cool and now so we've redefined our new object let's now use that object to essentially create a table data cell for each of the items so I'm going to do so again so const I'm going to call it flight detail so each flight detail that exists in this object in the flight details object and for each item that exists I'm going to create a table data cell so document create element TD I'm going to save this as table cell and now I'm going to essentially so whatever these words are I don't really want I want them because I want each little each word to be separated our owner create an array from it so that we can create little flipping boards I'm going to get the word and create an array from it like I said so array from and then we're going to look in the flight details object and look for something by the flight detail okay so essentially I'm just creating little arrays so that we can now create little cards for them so const um we're gonna have to have the index this time so index and then the letter for each of the cards of the word entries okay uh so great so now that we've got each word split out into an array so we can create Little Boxes for them I'm going to create a box for them so document create element active and let's call this a letter element great so of course now we have that we need to put that letter element into the table cell so let's get the table cell and append the letter element and we also need to so after still in this for Loop we also need to grab the table row and append the table so okay so of course we won't really be able to see The Styling on this now but I'm just going to show you what this looks like I'm trying not to make as many cores because it's obviously taking time to make the call and we don't want to go over the certain amount either so hmm we've created the table data and for each letter we've created a div so that's looking good we just need to actually put the letter in so let's actually get the letter element and use text content to add the letter okay so for each word entry I'm just gonna do that great and maybe let's style up the div a little bit so in here in the departures table any div that lives inside of it I'm going to give it a border that is solid 4 pixels RGB okay so I'm just making little cards and let's also give it a background color of black but let's make it RGB to rgb000 and then Min width of the card is going to be 20 pixels and the height is going to be 40 pixels and I'm going to make everything float left okay so once again let's check it out fresh and let's wait the apis do the same recording the API so there we I go this is looking good as you can see what we have done is go each word we spit out onto an array within each item in the array we made each letter go into a little card that we created or a div to be precise so this is looking cool the last thing I'm going to do is just add a flip thing so that we get it everything flips over so let's go ahead and do that so to do this I'm actually going to put adding the letter in a set timeout so set timeout and then just put in a callback function and then this set timeout this is why I need the index because if I did 100 then all the letters would flip after 100 milliseconds but if I'm in multiply this by an index the first one will flip over at zero the second one will flip over 100 milliseconds the third one will flip over 300 milliseconds and so on so that is how you would do it and then I just want to show the letter okay so it's going to be like one after the other I'm also actually going to get the letter element and assign it a class which we're going to make so class list add this is how you add a class using JavaScript and that class is going to be called flip and actually also yeah I actually want to let's put in that letter element in here too so it actually gets put in at the same time I think that would work better cool so now in here let's write the flip class so I'm just going to do T flip and when the div is applied this class I'm going to animate it so I'm going to use animation uh 0.5 seconds linear and then we're gonna have to write the animation which I've called flipping so keyframes flippings what we called it and I'm just going to transform it to rotate X zero degrees and then I'm actually just going to copy this because we're just going to change a few things so then at 50 it's going to rotate X 90 and then back to zero at 100. great so I'm pretty sure that's it is it not liking that oh well okay so now let's check it out we should probably hard code this table a little bit as well so that doesn't look like this any point in time and ta-da that is looking so cool so yes let's do a few final styling things and that is just gonna hard code some of these elements I'm going to say that the div with the ID of time or sorry the element I'm going to say that the element with the easy of time so whatever holds our headings always going to have a width of 160 pixels then the element with the ID of destination is going to have a width of 700 pixels and flight is going to have 205 pixels gate is going to have a width of 135 pixels and finally remarks it's gonna have a width of 260 pixels okay so now the width will not change it looked like this one is empty and then whoosh so that is looking cool you can of course hard code the height as well that part is totally up to you great so thanks very much I hope you've enjoyed this lesson and how to take a simple JavaScript project and populate it using an API thanks so much for watching and I'll see you again soon so let's do it let's get up our code editors so I am using webstorm so I'm just going to spin up a react up fast by clicking on react right here and then this means I can just call this whatever I want I'm going to call this reacts flight with jet just like so and it's going to use the command npx create react app to spin up a react app for me along with all of its boilerplate code so I'm just going to go ahead and click create and let that do its thing okay so that's going to spin up all the files and directories for me if you're not using webstorm and you'd like to just use the terminal to do this just go ahead and select a directory of your choice so for example I could use development and then I'd use the command npx create react app and then I call the project whatever I wish but as you know I'm not doing this way I'm using webstorm which is kind of doing all of that for me okay so we're just going to wait until all the files and directories get populated in my project at the moment there is a package Json and that's it there's going to be a lot more so while that's doing its thing let's head over to data Stacks which is going to be the database management system I am using for this project I'm using it because it's free and I use it in most of my projects so I'm pretty used to it so I'm just going to go ahead and sign in go ahead and sign up if you haven't already and once you have signed up you'll be taken to the data Stacks Astra dashboard just like so and as you can see here I have many databases already I'm going to go ahead and create a new one so I'm going to go ahead and click here and that will take me to this dashboard where I'm going to call my data boost something well I'm just going to call it let's call this the flight widget projects and the key space name for this I'm going to choose to call this flights just like so okay great so that is what I've chosen to call my key space next I'm going to choose a region I'm going to choose the closest one to me which at the moment I forgot where I am I'm in London so I'm going to go ahead and choose Europe West Europe and create a database okay great and now while our app is spinning up this should be created it will show you the token and secret client please go ahead and save that I'm going to show you mine because I'm going to be deleting this anyway by the time this tutorial comes out so this is what you should look like just copy that and keep it somewhere safe okay so go ahead and save it somewhere I'm going to save mine on notes and wonderful so now we can go to the database that data will be needed to communicate with your database later on so now that we are here we can see our key space called Flights but we have to wait as our status is initializing so we can't use this quite yet so while that's doing its thing let's go and check on our project so back in here you will see that in my directory called reaction like widget we will see all these files and directories okay so that's been generated for us let's just get rid of that for now I'm actually going to get rid of a lot of these as we don't need them so I'm going to delete these three okay I'm just going to really scale it back delete these three files delete anyway and then I'm going to delete the test file as we're not going to be doing any tests in this project and then the delete the app CSS file was as we're just going to be storing all our CSS in one place okay which means that now in the nxjs file I can get rid of this as we're not reporting with vitals so get rid of the input for it let's just make this a little bit bigger and then we can keep all of these I'm just going to get rid of these semicolons and great so that is what your index.js file should look like and a stripped down version next let's have a look at the app.js file so once again let's just change a few things I'm not going to be using semicolons and I'm just going to get rid of all of this okay all of this in the return so we can start fresh and I'm going to change this to a function expression just because I prefer working with them great and for now I'm just going to return an empty element we don't need to import the app CSS file as I said we will be doing all our CSS in one file so that is the content of my app.js file that is the content of my index.js file and this is the content of my index CSS file which again I'm just going to delete so we can start fresh great everything else just leave as it is so now that we have done that the first thing I'm actually going to do is just create a server so at the moment this is all in my directory called react flight widget and we have the source directory right here I'm just going to make a new file in the root of my project so new files it's going to be a JavaScript file go to server Js and here's essentially where all my backend code is going to go okay so just one file I call it server just to make it really clear that this is our backend and all of this is going to be our front end okay so everything in here and they're going to share a package Json file great so what are we going to do here well we are going to have to communicate with our database in this file so to do this I'm going to have to define a port I'm going to say I want it to run on Port 8000 we're also going to have to get axios so const axios equals require the package axios okay so that is something that I'm going to have to install we're also going to get the package express so require Express and the package cores so that we can get rid of those Pax key cause messages which I will show you and then we're going to also need the dot EnV package so that we can read information from a DOT DNB file in which we're going to store our API key so I hope you already know what all these packages are as I'm not going to go too much into them the axios package is essentially going to help us make get requests because we're going to get the data from our database and express is what's going to help us do the routing okay cause as I said is going to help us when we see the pesky cause message which I will show you later and the dot EMV file as I said is going to help us get information from the dot EMV file that we will create to store API key so let's go ahead and install all of these so just make sure that you're in the right directory which I am and I'm going to use the command npmi for install to install the axios package the Express package the course package and the dot EnV package just like so I'm also going to install the nodeive on which will help us listen out to constant changes on the server.js file so just go ahead and install this so hit enter and let that do its thing okay and great so now if we look in the package.json file you will see those packages right here okay so there we go if you are doing this in the future and something doesn't work it could be down to the package you are using so just make sure to change the package and then run npmi to reinstall all those packages again after you save the file however we're not going to do that now so let's just put it back to the packages that we installed so these are the latest ones right now in time okay so let's carry on it's going to zoom in a little bit for you to see now we're going to also have to add another script because at the moment we have a script to start you know the just the reacts app I'm going to write another script which I'm going to call start back end so that's how we're going to call this script so sort of back end and I'm going to change this to front and actually and here I'm going to listen out to changes on the server JS file and to listen up constantly the changes I'm going to use node in one which I just installed okay so that will listen out to constant changes on my server.js file great so I'm not going to run this yet let's just get rid of that for now let's carry on writing our code for here so first off I'm going to actually get everything that Express comes with and release all of its magic wonderfulness and to do this well I've stored it under the cons Express which means if I grab Express now and call it all of that will be released so everything that comes with the Express package so to use that I'm actually going to save it as another const called app which means that now I can use app and use any methods that come with Express and one of those is listen and that's going to help us listen out to the port okay and it's going to listen up to the port and it's going to consult log out running on ports and then we're just going to grab the port name okay so that now if I do npm Run start back and and hit enter you will see running on Port 8000 you know I make any changes here and save obviously that won't work because that has um that's not code it's common that out it will rerun okay so that's constantly listening out for changes great now let's check what our database is doing so as you will see here it is it is online this is great so this is looking good we can now use it so what I'm going to do is add data into this manually and that's going to be our flight widget data so we're pretending we're an airline essentially okay I'll come in here's my Airline data of course realistically the database would hold data that someone is constantly updating but we're just going to put it in once and leave it okay because it's for the project but you should know how to do this so I'm going to show you how so here is our database I'm going to connect and there's many ways you can connect however this time I'm just going to use the document API and I'm going to use the Swagger UI documents to help me visualize this okay so all I've done is click on here and let's launch the Swagger UI now we've created a key space now first off with key spaces we need to create a collection that will hold all our data so let's go ahead and do that I'm going to create a new collection in a keyspace name and try it out now this has been Auto populated for us so thanks very much data stacks and the key space otherwise known as Name ID in here as we know is called flight as that's what we called it and the collection that we're going to create you can call it whatever we wish I'm going to choose to call it departures okay so that's going to be our flights departures so my collection is called departures and now if I execute this you will see that that has worked we get a 201 response so great that's looking good we've made a collection now let's put stuff into our collection so what I'm going to do is create a new document this time and try this out the keyspace name otherwise known as the name ID in here the name space ID is called Flights and the collection is called departures as we just made it and in here well I'm going to go ahead and just create an object that's going to represent one departure now I've already pre-made this for us so we don't have to sit here all day writing them out so this is what my object is going to look like okay as you can see here we have the stasis I'm delayed for this flight the destination is Halifax Canada the flight number is y9521 and it's departing at 4 P.M and we've also got the gate number okay so there we go that's what one object is going to look like and now if I execute this ta-da we got a 2-1 response that object essentially has been put into my departures collection and that is its document ID if we ever need to pick it up by document 18. I'm just going to go ahead and put in some more okay so once again I have pre-made these just to make our lives a little bit easier so there's another flight I'm just going to execute that and let that do its thing and that has been put in because we can see the document ID in the response body let's put in another one okay so this flight is on time because the other two have been delayed I'm just going to put in a few more to check that one has worked and it has this is a canceled flight to Oman I'm going to execute that and then we have one more and it's to crack off Poland Okay so there we go great and we're just going to execute that and wonderful so now if we search all the documents in a collection let's try this out the key space name is flights otherwise known as the namespace name and Swagger The Collection is called departures and I'm just going to get back everything okay we could limit how many items we want to get back but I don't want to do that I just want everything and wonderful so there we go okay at the moment it's just returning three however if I view this so if I actually get this URL okay this one right here that's essentially what we created by entering all these details that is the URL and this is what we're also going to have to pass through with that accept application Json and the Cassandra token so that's what essentially what we're going to recreate in our back end so let's get up our web store now I'm going to use app again which holds all of our Express wonderfulness and I'm going to use the get method let's move this a little bit bigger and we don't need that and what I'm going to do is get and I'm going to define a root I'm going to say that if we visit localhost 8004 slash flights then we want to essentially see the data from our database so this is the Syntax for doing a get request in Express and then I'm going to have to essentially get pass through some options okay so the options are what we saw the method is going to be get even though I don't think we need to specify that if we're doing it up here so let's not worry about that the URL for this is going to be the URL that I stole from Swagger which we can hide as well but I'm just going to keep it like this for now and then the headers well the headers are gonna be these two Okay so we've got accept application Json and then we're also going to have let's make it like this X Cassandra token you can sort of spelled it exactly the same way as it's spelled here and we're going to use our own token that we saved so there we go that's my one that we saw earlier and now under the headers and under the option so that's our options all of that I'm going to use axios which is the package that we installed up here to request options then get the response and once we get that response Well for now I'm just going to consort log the response data but we also want to see in the browser and for that I need to use res Json and pass through the response data like so and then of course we're going to catch any errors so catch error just like so I'm just going to console log the error okay great so I think that should be it that is a whole piece of code so now if we look and localhost 8000 forward slash flights we get that data showing up so we can use it now if we wanted to limit or say that you know we want to get all six then I can actually say that I want six I can really hard code it to only get six backs I'm going to do page size six and then you'll see all six of those flights so let's go ahead and add that to the URL right here okay great now at this point I'm actually going to create a DOT dnv file so new file dot EnV so we can store all of this as this is kind of sensitive even the URL is sensitive right so I'm going to essentially get this whole URL all of it including the page size or we can actually leave the page size maybe let's leave it let's just get this URL and save it here and I'm going to say this is URL just like so okay we don't need to put strings as it's implied that it's a string then save this and I'm also going to get the token and save this token right here so that it's hidden from when we push this up to GitHub and so on so let's get all of that and paste it in here like so okay so there's my URL it ends in forward slash departures and there's my Cassandra took great so now to access these we can simply just use process EnV and then token okay process in V is essentially a way for us to access anything in the dot DMV file and token is what we called our token and we can do the same for the URL here in fact I'm going to use back text because I'm going to pass the URL in like this so process e and V URL and then I'm going to also attach this string at the end just so it's visible to whoever's looking at this in case they're wondering why all their details are coming back is because we capped it at six great so amazing we've essentially finished our back end how painless was that so now that we have that let's get to using all of this data that we have here by building out a front end so let's do it so to do this I'm going to actually get out my terminal again and create a new tab and run the command npm Run start front end this time making sure to spell it correctly and making sure that you're in the correct directory and hit enter so that will spin up our front end okay right here should have nothing in it because I deleted everything in it so it should just be a blank page okay and it is great so that is working well I think we are done with the day space for now so I'm just going to get rid of that and great now the first thing we want to do I'm actually going to get rid of the seven two uh and let's just go up let's have a think about the components that are going to make up this app well we're of course going to have a table we're also going to have the table body as well as the table header and the table body is going to hold all our flight details and the table header is going to hold information about the column names we're also going to have table rows that make up our table body okay as they can easily be components as they are reusable as well as table cells which will make up each cell that holds the names of things in our table okay so let's go ahead and start doing that now so all I'm going to do is create a new directory called components this time components and in here I'm actually going to use this as a template I'm going to create a new file it's going to be a Javascript file and it's going to be for our table and I'm going to store this as a table jsx file okay and then just paste it like so and I'm just going to change this to the table export default table great in fact we should probably change this to a jsx file as well as it includes jsx so let's just go ahead and rename this app jsx and this one as well rename index.jsx great so we've got our table next we're going to have a table body so new file table OD Dot jsx and then I'm just going to add body here and here Okay so we've got table body now we're also going to have table head so new file table head Dot jsx add that file table head and table head now we're also going to have a table row right so new file table row Dot jsx let's put don't ask again and then this is going to be change to table row I'm not forgetting to changing but here at the bottom two and one more and that's going to be a table cell so table cell Dot jsx and change this to table cell and change this to table cell 2. great so let's just get rid of these at the moment okay so what I know is that I'm going to have a div here and this div I essentially want to hold all of my departures information together which means I want to put in the table along with a header that says departures okay so I'm going to put in a header element and it's just going to say it departures like so perhaps let's make a capital to make it consistent with the previous ones that I made and I'm also going to use the table component now okay that I have made so just like that which means you need to import it in here so import table from and then I'm going to go into the components and I'm going to grab the table component just like so so at the moment this won't really do much okay I'm gonna actually start this up I'm going to give this the class name of Departures just so we can Center the departures header and the table okay so let's go ahead and do that I'm going to grab this and then the dot CSS file I'm going to grab the class of departures so dot for class name and I'm just going to give this a background color so we can see a little bit of what's going on and I'm just going to make it this dark gray I'm going to give it a border radius to soften it up of 10 pixels and I'm also going to give it some padding space it out from the header and the table and then I'm also going to give it a box Shadow which I've pre-made before so it's going to have this dark gray color with a 0.25 Alpha for opacity and I want it to be zero on the x-axis 13 pixels on the y-axis 27 pixels blur and 5 pixels spread okay and then I'm going to Overlay with another one whoops there we go and that's rgba this time is black with 0.3 opacity I'm just going to put this on another line maybe and zero pixels x-axis 8 pixels y-axis 16 pixels and minus eight pixels spread great we don't need the p x and the zero as it's redundant so we've done that and now if we look in the browser oops maybe we should have just kept that as it is unless we can change something in the package Json maybe that's I think we're just over complicating it maybe let's try it really around this so npm Run start front end and there we go okay so that's fine we just had to rerun it as we renamed this file to a jsx file okay so now you will see the div with the class name of Departures if I inspect this you will see that in the root okay so there we go there's a different class departures and in its got a header which says departures and it should have the table component but at the moment that's returning nothing so that's all we'll see let's go ahead and change the font as well so actually what I'm also going to do is say that also all the fonts that I'm going to use are going to have the color of an off-white so RGB 240 240 240 just like so I'm going to use the font family of Ubuntu condensed which I'm actually going to get from Google fonts API so condensed and then as a backup we're going to have Suns serif and Ariel okay great I'm also going to make the font size for everything 35 pixels so now if we look in here there we go we get the departures let's go ahead and also get the Google font API so we can install Ubuntu so here we go fonts Ubuntu and we're just going to select the regular one and then we're just going to import it so I'm just going to grab this like so and paste it in okay so there we go we've just imported the Ubuntu condense and we can now use it in the font family so great there we go you will see that font has changed wonderful let's carry on so now that we have that I'm also going to Center the departures so what I'm going to do is grab the whole body of my document and use display Flex on it and first of all I'm going to Center everything horizontally and then I'm going to give the body a height of 100 viewport height which will be in the I can now align items on the adjacent accent to this so essentially vertically and I'm going to assign them Center let's also give the body a background color I'm going to choose to give it to this orangey like color just like so okay so there we go we have centered you did with a class of departures great now let's go ahead and work on the table element so I'm going to go ahead and get it up here now the table element isn't really going to have much in it it's just going to say that I want this to be a table right so I've got the table element and then we're going to have to have a table of head right but I'm going to choose to put this in its own component so there we go we've already made the table head component here and we also need the table body because as we said we want the table body to hold all of our data about the flights so let's go ahead and import those two components that we made so import table head from table head and also import table body from table body great and once again that's all we're going to do on the table let's work on the table head first so what do I want the table head to return well I'm going to use the table heads element and it's closing tag to create a table head and inside of here I'm going to have to create a table row so there's our table row note that it's separate to the table row we have here because this one's specifically for the body the table head is going to have a table row which is going to contain a table header with the first one being empty and the second one is going to be a column title of time the next one we're going to have destination so it's going to be the column head of our destination column destination next we're going to have a column ahead for our flights then we're gonna have one for the gates and then finally we're going to happen for remarks okay and marks and I'm going to actually pick each one of these out by its ID because I'm going to give it a custom sizing so that one's going to be time this one I'm going to give it the ID of destination oh no no yes destination let's give this one the ID of well you guessed it light this one the ID of eight and this one the ID of remarks okay so at the moment this will just like this but as I said I want to space them all out a little bit so perhaps let's go ahead and do that now so first off maybe let's also just give this some padding so let's pick out the header I'm just going to go ahead and do that pick up the header and give it a padding of 10 pixels just to space it out from everything else and now in the departures the table itself that we created I want that to be a different background color actually I want to be this lighter gray that I picked out earlier and I want all the text to align to the left so let's have a look at what that looks like at the moment there we go you will see this is my table okay you will see it's got a lighter gray background now let's actually get to picking out all of the column name so we're going to get the flight and I'm going to hard coat the width of this column to be 160 pixels next we're going to get the destination and I'm also going to hard code this to have a width of 700 pixels this time then we're going to get the time in fact this one the first one's time isn't it the second one is flight and this is going to have a width of 205 pixels then we have the gate this is going to be a short one so grab the gate ID and then just give it a width of 135 pixels and then remarks it's going to have a width of 260. fixes okay so that should have spaced them all out a little bit great so I believe we are done with the table header let's move on to the table body next and populating it with our data so let's go back to here I'm going to get rid of this we're done with this for now and let's get the table body so the table body well we already know that this should return the T body element because that is how we make tables so tea body and what we're going to have to do is map stuff onto table rows so this is the ideal place for us to essentially get the data from our backend so that's what we're going to do and for this we're going to have to import use State and use effect from react okay because we're going to essentially get the data so let's actually write a function for this called get flights just like so and I'm going to use fetch from JavaScript in order to fetch data from here so I'm just going to grab this URL it really is that simple and I'm going to paste it like so and then I'm going to do some chaining so once we get the response response I want to get it's Json then I'm gonna get the let's call it flight slot data flights and I'm going to set flights so let's go ahead and use const light set flights use state and start off with the state game no so what this essentially is if you haven't really come across that much react before is I am saying that I want to set the flights with whatever I pass through into here which is going to be flights okay because the flights are whatever's coming back from our Jason so essentially all of this is our flights and I'm passing it through into set flights which is then going to pass that onto the variable or the constant of flights okay so that is how to use use State and we're starting off with flights being no so if I console log flights after fetching the data let's see what happens we of course need to catch any errors as well so catch error console log error great so this is looking good however we also need to put this in a used effect so what I'm going to do is put get flights and use effect like so and not pass through any dependencies so let's see what happens now let's go to here and console and there we go we get that Pax key pesky cause messages and block by cause so what I can do is go to my server and use app again so app use password calls and call it okay so that is how you would get rid of this pesky message so let's refresh and great so this is why we have to use use effect because the first time we get the data that's null nothing and the third time we get it the data is there okay so that's all our flight data okay so there's one object with its document ID there's another object with this document ID and so on and so on okay so once again that is why we have the use effect here so that we can keep running this until we get our data right because it came back as null now and then we got it wonderful so now that we have our data let's use it to populate some table rows so let's do it so this is obviously coming back in this format as data so perhaps we can actually get the flights data and see what that looks like so now this is our object our object comes back with lots of other little objects of course so perhaps we need to format this we want this to be an array essentially so let's go ahead and do that so I'm gonna have to get the object values I think and turn them into an array so how would I do this well let's check it out so perhaps let's wrap this an object value so you can get the values okay and there we go so yes all I've done is look at this object and say I don't want the key I want the value instead and stick that in an array for me and that's what happened okay great so now I have an array of five objects wonderful so now that we have flights like I said what I want to do is map them so if flights exist I want to map because as we know at the beginning it returned back now right so if lights exist I want to map that onto so let's get the flight actually we need the index too so the flight and the index because we need a key and I essentially want to map them onto the table row component that we made we're going to have a key for that as that is necessary and we're just going to pass through the flight so each flight okay wonderful so that is all I am doing I'm getting the array and for each item in the array I'm passing it through into the table row element so now let's style the table row element which of course we need to also import into here so let's go ahead and do that import table Row from table row it's going to make it single quotes to make everything consistent wonderful so let's get the table row and here we go so for now if I just console log the flight which we are destructuring okay we've destructured that prop so I'm just going to console log the flight now and look in here we will get each individual flight coming back okay so this is good let's work with that so for each flight well I actually don't need to do much um I need to just well I could just make a table cell and then pass through each item of these each value into a table cell so perhaps no let's do that okay so return back well actually with the table row let's get the table row element this is going to be made up of table data so let's get the table data and we're going to have six of these with the first one actually being this cute little airplane icon that I found so feel free to take that from my code if you wish and then for each of the five remaining table data elements we're going to have to well you guessed it map out each of these okay so this is going to go on one table cell this is going to go on one table cell this is going to go on one table sub so let's import the table cell import table cell from table cell want to get the I guess words I'm going to use object values again to get the values the object values of each flight so just the ones in light green so I'm going to pass through the flight in here and just console log what this looks like so we can see let's have a look okay and great as you'll see an array of all the object values has been made for us so now we can work with this array to map them out onto table cells so let's get the words so words and if words exist I want to map out each word onto the table cell of course we're going to have to have a Q so I'm going to actually add an index to this as well so index the index as a key and in fact I'm just going to put this on another line there we go and the table cell is going to have the key but it's also going to have the word itself right so there we go great so that's what we're passing through okay cool so now on the table cell we're going to de-structure the word and we can just return it I'm going to show you what this looks like if we just return the word of course this needs to be in a table data element and let's have a look at what this looks like it will look like this so This essentially looks good however we want to give it that flip effect right which means we have to take this a step further and for each word I want to split it out by letter okay and then I want to apply a timing effect to it so let's go ahead and do that next so what I'm going to do is well I am going to instead of just putting the word in here I'm going to essentially make an array from the word like so and then I'm going to map each letter so let's get the letter and I'm also going to use the index as a key and what I'm going to do is just maybe get rid of this now is make a div this time and I'm going to give it the class name of well the class name is going to depend because I want to add this class name after X amount of seconds has passed right so and I'm also going to pass through the letter so at the moment if I look in here oops let's just get rid of this for now the letters are coming through let's actually maybe just start this up a little bit so they don't look like this let's get our index CSS and let's grab our departures grab our table that lives inside of that and grab the div so the div that I just created and give each one a border of solid 4 pixels and then the gray color so just like that I'm going to give it a border I'm also going to give each one a background color of black essentially so let's do that by rgb000 I'm also going to give each one amen width of 20 pixels and a height of 40 pixels so each list is the same I'm going to make each one float left as well so now if you look in here that's more like it okay and then let's just make this a little bit smaller for now so there we go there we have our little letters and of course we want to flip them next so let's go ahead and do that for this I'm going to have to write an animation okay so I'm going to create a class so dot class called flip and I'm going to make this an animation so animation and on the last I want the animation to last 0.5 seconds I want it to be smooth so I'm going to add linear and I'm going to define the keyframes of flipping so at Key frames flipping and all I'm going to say is at the beginning of my 0.5 second animation I want to transform rotate on the x-axis start at zero degrees and then 50 through my 0.5 second animation I want to transform and rotate X and I want it to be to 90 degrees and then on 100 I want to transform and just put it back to zero okay guys okay so if I add the class of flip to something essentially kick off this animation so this means that here I essentially want to add the class a flip but add it to each letter after X amount of time has passed and for this I'm going to have to use a set timeout so I'm actually going to import use state for this so we can save the flip state for each of the letters so import use state from react and I'm going to say const flip set flip and then we're going to start off with the flip being false for each div okay none of the divs have the classic flip however I'm going to use set timeout Now set time out and I want this to set timeout to occur after 100 milliseconds multiply by whatever index we are looping over for each word okay which means that we need to go back into the table row and actually pass through the index into here too so the index of each word so index I'm going to actually use the index now so like so so on the table cell I'm going to also pass through the index and we're going to use it to multiply to 100 milliseconds in order to perform this set timeout after different time intervals and what do I want to have in this certain timeout I just want to set flip to be true okay so I'm setting flip to be true by using set flip it starts over being false but then I set it to true so now I can use flip in order to select a class name so I can say that if flip is true I want to add the class of flip otherwise no there's no class name okay I'm actually same for the Lesser same for displaying the letter F lip exists then I want to show the letter otherwise I don't okay I just want to show an empty string or we can just put it down great so if we have a look now what this looks like ta-da wonderful so that is how it looks we are essentially flipping out each word we can of course take this a step further and actually flip out each letter so shall we do that yeah let's go ahead so instead of just creating this div here I'm going to pass it through into another component so let's go ahead and create a new file uh let's call this letter table letter just to keep everything consistent jsx so now let's do const table letter just like so and Export default table letter okay table letter and we know we already need to pass through some things and we're going to return well we can actually just return this right so I'm going to get one of this and put this as the return of the table letter and then also this set timeout doesn't want we don't want it to happen here so let's grab all of that and put it in here which also means we need to import use state which has been done for us great so now we just need to map onto the table letter just like so and for each word we're going to pass through the letter as well as the index right so we're going to use the index we're also going to have to give this a key so I'm just going to put this on a new line so it's well readable and of course we're gonna have to get up some parenthesis and let's just put in a key for good measure and that'll be the index which actually means we don't need to pass this through into the table cell anymore from the table row so let's get rid of that here and let's get rid of that here I'm just going to do that again okay because we're not using it so now on the table letter is where the flipping happens so that means that on the table cell we're passing through the letter and the index let's also go ahead and import table letter here from table letter and on the table letter we're going to pause with the word and the index which were they going to use to flip our sorry letter and index yeah the letter and index so which then we're going to use the index to flip each letter which we have passed through into here so now if we save this file there we go now each letter is rotating individually Okay so we've just taken that a stepfather and there we go we have essentially finished our widget okay we've made it in reacts with a database I hope you've enjoyed this lesson and if you found this a little bit difficult please watch my video or make this in pure JavaScript and another video we'll make this in JavaScript using an API so there's three videos for you all different all giving you the same result but with different Frameworks and approaches thanks very much and I'll see you again soonthis course will increase your knowledge of JavaScript node.js apis react databases and more Anya Kubo is your instructor she'll show you how to build the same project using three different methods and this will help you gain a deeper understanding of each method hey everyone and welcome to this compilation video which we're going to build the same three times so we're actually going to go to the flight widget we're going to start off super easy we're going to start off building this and vanilla JavaScript so if you're a beginner this is the perfect one for you okay we're going to build the widget and then we're going to display data onto it onto these flipping little cards right here and get new data every so often next up I'm going to show you how to essentially build this by using an API I'm actually going to build it in JavaScript for the front end and show you how to build a node.js backend in order to get data from the API that we're going to use okay so this one right here this is real data this is the real stuff and finally I'm going to show you how to build the same thing but using react at this time I'm going to show you how to use react for the front end and then a database with our own data to pretending we're at the airport and we're updating this data I'm going to show you how to get that data Again by building a node.js backend and using this free database so you don't need any credit cards or anything like that so I'm excited let's do it okay so let's get to building Australia flight widgets so no apis for this one this is going to be super vanilla JavaScript for those of you learning JavaScript however if you do want to learn how to do it with an API please do check out the link in my description below but we're going to do the same project however using an API so it's either project for whatever level you feel comfortable with let's do it so first off I am using web store so this means I can just open up my wet storm and create a new project and I'm just going to choose to call this flight with jet vanilla JavaScript and then click create okay so there we go you will see a directory has been created for me and all I'm going to do is create a new file an HTML file which can be an index HTML file just choose HTML5 right here or if you're not using website you might need to type.html to give your file the HTML extension so that your code editor knows to treat it like an HTML file so there we go there's my HTML file with the boilerplate thank you or webstorm and I'm just going to call this flight widget just like so the next thing we need to do is create an app.js file and a style sheet so Styles CSS once again I'm just going to choose to select the dot CSS file so if you haven't got a web store make sure to put dot CSS to make sure that your code editor treats this as a CSS file and once again I'm just going to create a JavaScript file and call this app and once again make sure to have the dot JS extension if you are not using webstorm okay great so now first things first let's go ahead and connect our style sheet using the link tag it's a self-closing tag and all I'm going to do is make sure that this is going to the path of where we keep our Star sheet as it's in the root of our project along with our index.html file so the same location I could just type in the file name like so we don't need to go into any directories or anything like that and once again I'm going to use the script tag like this and use Source in order to get our app.js files so again the same way that we went and got our CSS file we're just typing in the file name as it's in the same level it's in the same directory so we don't need to go finding it in different folders it's just there so we use the file name great now this is a JavaScript tutorial so we're going to be writing very limited HTML on purpose for this so the only HTML I'm really going to have is a div that's going to I'm going to give this the class of departures so that we can see it and we can style it up a little bit and I'm actually going to have let's just have a header why not like so and then I'm going to have a table now my table well I'm going to hard code the head of the table so if you haven't used tables before you have the table tags that take another tag called T head for the header and then T body these are optional I like to keep my header and my body of the table separate especially for this tutorial it will really help us out a lot this is because I'm going to give the tea body an ID of table body so that we can pick this out and then inject table rows into here using JavaScript so like I said I'm going to hard code the header the table header but this is all going to have injected JavaScript I'm going to show you how to do that it's really exciting let's do it so here is the Syntax for a uh table you have the table row so you have two table row tags like that and then the table row is going to well as this is the table uh header I'm going to use th but these will have TD so the first table header is going to say time and then I'm actually going to pick this out as well so I'm going to give this the idea of time because we're going to want to give this some custom styling later as well as other things this is going to be destination destination and then we have th I'm gonna have flight then we're also going to have the Gate of the flight and then it's also have the remarks so once again let's give all of these an ID so this will be Destination Unknown Known destination then we're gonna have ID of flights and I'm gonna have ID of Gates and this one's going to be ID of remarks okay so that's hard-coded and all of this we're going to be injecting with JavaScript so let's go ahead and do that by picking out this table body element by the ID so in here I'm going to use document get element by ID and look for the table body just like so okay so once we have that I'm gonna actually save it as const table body so that we can work with it easier in our JavaScript and just get rid of that great so the first thing first as we are just you know this is just for fun I'm just going to use an array of data for this so uh let flights I'm using let for a reason which will become more apparent later as this we will want to change this so each of my flights is essentially going to be represented by an object and that is going to have a time so here is my first flights going off at 8 11 A.M its destination is going to be uh a month the flight number is going to be ox 203 the gate number is going to be a01 and the remarks is going to be that it's on time okay so that is one I'm not gonna uh just sit here allow you to watch me type these out I have pre-made this so here are all my flights we have Oman we've got a flight to London that's been canceled Dubai Frankfurt and Tokyo okay so those are my flights I have or I will be putting the code in the description of this video if you want to take that or if you want to you know take this video and just pause it while you write this down it's totally up to you whichever version you prefer but yes I will be sharing the final code with you in the description below okay so those are all our flights this is what we're going to be using in order to create our flight widget so in order to populate our widget with this information I'm going to write a function called populate table just like so and we're going to be using uh for Loops to do this and I'm going to say that four so obviously this is called Flights I want to Loop for as many flights as we have so again this is one flight this is one flight we have one two three four five there's gonna look five times and we can do so with this syntax so flights is the name of our array const flight of flight so we've now defined that one of these is a flight and all I'm going to do is for each flight I'm going to use document to create an element and that element is going to be a table row so once we have done that let's actually save this as const table row great so as it stands for each of these we have created a table row so just like we see here a table Row the next thing we need to do is actually create a table or a TD to hold all of this information so for each one of these lines we need to create a TD element right so let's do that document create element TD and I'm going to save this as const so let's do that so we've done that and the next thing we need to do well actually let's put this in to our table body first so I'm going to get the table body and use append to append the table row into our table bodies so each time this Loop is going to go into the tail what do you put in a table row put in a table row do that five times okay so that is being put in however before we put that in we want to create the five uh TD elements so let's make another loop for this for this time we're going to look in here so we're going to look in the flight look in the flight because we're working with objects this time I'm going to get the flight details so we are saying let's define each of these lines or sorry to be more precise each of these as a flight detail okay so all I'm going to do now is use document create element TD and then const table cell that's what I'm going to call it so we're creating a table cell and now what we want to do is essentially well we can I'm just going to console log for you what this looks like console log the flight detail and of course we need to call this function so it's looking here I can just use this button because we are using webstorm or for those of you not using webstorm you just need to get the absolute pass I'm going to copy the path at the absolute path and then in the browser I'm just going to paste it in like so it's the same thing and now if we inspect the page you will see here's our body there's the div that we made called departures there's our hard-coded header and there's the body and we have injected five table rows as we said okay five table rows and the next thing we said we want to do is put in the table data right and that table data based on the flight details so as you will see here the flight details that are just the essentially the keys we want the values so flight gate remarks so if I was just to use the flight detail for example if I get the table sell in a text flight detail and then of course we need to actually get the table set and put it in the table row so table row append child or pen whichever one you want table cell it would just look like this we don't want that we actually want to get the value so we do so by doing by getting the objects and then opening up the array and finding it based on the flight detail so we're looking in here I'm going our destination and that will return the value just do this instead okay so that will give us the actual flight details cool you think this is pretty much well wrong because this is at the moment just all one word I don't want that I actually want to split out each letter so that we can flip each one and I want to put each one onto a div essentially so that's the next thing that we are going to do so to do this I essentially need to make an array of all the uh letters so instead of doing this here let's get the word and I'm going to use array from this essentially so we don't need this anymore so we're getting the word but obviously the words all like split up into an array it's an array of all the letters and now for each letter so again we're going to use four const a letter of word this time um we're going to create an element and it's going to be a div however yeah that's fine we're going to create a div and then let's save this as letter element so we've got our letter element and then we're going to just get the letter element uh classless ads we're going to add the class of flip and then the letter element text content is just going to be letter right so now if we look in here we of course need to put that in because we haven't done that yet we're gonna get the table sell append letter element go so it looks like this it looks a bit like Matrix so let's do some styling so what do or we want to do so let's go to Starship up now I'm going to use a Google font for this the font is uh condensed Ubuntu so I'm just going to get rid of that Ubuntu Ubuntu sorry Ubuntu kubuntu condensed and I'm just gonna select well there's actually one so it's easy I'm going to use this version to import it into the style sheet directly not into my HTML but you can of course choose to do whatever you wish now for all everything in here I'm going to choose the font family Ubuntu so this one and as a backup Sans serif so I'm just going to paste that in here like so I'm going to say that all the text I want to be like an off-white so I'm going to do that now and the font size is going to be font size sorry it's going to be 35 pixels okay and then the body of the whole app itself well I just want to Center everything so I'm going to use display Flex so I'm initializing the flexbox and then I'm justifying content Center so you can't use this line without initializing flexbox just be aware of that I'm going to give a height to the body because I then also want to align items Center and you can't do this without giving it a height so just keep that in mind and let's make the background color um I'm gonna do two five one one nine nine one two seven great and now the header we did have a header so I'm just going to give that some padding of 10 pixels and then we also named the div that holds everything we gave it the class so dot for class of Departures right so dot class of departures and I'm gonna give this a background color of RGB 666 and let's round it off because I do like a border radius to make it seem kind of like softer I guess border radius 10 pixels and then padding 10 pixels and then we could add some box Shadow later but I'm not going to do that now let's also get the departures uh and say that any table that exists in the div with the class of Departures is going to have a background color of RGB 46 46 46. and I'm going to do text align left so let's see what this looks like so far Okay so we've done that we just need to go into the TD and make sure that everything's kind of aligned next to each other as well so I think that's because of the T or it could be done on the div okay so I'm gonna say that any TD element that lives in the table that also lives in the div with a class of Departures dot for class is going to have a border Solid 4 pixels RGB so this is each cell right and let's give it a background color of black actually we should be doing this on the divs themselves so on each of this div I want to make sure that each div is kind of like a black it has a little border Square so obviously that looks really weird at the moment and this should be black sorry let's make it black and let's make them all float left okay there we go so that's a lot better that is looking so so good I'm also going to actually assign this a height just in case you know there isn't something there I don't want it to kind of look weird so I'm just going to hard code that there and I'm also going to do the same for the actual uh whole cell that this lives in so a TD so like one of these TD cell right so let's hardcore that too so every TD is going to have a height of 50 pixels no matter what cool so great and now one last thing I'm going to do is actually pick out so in here I'm going to pick each of these out by its ID and then just space them out a little bit more because I think they're a little bit too loose together so the hash is for ID so ID of time is going to have a hard-coded width of 160 pixels no matter what and then uh destination and also going to have a hard-coded width of 260 pixels no matter what and then we also have the flight it's gonna have a width of two or five pixels and then the gates we which is going to have a width of 135 pixels and then I think we have one more remarks remarks just gonna have a width of 260 pixels okay so now that just looks a little bit better I believe okay so that's what it looks like I think it's just a little bit spaced out a little bit nicer wonderful so the next thing I want to do is just add a flip animation so we've already added the class of flip to each of these divs that hold a letter each of our word so now let's get the class dot for class of flip and I'm going to add an animation to it so the animation is going to last for 0.5 seconds it's going to be a linear animation linear and the animation we're going to call flipping so we have to call it this and now it means flipping we have to define it so I'm just going to say that a zero percent uh I'm going to transform it so that it rotates on the X oops rotate X it's going to start at zero degrees and then we're going to do 50 it's going to be 90 degrees on the X axis and then at 100 it's going to go back to zero great so that this means if I now refresh this the flipping however I want it to look more like you know it's going which means we need to put on a set timeout so I'm going to show you how to do that now so when we add the class of flip for each letter so for each of these I want this one to start first and then after a certain amount of time this one so basically create essentially let's see if I want this one to be at 100 milliseconds then this one to be at 200 milliseconds and this one to start at 300 and then sort of 400 milliseconds or just however many letters we have right we need a loop for this so in here I'm going to uh we'll put a set timeout to start a kind of loop in a way because this set time out well first off it's gonna go after 100 milliseconds but then I'm going to multiply it by either 0 1 2 3 or 4 whichever index of this we are on whichever index of the loop we are on and this is kind of tricky to do with the four const of but you can do it it's actually why I turn this into an array because you can't do this on an object uh if this is an array we can get the two uh the entries method and use it on here which means we can now add an index to this and we can access the index of the loop okay so that's how I did that that's a little bit of advanced JavaScript hacking I guess I don't know if it's a hack for you so now we've got a set timeout that will uh essentially execute on zero then 100 and then 200 300 milliseconds and all I want to essentially do is add the class of flip after that amount of time and then add the letter and then put it in the cell okay so that's all I am doing I don't know why it's not like what's happening here oh comma great so now maybe let's actually put this all together so it's a little bit easier to read this is my populate table function so now it looks like this so this is looking great really I'm going to show you how to do one more thing just for fun and that is delete the first line and add a new random line with a time that is essentially going up and if it gets close to midnight then that time reset so it looks like it's going on forever and ever and ever without you having to do anything or add new data because we're going to use some under two arrays to either pick out the destination or the remark and this we're going to generate with random letters or numbers and this we're going to increment with time okay so let's do it so const destination like I said this is just for fun right what kind of destinations be we can have Tokyo we can have Frankfurt we can have Dubai we can have London let's also have Oman and let's have Beirut see the desk to Nations and then let's also have remarks so we'll only have three remarks possible uh on time delayed and canceled great and then let's start with the hour being uh 15. just because we're on the 15th hour here last okay so now let's write a function called let's make some space um function Shuffle Up Shuffle Up and what do we want to happen well we're going to get the flights array and we're going to get rid of the first one using the JavaScript method of shift so that will literally get rid of this first item in the array and then to add a new item we're going to get the flights array and we're going to use push I'm going to push in something to the end of the array so what we're going to push in is an object so hence I have this and the destination well let's actually have the same structure as we have here so here's our object and I'm going to push in a time which I'm going to write actually a function called generate time to do this destination well that's just going to be I'm going to go into destinations array I just wrote and pass through so destinations array we're going to open up our array we're going to pass through a random number based on the array length so we can do so easily I can get the destinations length and I can multiply it by math random and that will give me a random number anywhere from 0 to this destinations destiny anyway so just under the length but then I need to sorry yeah just under the so for example if there's nine things right it will come back with 8.9 but of course there's no such thing as index 8.9 we have to round it down to index 8 to get to the ninth item so that's why I need to round it down using math floor just like so the next thing we need to do is um what we can do actually is the same for remarks so go into the remarks and then thank you very much uh get the remarks length multiplied by math random and just pass through math flows around it down and that will return a remark from the remarks all right the next thing we need to do is actually write a function called generate Run Dom letter okay and this is going to generate a random letter for us that will help us write our flight and gate randomly so to generate a random letter I'm going to say well first we need the alphabet right we need to actually choose uh A B C D E F G H I J K L M N M okay so there we go thank you but I'm going to get rid of these we just want capitals so that's my array and I'm just going to return a letter randomly so I'm going to get alphabet uh Char at and then instead of at zero I'm going to pause through once again I'm going to get the alphabet length I'm going to multiply it by math random and I'm going to pass it through math flow so that it returns back a random character from the string okay but only based on you know however long this is you don't want to be picking out something here on the nothing exists right or throughout errors so that's how we generate a random letter which means we can now use it for here so for example Generate random letter and then we're going to generate a random number plus again generate a random number with this space in between so let's just add a space like so and of course we need to write the function generator random number so function Generate random number this time it's going to be exactly the same as we did up here so I'm literally going to copy this but this time we're going to choose zero one two three four five six seven eight nine which means that we're going to return and let's call this numbers we're going to return numbers based on the numbers string let great so that's how we would generate a random number so let's replace this so for a flight we're gonna generate a random letter plus another random letter plus maybe an empty string and then some numbers right so maybe let's have two numbers again it's up to you whatever you want wonderful and now one last one we're going to write a function to generate time this isn't so much random so I've left out the random because we're going to use the current time in order to uh or the current hour in order to make sure that the hours are increasing so I'm going to get the hour well first off I'm gonna use let's display our I'm going to assign the value of hour to it which we have assigned as 15 above here 15 just because we're on the 15th hour here so once we have that if the hour is smaller than 24 well then that's fine we just want to increase one to the hour right and then if our is then suddenly larger than or equal to 24 well then we want the hour to go back to being hour one and then we can show that the display hour is the hour right okay and if our is smaller than well the display hour is gonna we're gonna add a zero to it and the hour because we don't want to be one which wouldn't be zero one or zero two zero or zero nine so that is some logic that we have to do before we can return the display hour plus the string of this and then we can just use Generate random number plus Generate random number uh we don't need this however the second number can only be Max up to 5 right so maybe if we pass through a Max number into the generate number functions So Max number we can say that if a Max number exists well then I'm going to get the numbers I'm going to slice 0 by Max number and make a new array so constant new numbers and that's what I want to return but only if there's a Max number to return this by the new numbers length okay so this is looking good and the shuffle up how often do we want this to happen so we want to get rid of the first one we want to add something else to the array which is going to be our new object um and then we want to essentially redraw the table but the table body we want to clear it right if anything that's in there at the moment otherwise we'll just keep adding more items to it so I'm going to go text content nothing and then I'm going to call it populate table function again so now let's put this on a set interval because I want the shuffle ARP to run I'm going to shuffle up to run every 200 sorry 2 000 milliseconds or every two seconds so let's check it out so there's one two and one should disappear uh we're getting some errors Max number oops this should be new numbers sorry new numbers because we just made a new array okay so and mine should disappear London appears beirut's been generated frankfurt's been generated London's been generated and you will see the time is going up by the hour let's just check it goes up to well and just as long as it stays under 24 we're fine okay so it's actually stopping at 23 I mean I'm cool with that maybe that makes our lives easier and this number's not going above five either I wonder if it can be five or if we need to change that because five should technically be allowed I don't see a problem with that we've had an error here already okay so this is looking good however we just need to maybe make this smaller than and then Max number slice it at Max number plus one just so it includes the five and let's check it out so now should see it you should see fives showing up in here five there's a five and it should go up to 23 but not go over oh no this is going above 24. okay it's smaller than or equal to equal to 24. and great so it's resetting let's just leave it as this I'm happy with that again this is just for fun remember so I hope you're enjoying this you can have have your very own I'm just going to slow this down a little bit as it is very fast you can have your own departures table just like so okay great so I hope you've enjoyed this tutorial um please feel free to mess around with this as much as you like uh take it it's yours and if you want to see how to incorporate actual data not just made up data that we're generating randomly then please do watch my tutorial on this in the description below thanks very much and I'll see you on my channel okay so let's do this let's start off on the rapid API Hub where I'm gonna get my flight API so please go ahead and sign up as I've already signed up I'm going to log in and I can do so with my Google account so that's what I'm just going to do I'm just going to go ahead and log in with Google of course you don't have to that is just my choice now the first thing you're gonna have to do is do a little bit of configuration which I've done but I'm gonna walk you through it in order to use the API and that API that we're going to use there's actually loads of flight apis there's in fact just so many apis in general but the one that we're going to use is of a specific airport we can use we could do Madrid's airport to find out what kind of arrivals and destinations they have or we can do Toronto so it's totally up to you for this tutorial though I am going to go with Toronto's Airport and this is cool like with every API on rapid API I'm just going to show you it here you get a little dashboard like this and you get the code so you get the code required in order to for example here I can search an endpoint we're going to want to get the departures by get all departures so if I click on get all departures from Pearson Airport this is the code that I would need to put in my node.js backend in order to get the departure details and if we want to see the example response without signing up we could just see what this will come back as you can see it comes back as an array of objects and each object represents a departure okay with the terminal the gate the time is departing the airline flight number destination and status as well so this is what it would look like if I ran this code and the best thing about this is that you know we can just use one API key one API key to control them all in the rapid API Hub so that is pretty cool oh so I'm going to show you how to essentially subscribe to this you're going to have to put in some details like your billing details and so on now most of these apis are free some will charge you but this will only charge you charges you if you go over 5 000 requests per day I think which we're not going to go over don't worry so just go ahead and under my apps you'll go to the developer dashboard and here is where you're going to have to put in your billing information so under billing information you'll see I've already done this please go ahead and add that here add your billing information save it and then we can go back to the API of course you can do a bunch of other things in here too you can also make your own API but we're not going to do that once you put in your billing information please go back to the Toronto Pearson API and we're just going to test the endpoint so as we said the endpoint we want is to get all departures and then this is the code we're going to need with one API that controls them all so that is my X rapid API key I'm going to test the endpoint uh and great so that is what we're getting back these are the current departures at Pearson Airport which is pretty cool now I'm just going to actually take this code snippet there is of course all these other languages but we are using node.js for this tutorial so I'm just going to copy this so first off we need to actually create a project so let's go ahead and do that what I'm going to do is get up my webstorm please feel free to use whatever code edits you wish webstorm is just my choice of code editor or technically IDE that I'm going to use for this tutorial now in here what I'm going to do is just create a new project so this is going to have let's have the front end just in plain or the vanilla JavaScript because I have made this project before in plain old vanilla JavaScript and in this one I'm going to show you how to essentially make a backend for it in order to get data from Rapid API so I'm going to go ahead and create a new project let's call this flight with jet live and let's just go ahead and click create and that will be created in my webstorm directory okay where I store all my other projects please feel free to create a directory whatever directory you wish so once that is done we're just gonna have to create some new files so we know that we're going to have an HTML file I'm going to call this index.html so there we go we also need a style sheet I'm going to call this Styles and I'm going to you can either write CSS but in webstorm I can just say that this is CSS file and that extension will be added for me and finally we also need some JavaScript so let's go ahead and put in a Javascript file so we've got an index HTML style sheet and app.js file great now let's go ahead and put in some code into the index HTML page to get started so let's just go ahead and put in the title for this fast so there we go flight widget so we're going to have to do a few things here we're going to link this up so we're going to use the link tag and we're just going to put this means a little bigger so everyone can see Style sheet and then we are going to add the href to the Styles CSS file okay it's in the root so that's all we have to do next let's also put the script tag in so we're going to put a script tag in so that we can essentially connect this app.js file to here so we're going to read everything above the body blue and then we're going to read this which will take us to the app.js file and then read all the JavaScript so the first thing we're going to do is actually create our table this can be static I'm not going to be changing anything with JavaScript here which is why I'm just going to make it in the HTML file it's actually just style this out a little bit more so just have the correct indentations so yep okay so now in this div this div I'm just going to give this a class of Departures as it's going to hold all our departures and we're going to make a table now so let's use table and then in our table well of course we're going to have a table head so this is going to give semantic meaning to our browsers that this is the table head and then this is the table body and in the table head I'm going to well yes we can actually hard code this it's the table body that we're going to want to insert stuff into with JavaScript so how do we make a header get well we need a row so let's create a row and in the row we're going to have table header elements and we're going to have to have uh five for the time destination flight gate and remarks but then also one spare one because I want to put in like a little icon on the left so of a little airplane so we're gonna have to leave space for that so let's make five sorry six in total that is one two three four five six so the first one is going to be blank this one is going to be time this one is going to be destination flight and then we have the gates and then we also have the remarks okay so there we go and perhaps let's give these an ID so we can pick them out later in our styling okay oops that you should be ID time this one is ID destination this one's gonna be ID of flight and then of course we have the well you guessed it gauge and the remarks for saying like if it's delayed or canceled and and so on so that's our header and like we said we're going to inject stuff into the body using JavaScript so we could just pick out the t-body tag or you know you really should pick it up by the ID so I'm going to give this the ID of table body wonderful and then also let's give this a header so we're going to use the H1 tag for this and let's put departures so heading sorry I've got a heading there we go so at the moment if we open this up so I can use this shortcut right here to open it up for me thank you so much webstorm that's what you'll see and if we inspect the page get about console logs and if we inspect the page maybe just make this smaller you will see that in the body we have a div we made with the classic departures you've got H1 element and then we've got a table with the table head and the table body so basically everything we've just added great now before we get to the JavaScript just going to start this up do some very basic styling so that we have a little bit uh more of a visual to work with essentially so let's carry on so if you do know how to open that and you're using vs code perhaps all you'd have to do is right click on here copy the path so the absolute path and then in here you just paste that okay so I could do that in word sum too great so now let's do some styling right let's do it here's my style sheet and the first thing that I'm going to do is just say that everything I'm going to give this the font family of uh Ubuntu which we're gonna have to get from the Google fonts uh webpage Ubuntu something that's a little bit bigger condensed and then as a backup let's just have Suns serif why not so now if I go to Google fonts to search for Ubuntu condense that's the one we want let's go ahead and add it so I'm gonna actually just pick how many of these okay let's put the 400 oh there's only 400. great so we can do it two ways we can put it in our HTML but I'm going to choose to put it in our CSS using this so using import so just go ahead and copy that and then back in webstorm just gonna paste it in like so I'm just going to minimize this you can see a little better great so this is looking good and if I now open this up in here and refresh that font will be applied so now let's well let's carry on styling so what else I'm gonna do so we want every the font to be applied to everything and the dock and we want the font to be white so I can just write white or let's make it like an off-white because white is a bit too jarring for me and let's make the font size 35 pixels okay so that's going to be applies everything now and now in the body well the body I just want to Center the actual div with the closet display so I'm going to give the whole body display Flex justify content Center so that will Center it uh in the middle of the page but you also want to center it from the top to bottom so to do this I'm actually gonna have to assign a height otherwise that will not work I'm just going to give it the uh height of my viewport and then we use align items Center okay so without giving it a height this would not work and this would not work and this would not work without a display Flex got it good so you need all for to Center something in the pitch and now let's also give this a background color I'm going to go with RGB this is a color that I picked out previously from the previous tutorial where we just did this in JavaScript with no API great so now if we once again just have a look and refresh the page amazing so you will now see that this the departures the div with the class departures it's centered in the page and the styling's been applied as well great so let's carry on so we've done the body now let's actually also just give some padding to the H1 element so I'm just going to do padding 10. pixels just like so and let's grab the div with the class of departures so dot is for class name and I'm just going to give it a background color that's a bit darker right because we're essentially trying to create something that looks like a board visually so that's what I'm doing and then it's just round off the corners using border radius I'm going to use 10 pixels for that and also give it a padding to space everything out from the everything that we're going to be putting inside of this of this great so there we go and now if I want to say that the table that lives inside the departures the devil class departures I mean it's unlikely we're going to put another table in on the uh document but you know just if if you didn't know how to do that I'm picking out the element of table that lives inside the element with the classes departures okay and only this site and this side will only be applied to that element that lives inside the div with the class of departures so let's give this a background color of a little bit lighter now I'm going to go 46 46 46. and let's make sure that all the text is aligned left because at the moment it's centered so if we have a look at what this looks like now there we go so our departures do our div of the class of Departures this color and then our table is this kind of lighter gray cool let's carry on what else do we need to style well I'm actually going to say actually this should be fine for now let's carry on so in my app now I said that I want to start injecting stuff into my uh my my table essentially from JavaScript so that's what I'm gonna do so once again we're going to use this API so again these are example responses we're going to get the destination the status the departing time the gate I'm essentially going to feed it into here okay as table rows okay I'm also going to make them do this cool flipping animation if you saw my previous video on this where we make this in pure JavaScript so let's do it to do this fast I'm just going to build a mini backend so in my file structure you'll see I just have three files however I think it might be nice to now put these three files in a folder called client so we can separate out from the back end I'm just going to drag these three in here like so so they are all now in the folder called client and we're going to make another folder or we don't have to you can make another folder for the server but as we're just having one file I'm not going to I'm just going to call the file server.js okay so that shouldn't be in here that should be on the same level as the folder client so there we go server client and it lives in the flight widget live project great so here is where we're going to be writing our backend however we need to do a few things you need to have node installed okay because we're going to have to use node and we're also going to have to use npm so if you haven't please go ahead and visit here so install node and just select which one you need for me it will be the Mac OS installer so you're going to have to do that and then also we're going to have to install npm so that we can use it and store packages okay so here we go npmg install npm this is for installing it globally okay so just go ahead and do that I'm going to show you how so you just do that I mean that's it or if you're using uh vs code you might want to get your terminal up your terminal looks like this okay and it doesn't matter where you do it because it's Global so just go ahead and do that great now that we've done that once again I'm just going to show you how to do this uh in your terminals so you would go into wherever you stored this project so for me it's with some projects and then I go into flight widget live and then you're gonna have to do npm in it okay so run that I'm not going to do it here I'm actually going to do it in here so I would just do npm in it making sure that I'm in the flight widget live and hit enter and then I'm just going to go through these and hit enter okay the package name correct version one correct description I'm going to need blank entry point blank or savage.js sorry it says come on blank everything is just the default and then is this okay yes and that will generate a package Json file for me you're gonna watch it happen I'm gonna wait for that to happen and there we go so you'll see this file show up and this is what's in it we're gonna have to add some packages in here as well as well as a script to start our back end but first off let's go ahead and install the packages that we need they're Express that will help us get uh roots uh with our routing so to get uh certain things as well as listen out to the port we're also going to need axios in order to make the requests we're going to need cores we're going to need dot EnV in order to hide our uh rapid API Keys safely so we don't upload it onto GitHub or anything like that and we're also going to need nodemon to listen out to changes on the backend so please go ahead and install that using npmi or npm install and hit enter okay and that should populate in here with the versions that we're using for this tutorial so if you're watching this in the future something doesn't work it could be down to the version you are using so just remember that okay so there we are that's when populated with the versions you know you can just change these if you need to and then just run npmi again after saving that file but of course I'm not going to do that because this is the versions I'm using and 0.6 probably doesn't exist yet right cool so those are the packages now let's write the code for our server so the first thing that we're going to actually need to get is the packages but first off no sorry we need to define the port so I'm going to define the port as running on Port 8000 on my local computer now let's start off actually with getting the code that we need right so this is the code we need in order to get this response so again I'm literally just going to copy all of this I'm going to take it looks super easy I'm just going to paste it in here okay so that is the code that we are going to need in order to get the flight data from Pearson's Airport so we're gonna have to wrap this in a uh get root so to do that let's use express or const Express equals require the package express okay and once we have that we actually need to call the Express to release all of its wonderfulness and save it something else I'm going to choose to save it as app so we can actually use it uh an app use will also allow us if I do app use allow us to use course or not block by course we're going to call cores but of course we also need to install cause so require s if you don't know much about cores I do go into it in a few tutorials so I'm not going to go into it now but just know that if you get a message saying block I call us it's probably because you haven't done this and then of course we need the dot in V package in order to hide our rapid API key great I think that's it uh axios course we'll just I'm just going to move this up here actually and add default great so yeah wonderful let's carry on now just to check everything's running I'm going to do app Listen to listen out for changes on to listen out to the port so I'm just going to pass through the port number and then write console log running on port and then the port number okay I'm actually going to put that at the bottom and now we're going to wrap this in an app get so this is something this is Express routing and if we visit localhost 8000 forward slash flight so we're defining this ourselves we could have just left it as you know localhost 8000 if we wanted to but I think it's more readable to give it an actual path and then we get the request and response and then I'm literally is going to take all of this all of that code that we copied from Rapid API and just put in here okay so that is what it looks like now let's also make a DOT EnV file on the same level as the server so just in the root of my project a file dot EnV so that we can hide our rapid API keys I'm just going to go ahead and Define it here rapid API key and then I'm just going to grab this paste in here we don't need to say it's a string that's kind of implied and now that means I can use process e and V and go into the EnV file so and then get the rapid API key okay so I'm just going into that file great so we're console logging the response data we also want to actually show it in the browser so to do this I'm going to do res Json and just pass through the response data as well wonderful now let's write a script so we can run this right so I'm going to say that if we write npm run start oh I feel like that's already been added for us did we do that I don't think so so that's quite cool however I'm going to do node and one so it continuously listens out to changes okay so note of on node will just listen out once because no demand will continuously listen after changes on the server.js file great so now like I said if I run npm run start this should it's running on Port 8000 this also means that if I now visit localhost 8000 forward slash flights you will see all the Destiny or the departure flights for Pearson Airport and there's a lot so this is looking cool I'm just gonna say I want the first six however and we could do this on the server and it's probably better to do on the server right so I'm just going to dot slice the first I think that's fine great so that's our super simple backhand look we can even like just put it all in might even all fit nearly it nearly all fits uh that's our super simple back end okay now we need to get this data and bring it to the front end so I'm going to show you how to do that so back to here now the first thing I'm going to do is just pick out this element by the ID so we can start injecting the flights into it so I'm going to Define it as table body and I'm going to use document get elements not animations get element by Adi table body and now I'm actually going to write let's just do it in a function because I think it makes it more readable um you can write function I'm going to use a function expression though so there's my get flight and I'm going to use fetch to fetch literally this URLs of course our backend needs to be running for this to work we're going to get this and we're just going to fetch all of that Json so this means we need to do some chaining right so once we once that promise returns then we're going to get the response response from response Jason and then whatever comes back as the Json we're going to save this as I'm going to save as flights I'm choosing to call it flights and I'm actually going to for now just console log flights so we can see what's going on but we're going to pass this into a function right because we need these to resolve before this happens hence I'm going to pass it into a function but I'll show you that later on and then we're going to catch any errors so catch error console log cool so now if I of course call this and then we go in here to our flight widget refresh and we move this didn't we we move this into client there we go so if I look in the console log now we have to wait a bit ta-da okay so that took a while and that could be problematic so this is again I'll show you this later but it's problematic but we'll get over this right I'm going to show you how to uh essentially make stuff happen once this is resolved and once we get the data back so this is what we are working with okay of course the object doesn't really come back in the exact same shape as we would ideally like like we did for the plain JavaScript tutorial where we made our own object but don't worry we can use this data to create our own objects too in the format that we want but essentially we've got all the information here so this is looking great so what I'm going to do now is get all of this data and pass it into a function to populate the table okay because once again if we just for example if I just wrote a function here populate table then we wouldn't have the data and it would read the function populate table without the data okay and then nothing would work so again I'm just going to write if I um function expression for this you can just write function if you wish but this is what I have chosen to do so here we go here's my function populate table and what I'm going to do is I'm just going to pass through the flights into it which means that here once this is all this is resolved then I want to pass flights into populate table and call this function okay so let's get rid of this console log cool and what do I want to happen well for each flight so for each flight I'm gonna say that each object I just named flight of flights so once again I'm just going to show you because we have an array right it's an array of objects so I've essentially called each object a flight now so each object so the the whole array is flights each object is called flight so for each object in the array essentially this is saying what do I want to do well I want to create a document create element and I want to create a table row so let's save this as table right and what else do I want to do I actually want to create a table icon too so as I said I want a little icon of a um airplane so create element and I'm just going to create I don't want table data because each row takes table datas yeah okay so once again just going to show you here's our table here's a table head we're going to create a table row and then we're going to create table data here is called th but for the body we're going to use TG so we're going to have to create one two three four five six table datas cool so I'm going to create a table icon for the first one uh and so table icon text content I'm going to give it this like I said the airplane just like that and now we're going to essentially get the table icon and put it in the rows we're going to get the table row and use append table icon okay so we'll put the icon in the table row and now we also need to put the table Row in the table body so table body append table row so let's refresh that and wait for it to resolve so there's our first uh row column sorry and we've put in a little airplane in it yay cool however I don't know why there's only one there should have been a lot more let's check it out so I'm just going to console log flights here to see what's going on okay so yes we are getting six items put only one table row is being created why is that it's because we didn't put this I need to wrap that or in here it needs to be in the loop so now there should be more of the little icons there we go so we get six icons now okay because We're looping over for every flight or every item that exists in our array great so now that's working let's continue so now for each flight so for each I guess um object before we put this all in the table row so up here I'm going to redefine my object so I'm going to redefine the flight details so I'm literally going to make an object that is going to take the time a destination the flight the gate and then the remarks okay so essentially we're just kind of trying to get something for these five columns okay and from our data where we can see that we can get the flight departing so the we've called it flight so the object's departing let's use that would probably also slice it down right just so you get the first five characters and then the destination that's just destination the flight is the flight number and the gate is gate and remarks's Status so let's see if we can remember that flight departing again because we've called this object flight up here flight oh my gosh what was this flight details it's like number wasn't it flight number this was flight gate and this was flight status and then we said we wanted to party and we wanted to just want to get the first five characters so there we go and let's make this to uppercase and this also to uppercases or capital and this was in an array so I'm guessing there's going to be more than one but we just want one so I'm just going to return the first value from that erasing the shift method cool and now so we've redefined our new object let's now use that object to essentially create a table data cell for each of the items so I'm going to do so again so const I'm going to call it flight detail so each flight detail that exists in this object in the flight details object and for each item that exists I'm going to create a table data cell so document create element TD I'm going to save this as table cell and now I'm going to essentially so whatever these words are I don't really want I want them because I want each little each word to be separated our owner create an array from it so that we can create little flipping boards I'm going to get the word and create an array from it like I said so array from and then we're going to look in the flight details object and look for something by the flight detail okay so essentially I'm just creating little arrays so that we can now create little cards for them so const um we're gonna have to have the index this time so index and then the letter for each of the cards of the word entries okay uh so great so now that we've got each word split out into an array so we can create Little Boxes for them I'm going to create a box for them so document create element active and let's call this a letter element great so of course now we have that we need to put that letter element into the table cell so let's get the table cell and append the letter element and we also need to so after still in this for Loop we also need to grab the table row and append the table so okay so of course we won't really be able to see The Styling on this now but I'm just going to show you what this looks like I'm trying not to make as many cores because it's obviously taking time to make the call and we don't want to go over the certain amount either so hmm we've created the table data and for each letter we've created a div so that's looking good we just need to actually put the letter in so let's actually get the letter element and use text content to add the letter okay so for each word entry I'm just gonna do that great and maybe let's style up the div a little bit so in here in the departures table any div that lives inside of it I'm going to give it a border that is solid 4 pixels RGB okay so I'm just making little cards and let's also give it a background color of black but let's make it RGB to rgb000 and then Min width of the card is going to be 20 pixels and the height is going to be 40 pixels and I'm going to make everything float left okay so once again let's check it out fresh and let's wait the apis do the same recording the API so there we I go this is looking good as you can see what we have done is go each word we spit out onto an array within each item in the array we made each letter go into a little card that we created or a div to be precise so this is looking cool the last thing I'm going to do is just add a flip thing so that we get it everything flips over so let's go ahead and do that so to do this I'm actually going to put adding the letter in a set timeout so set timeout and then just put in a callback function and then this set timeout this is why I need the index because if I did 100 then all the letters would flip after 100 milliseconds but if I'm in multiply this by an index the first one will flip over at zero the second one will flip over 100 milliseconds the third one will flip over 300 milliseconds and so on so that is how you would do it and then I just want to show the letter okay so it's going to be like one after the other I'm also actually going to get the letter element and assign it a class which we're going to make so class list add this is how you add a class using JavaScript and that class is going to be called flip and actually also yeah I actually want to let's put in that letter element in here too so it actually gets put in at the same time I think that would work better cool so now in here let's write the flip class so I'm just going to do T flip and when the div is applied this class I'm going to animate it so I'm going to use animation uh 0.5 seconds linear and then we're gonna have to write the animation which I've called flipping so keyframes flippings what we called it and I'm just going to transform it to rotate X zero degrees and then I'm actually just going to copy this because we're just going to change a few things so then at 50 it's going to rotate X 90 and then back to zero at 100. great so I'm pretty sure that's it is it not liking that oh well okay so now let's check it out we should probably hard code this table a little bit as well so that doesn't look like this any point in time and ta-da that is looking so cool so yes let's do a few final styling things and that is just gonna hard code some of these elements I'm going to say that the div with the ID of time or sorry the element I'm going to say that the element with the easy of time so whatever holds our headings always going to have a width of 160 pixels then the element with the ID of destination is going to have a width of 700 pixels and flight is going to have 205 pixels gate is going to have a width of 135 pixels and finally remarks it's gonna have a width of 260 pixels okay so now the width will not change it looked like this one is empty and then whoosh so that is looking cool you can of course hard code the height as well that part is totally up to you great so thanks very much I hope you've enjoyed this lesson and how to take a simple JavaScript project and populate it using an API thanks so much for watching and I'll see you again soon so let's do it let's get up our code editors so I am using webstorm so I'm just going to spin up a react up fast by clicking on react right here and then this means I can just call this whatever I want I'm going to call this reacts flight with jet just like so and it's going to use the command npx create react app to spin up a react app for me along with all of its boilerplate code so I'm just going to go ahead and click create and let that do its thing okay so that's going to spin up all the files and directories for me if you're not using webstorm and you'd like to just use the terminal to do this just go ahead and select a directory of your choice so for example I could use development and then I'd use the command npx create react app and then I call the project whatever I wish but as you know I'm not doing this way I'm using webstorm which is kind of doing all of that for me okay so we're just going to wait until all the files and directories get populated in my project at the moment there is a package Json and that's it there's going to be a lot more so while that's doing its thing let's head over to data Stacks which is going to be the database management system I am using for this project I'm using it because it's free and I use it in most of my projects so I'm pretty used to it so I'm just going to go ahead and sign in go ahead and sign up if you haven't already and once you have signed up you'll be taken to the data Stacks Astra dashboard just like so and as you can see here I have many databases already I'm going to go ahead and create a new one so I'm going to go ahead and click here and that will take me to this dashboard where I'm going to call my data boost something well I'm just going to call it let's call this the flight widget projects and the key space name for this I'm going to choose to call this flights just like so okay great so that is what I've chosen to call my key space next I'm going to choose a region I'm going to choose the closest one to me which at the moment I forgot where I am I'm in London so I'm going to go ahead and choose Europe West Europe and create a database okay great and now while our app is spinning up this should be created it will show you the token and secret client please go ahead and save that I'm going to show you mine because I'm going to be deleting this anyway by the time this tutorial comes out so this is what you should look like just copy that and keep it somewhere safe okay so go ahead and save it somewhere I'm going to save mine on notes and wonderful so now we can go to the database that data will be needed to communicate with your database later on so now that we are here we can see our key space called Flights but we have to wait as our status is initializing so we can't use this quite yet so while that's doing its thing let's go and check on our project so back in here you will see that in my directory called reaction like widget we will see all these files and directories okay so that's been generated for us let's just get rid of that for now I'm actually going to get rid of a lot of these as we don't need them so I'm going to delete these three okay I'm just going to really scale it back delete these three files delete anyway and then I'm going to delete the test file as we're not going to be doing any tests in this project and then the delete the app CSS file was as we're just going to be storing all our CSS in one place okay which means that now in the nxjs file I can get rid of this as we're not reporting with vitals so get rid of the input for it let's just make this a little bit bigger and then we can keep all of these I'm just going to get rid of these semicolons and great so that is what your index.js file should look like and a stripped down version next let's have a look at the app.js file so once again let's just change a few things I'm not going to be using semicolons and I'm just going to get rid of all of this okay all of this in the return so we can start fresh and I'm going to change this to a function expression just because I prefer working with them great and for now I'm just going to return an empty element we don't need to import the app CSS file as I said we will be doing all our CSS in one file so that is the content of my app.js file that is the content of my index.js file and this is the content of my index CSS file which again I'm just going to delete so we can start fresh great everything else just leave as it is so now that we have done that the first thing I'm actually going to do is just create a server so at the moment this is all in my directory called react flight widget and we have the source directory right here I'm just going to make a new file in the root of my project so new files it's going to be a JavaScript file go to server Js and here's essentially where all my backend code is going to go okay so just one file I call it server just to make it really clear that this is our backend and all of this is going to be our front end okay so everything in here and they're going to share a package Json file great so what are we going to do here well we are going to have to communicate with our database in this file so to do this I'm going to have to define a port I'm going to say I want it to run on Port 8000 we're also going to have to get axios so const axios equals require the package axios okay so that is something that I'm going to have to install we're also going to get the package express so require Express and the package cores so that we can get rid of those Pax key cause messages which I will show you and then we're going to also need the dot EnV package so that we can read information from a DOT DNB file in which we're going to store our API key so I hope you already know what all these packages are as I'm not going to go too much into them the axios package is essentially going to help us make get requests because we're going to get the data from our database and express is what's going to help us do the routing okay cause as I said is going to help us when we see the pesky cause message which I will show you later and the dot EMV file as I said is going to help us get information from the dot EMV file that we will create to store API key so let's go ahead and install all of these so just make sure that you're in the right directory which I am and I'm going to use the command npmi for install to install the axios package the Express package the course package and the dot EnV package just like so I'm also going to install the nodeive on which will help us listen out to constant changes on the server.js file so just go ahead and install this so hit enter and let that do its thing okay and great so now if we look in the package.json file you will see those packages right here okay so there we go if you are doing this in the future and something doesn't work it could be down to the package you are using so just make sure to change the package and then run npmi to reinstall all those packages again after you save the file however we're not going to do that now so let's just put it back to the packages that we installed so these are the latest ones right now in time okay so let's carry on it's going to zoom in a little bit for you to see now we're going to also have to add another script because at the moment we have a script to start you know the just the reacts app I'm going to write another script which I'm going to call start back end so that's how we're going to call this script so sort of back end and I'm going to change this to front and actually and here I'm going to listen out to changes on the server JS file and to listen up constantly the changes I'm going to use node in one which I just installed okay so that will listen out to constant changes on my server.js file great so I'm not going to run this yet let's just get rid of that for now let's carry on writing our code for here so first off I'm going to actually get everything that Express comes with and release all of its magic wonderfulness and to do this well I've stored it under the cons Express which means if I grab Express now and call it all of that will be released so everything that comes with the Express package so to use that I'm actually going to save it as another const called app which means that now I can use app and use any methods that come with Express and one of those is listen and that's going to help us listen out to the port okay and it's going to listen up to the port and it's going to consult log out running on ports and then we're just going to grab the port name okay so that now if I do npm Run start back and and hit enter you will see running on Port 8000 you know I make any changes here and save obviously that won't work because that has um that's not code it's common that out it will rerun okay so that's constantly listening out for changes great now let's check what our database is doing so as you will see here it is it is online this is great so this is looking good we can now use it so what I'm going to do is add data into this manually and that's going to be our flight widget data so we're pretending we're an airline essentially okay I'll come in here's my Airline data of course realistically the database would hold data that someone is constantly updating but we're just going to put it in once and leave it okay because it's for the project but you should know how to do this so I'm going to show you how so here is our database I'm going to connect and there's many ways you can connect however this time I'm just going to use the document API and I'm going to use the Swagger UI documents to help me visualize this okay so all I've done is click on here and let's launch the Swagger UI now we've created a key space now first off with key spaces we need to create a collection that will hold all our data so let's go ahead and do that I'm going to create a new collection in a keyspace name and try it out now this has been Auto populated for us so thanks very much data stacks and the key space otherwise known as Name ID in here as we know is called flight as that's what we called it and the collection that we're going to create you can call it whatever we wish I'm going to choose to call it departures okay so that's going to be our flights departures so my collection is called departures and now if I execute this you will see that that has worked we get a 201 response so great that's looking good we've made a collection now let's put stuff into our collection so what I'm going to do is create a new document this time and try this out the keyspace name otherwise known as the name ID in here the name space ID is called Flights and the collection is called departures as we just made it and in here well I'm going to go ahead and just create an object that's going to represent one departure now I've already pre-made this for us so we don't have to sit here all day writing them out so this is what my object is going to look like okay as you can see here we have the stasis I'm delayed for this flight the destination is Halifax Canada the flight number is y9521 and it's departing at 4 P.M and we've also got the gate number okay so there we go that's what one object is going to look like and now if I execute this ta-da we got a 2-1 response that object essentially has been put into my departures collection and that is its document ID if we ever need to pick it up by document 18. I'm just going to go ahead and put in some more okay so once again I have pre-made these just to make our lives a little bit easier so there's another flight I'm just going to execute that and let that do its thing and that has been put in because we can see the document ID in the response body let's put in another one okay so this flight is on time because the other two have been delayed I'm just going to put in a few more to check that one has worked and it has this is a canceled flight to Oman I'm going to execute that and then we have one more and it's to crack off Poland Okay so there we go great and we're just going to execute that and wonderful so now if we search all the documents in a collection let's try this out the key space name is flights otherwise known as the namespace name and Swagger The Collection is called departures and I'm just going to get back everything okay we could limit how many items we want to get back but I don't want to do that I just want everything and wonderful so there we go okay at the moment it's just returning three however if I view this so if I actually get this URL okay this one right here that's essentially what we created by entering all these details that is the URL and this is what we're also going to have to pass through with that accept application Json and the Cassandra token so that's what essentially what we're going to recreate in our back end so let's get up our web store now I'm going to use app again which holds all of our Express wonderfulness and I'm going to use the get method let's move this a little bit bigger and we don't need that and what I'm going to do is get and I'm going to define a root I'm going to say that if we visit localhost 8004 slash flights then we want to essentially see the data from our database so this is the Syntax for doing a get request in Express and then I'm going to have to essentially get pass through some options okay so the options are what we saw the method is going to be get even though I don't think we need to specify that if we're doing it up here so let's not worry about that the URL for this is going to be the URL that I stole from Swagger which we can hide as well but I'm just going to keep it like this for now and then the headers well the headers are gonna be these two Okay so we've got accept application Json and then we're also going to have let's make it like this X Cassandra token you can sort of spelled it exactly the same way as it's spelled here and we're going to use our own token that we saved so there we go that's my one that we saw earlier and now under the headers and under the option so that's our options all of that I'm going to use axios which is the package that we installed up here to request options then get the response and once we get that response Well for now I'm just going to consort log the response data but we also want to see in the browser and for that I need to use res Json and pass through the response data like so and then of course we're going to catch any errors so catch error just like so I'm just going to console log the error okay great so I think that should be it that is a whole piece of code so now if we look and localhost 8000 forward slash flights we get that data showing up so we can use it now if we wanted to limit or say that you know we want to get all six then I can actually say that I want six I can really hard code it to only get six backs I'm going to do page size six and then you'll see all six of those flights so let's go ahead and add that to the URL right here okay great now at this point I'm actually going to create a DOT dnv file so new file dot EnV so we can store all of this as this is kind of sensitive even the URL is sensitive right so I'm going to essentially get this whole URL all of it including the page size or we can actually leave the page size maybe let's leave it let's just get this URL and save it here and I'm going to say this is URL just like so okay we don't need to put strings as it's implied that it's a string then save this and I'm also going to get the token and save this token right here so that it's hidden from when we push this up to GitHub and so on so let's get all of that and paste it in here like so okay so there's my URL it ends in forward slash departures and there's my Cassandra took great so now to access these we can simply just use process EnV and then token okay process in V is essentially a way for us to access anything in the dot DMV file and token is what we called our token and we can do the same for the URL here in fact I'm going to use back text because I'm going to pass the URL in like this so process e and V URL and then I'm going to also attach this string at the end just so it's visible to whoever's looking at this in case they're wondering why all their details are coming back is because we capped it at six great so amazing we've essentially finished our back end how painless was that so now that we have that let's get to using all of this data that we have here by building out a front end so let's do it so to do this I'm going to actually get out my terminal again and create a new tab and run the command npm Run start front end this time making sure to spell it correctly and making sure that you're in the correct directory and hit enter so that will spin up our front end okay right here should have nothing in it because I deleted everything in it so it should just be a blank page okay and it is great so that is working well I think we are done with the day space for now so I'm just going to get rid of that and great now the first thing we want to do I'm actually going to get rid of the seven two uh and let's just go up let's have a think about the components that are going to make up this app well we're of course going to have a table we're also going to have the table body as well as the table header and the table body is going to hold all our flight details and the table header is going to hold information about the column names we're also going to have table rows that make up our table body okay as they can easily be components as they are reusable as well as table cells which will make up each cell that holds the names of things in our table okay so let's go ahead and start doing that now so all I'm going to do is create a new directory called components this time components and in here I'm actually going to use this as a template I'm going to create a new file it's going to be a Javascript file and it's going to be for our table and I'm going to store this as a table jsx file okay and then just paste it like so and I'm just going to change this to the table export default table great in fact we should probably change this to a jsx file as well as it includes jsx so let's just go ahead and rename this app jsx and this one as well rename index.jsx great so we've got our table next we're going to have a table body so new file table OD Dot jsx and then I'm just going to add body here and here Okay so we've got table body now we're also going to have table head so new file table head Dot jsx add that file table head and table head now we're also going to have a table row right so new file table row Dot jsx let's put don't ask again and then this is going to be change to table row I'm not forgetting to changing but here at the bottom two and one more and that's going to be a table cell so table cell Dot jsx and change this to table cell and change this to table cell 2. great so let's just get rid of these at the moment okay so what I know is that I'm going to have a div here and this div I essentially want to hold all of my departures information together which means I want to put in the table along with a header that says departures okay so I'm going to put in a header element and it's just going to say it departures like so perhaps let's make a capital to make it consistent with the previous ones that I made and I'm also going to use the table component now okay that I have made so just like that which means you need to import it in here so import table from and then I'm going to go into the components and I'm going to grab the table component just like so so at the moment this won't really do much okay I'm gonna actually start this up I'm going to give this the class name of Departures just so we can Center the departures header and the table okay so let's go ahead and do that I'm going to grab this and then the dot CSS file I'm going to grab the class of departures so dot for class name and I'm just going to give this a background color so we can see a little bit of what's going on and I'm just going to make it this dark gray I'm going to give it a border radius to soften it up of 10 pixels and I'm also going to give it some padding space it out from the header and the table and then I'm also going to give it a box Shadow which I've pre-made before so it's going to have this dark gray color with a 0.25 Alpha for opacity and I want it to be zero on the x-axis 13 pixels on the y-axis 27 pixels blur and 5 pixels spread okay and then I'm going to Overlay with another one whoops there we go and that's rgba this time is black with 0.3 opacity I'm just going to put this on another line maybe and zero pixels x-axis 8 pixels y-axis 16 pixels and minus eight pixels spread great we don't need the p x and the zero as it's redundant so we've done that and now if we look in the browser oops maybe we should have just kept that as it is unless we can change something in the package Json maybe that's I think we're just over complicating it maybe let's try it really around this so npm Run start front end and there we go okay so that's fine we just had to rerun it as we renamed this file to a jsx file okay so now you will see the div with the class name of Departures if I inspect this you will see that in the root okay so there we go there's a different class departures and in its got a header which says departures and it should have the table component but at the moment that's returning nothing so that's all we'll see let's go ahead and change the font as well so actually what I'm also going to do is say that also all the fonts that I'm going to use are going to have the color of an off-white so RGB 240 240 240 just like so I'm going to use the font family of Ubuntu condensed which I'm actually going to get from Google fonts API so condensed and then as a backup we're going to have Suns serif and Ariel okay great I'm also going to make the font size for everything 35 pixels so now if we look in here there we go we get the departures let's go ahead and also get the Google font API so we can install Ubuntu so here we go fonts Ubuntu and we're just going to select the regular one and then we're just going to import it so I'm just going to grab this like so and paste it in okay so there we go we've just imported the Ubuntu condense and we can now use it in the font family so great there we go you will see that font has changed wonderful let's carry on so now that we have that I'm also going to Center the departures so what I'm going to do is grab the whole body of my document and use display Flex on it and first of all I'm going to Center everything horizontally and then I'm going to give the body a height of 100 viewport height which will be in the I can now align items on the adjacent accent to this so essentially vertically and I'm going to assign them Center let's also give the body a background color I'm going to choose to give it to this orangey like color just like so okay so there we go we have centered you did with a class of departures great now let's go ahead and work on the table element so I'm going to go ahead and get it up here now the table element isn't really going to have much in it it's just going to say that I want this to be a table right so I've got the table element and then we're going to have to have a table of head right but I'm going to choose to put this in its own component so there we go we've already made the table head component here and we also need the table body because as we said we want the table body to hold all of our data about the flights so let's go ahead and import those two components that we made so import table head from table head and also import table body from table body great and once again that's all we're going to do on the table let's work on the table head first so what do I want the table head to return well I'm going to use the table heads element and it's closing tag to create a table head and inside of here I'm going to have to create a table row so there's our table row note that it's separate to the table row we have here because this one's specifically for the body the table head is going to have a table row which is going to contain a table header with the first one being empty and the second one is going to be a column title of time the next one we're going to have destination so it's going to be the column head of our destination column destination next we're going to have a column ahead for our flights then we're gonna have one for the gates and then finally we're going to happen for remarks okay and marks and I'm going to actually pick each one of these out by its ID because I'm going to give it a custom sizing so that one's going to be time this one I'm going to give it the ID of destination oh no no yes destination let's give this one the ID of well you guessed it light this one the ID of eight and this one the ID of remarks okay so at the moment this will just like this but as I said I want to space them all out a little bit so perhaps let's go ahead and do that now so first off maybe let's also just give this some padding so let's pick out the header I'm just going to go ahead and do that pick up the header and give it a padding of 10 pixels just to space it out from everything else and now in the departures the table itself that we created I want that to be a different background color actually I want to be this lighter gray that I picked out earlier and I want all the text to align to the left so let's have a look at what that looks like at the moment there we go you will see this is my table okay you will see it's got a lighter gray background now let's actually get to picking out all of the column name so we're going to get the flight and I'm going to hard coat the width of this column to be 160 pixels next we're going to get the destination and I'm also going to hard code this to have a width of 700 pixels this time then we're going to get the time in fact this one the first one's time isn't it the second one is flight and this is going to have a width of 205 pixels then we have the gate this is going to be a short one so grab the gate ID and then just give it a width of 135 pixels and then remarks it's going to have a width of 260. fixes okay so that should have spaced them all out a little bit great so I believe we are done with the table header let's move on to the table body next and populating it with our data so let's go back to here I'm going to get rid of this we're done with this for now and let's get the table body so the table body well we already know that this should return the T body element because that is how we make tables so tea body and what we're going to have to do is map stuff onto table rows so this is the ideal place for us to essentially get the data from our backend so that's what we're going to do and for this we're going to have to import use State and use effect from react okay because we're going to essentially get the data so let's actually write a function for this called get flights just like so and I'm going to use fetch from JavaScript in order to fetch data from here so I'm just going to grab this URL it really is that simple and I'm going to paste it like so and then I'm going to do some chaining so once we get the response response I want to get it's Json then I'm gonna get the let's call it flight slot data flights and I'm going to set flights so let's go ahead and use const light set flights use state and start off with the state game no so what this essentially is if you haven't really come across that much react before is I am saying that I want to set the flights with whatever I pass through into here which is going to be flights okay because the flights are whatever's coming back from our Jason so essentially all of this is our flights and I'm passing it through into set flights which is then going to pass that onto the variable or the constant of flights okay so that is how to use use State and we're starting off with flights being no so if I console log flights after fetching the data let's see what happens we of course need to catch any errors as well so catch error console log error great so this is looking good however we also need to put this in a used effect so what I'm going to do is put get flights and use effect like so and not pass through any dependencies so let's see what happens now let's go to here and console and there we go we get that Pax key pesky cause messages and block by cause so what I can do is go to my server and use app again so app use password calls and call it okay so that is how you would get rid of this pesky message so let's refresh and great so this is why we have to use use effect because the first time we get the data that's null nothing and the third time we get it the data is there okay so that's all our flight data okay so there's one object with its document ID there's another object with this document ID and so on and so on okay so once again that is why we have the use effect here so that we can keep running this until we get our data right because it came back as null now and then we got it wonderful so now that we have our data let's use it to populate some table rows so let's do it so this is obviously coming back in this format as data so perhaps we can actually get the flights data and see what that looks like so now this is our object our object comes back with lots of other little objects of course so perhaps we need to format this we want this to be an array essentially so let's go ahead and do that so I'm gonna have to get the object values I think and turn them into an array so how would I do this well let's check it out so perhaps let's wrap this an object value so you can get the values okay and there we go so yes all I've done is look at this object and say I don't want the key I want the value instead and stick that in an array for me and that's what happened okay great so now I have an array of five objects wonderful so now that we have flights like I said what I want to do is map them so if flights exist I want to map because as we know at the beginning it returned back now right so if lights exist I want to map that onto so let's get the flight actually we need the index too so the flight and the index because we need a key and I essentially want to map them onto the table row component that we made we're going to have a key for that as that is necessary and we're just going to pass through the flight so each flight okay wonderful so that is all I am doing I'm getting the array and for each item in the array I'm passing it through into the table row element so now let's style the table row element which of course we need to also import into here so let's go ahead and do that import table Row from table row it's going to make it single quotes to make everything consistent wonderful so let's get the table row and here we go so for now if I just console log the flight which we are destructuring okay we've destructured that prop so I'm just going to console log the flight now and look in here we will get each individual flight coming back okay so this is good let's work with that so for each flight well I actually don't need to do much um I need to just well I could just make a table cell and then pass through each item of these each value into a table cell so perhaps no let's do that okay so return back well actually with the table row let's get the table row element this is going to be made up of table data so let's get the table data and we're going to have six of these with the first one actually being this cute little airplane icon that I found so feel free to take that from my code if you wish and then for each of the five remaining table data elements we're going to have to well you guessed it map out each of these okay so this is going to go on one table cell this is going to go on one table cell this is going to go on one table sub so let's import the table cell import table cell from table cell want to get the I guess words I'm going to use object values again to get the values the object values of each flight so just the ones in light green so I'm going to pass through the flight in here and just console log what this looks like so we can see let's have a look okay and great as you'll see an array of all the object values has been made for us so now we can work with this array to map them out onto table cells so let's get the words so words and if words exist I want to map out each word onto the table cell of course we're going to have to have a Q so I'm going to actually add an index to this as well so index the index as a key and in fact I'm just going to put this on another line there we go and the table cell is going to have the key but it's also going to have the word itself right so there we go great so that's what we're passing through okay cool so now on the table cell we're going to de-structure the word and we can just return it I'm going to show you what this looks like if we just return the word of course this needs to be in a table data element and let's have a look at what this looks like it will look like this so This essentially looks good however we want to give it that flip effect right which means we have to take this a step further and for each word I want to split it out by letter okay and then I want to apply a timing effect to it so let's go ahead and do that next so what I'm going to do is well I am going to instead of just putting the word in here I'm going to essentially make an array from the word like so and then I'm going to map each letter so let's get the letter and I'm also going to use the index as a key and what I'm going to do is just maybe get rid of this now is make a div this time and I'm going to give it the class name of well the class name is going to depend because I want to add this class name after X amount of seconds has passed right so and I'm also going to pass through the letter so at the moment if I look in here oops let's just get rid of this for now the letters are coming through let's actually maybe just start this up a little bit so they don't look like this let's get our index CSS and let's grab our departures grab our table that lives inside of that and grab the div so the div that I just created and give each one a border of solid 4 pixels and then the gray color so just like that I'm going to give it a border I'm also going to give each one a background color of black essentially so let's do that by rgb000 I'm also going to give each one amen width of 20 pixels and a height of 40 pixels so each list is the same I'm going to make each one float left as well so now if you look in here that's more like it okay and then let's just make this a little bit smaller for now so there we go there we have our little letters and of course we want to flip them next so let's go ahead and do that for this I'm going to have to write an animation okay so I'm going to create a class so dot class called flip and I'm going to make this an animation so animation and on the last I want the animation to last 0.5 seconds I want it to be smooth so I'm going to add linear and I'm going to define the keyframes of flipping so at Key frames flipping and all I'm going to say is at the beginning of my 0.5 second animation I want to transform rotate on the x-axis start at zero degrees and then 50 through my 0.5 second animation I want to transform and rotate X and I want it to be to 90 degrees and then on 100 I want to transform and just put it back to zero okay guys okay so if I add the class of flip to something essentially kick off this animation so this means that here I essentially want to add the class a flip but add it to each letter after X amount of time has passed and for this I'm going to have to use a set timeout so I'm actually going to import use state for this so we can save the flip state for each of the letters so import use state from react and I'm going to say const flip set flip and then we're going to start off with the flip being false for each div okay none of the divs have the classic flip however I'm going to use set timeout Now set time out and I want this to set timeout to occur after 100 milliseconds multiply by whatever index we are looping over for each word okay which means that we need to go back into the table row and actually pass through the index into here too so the index of each word so index I'm going to actually use the index now so like so so on the table cell I'm going to also pass through the index and we're going to use it to multiply to 100 milliseconds in order to perform this set timeout after different time intervals and what do I want to have in this certain timeout I just want to set flip to be true okay so I'm setting flip to be true by using set flip it starts over being false but then I set it to true so now I can use flip in order to select a class name so I can say that if flip is true I want to add the class of flip otherwise no there's no class name okay I'm actually same for the Lesser same for displaying the letter F lip exists then I want to show the letter otherwise I don't okay I just want to show an empty string or we can just put it down great so if we have a look now what this looks like ta-da wonderful so that is how it looks we are essentially flipping out each word we can of course take this a step further and actually flip out each letter so shall we do that yeah let's go ahead so instead of just creating this div here I'm going to pass it through into another component so let's go ahead and create a new file uh let's call this letter table letter just to keep everything consistent jsx so now let's do const table letter just like so and Export default table letter okay table letter and we know we already need to pass through some things and we're going to return well we can actually just return this right so I'm going to get one of this and put this as the return of the table letter and then also this set timeout doesn't want we don't want it to happen here so let's grab all of that and put it in here which also means we need to import use state which has been done for us great so now we just need to map onto the table letter just like so and for each word we're going to pass through the letter as well as the index right so we're going to use the index we're also going to have to give this a key so I'm just going to put this on a new line so it's well readable and of course we're gonna have to get up some parenthesis and let's just put in a key for good measure and that'll be the index which actually means we don't need to pass this through into the table cell anymore from the table row so let's get rid of that here and let's get rid of that here I'm just going to do that again okay because we're not using it so now on the table letter is where the flipping happens so that means that on the table cell we're passing through the letter and the index let's also go ahead and import table letter here from table letter and on the table letter we're going to pause with the word and the index which were they going to use to flip our sorry letter and index yeah the letter and index so which then we're going to use the index to flip each letter which we have passed through into here so now if we save this file there we go now each letter is rotating individually Okay so we've just taken that a stepfather and there we go we have essentially finished our widget okay we've made it in reacts with a database I hope you've enjoyed this lesson and if you found this a little bit difficult please watch my video or make this in pure JavaScript and another video we'll make this in JavaScript using an API so there's three videos for you all different all giving you the same result but with different Frameworks and approaches thanks very much and I'll see you again soon\n"