So you can see the result here, one in three is for when this condition is false. And two and four is when it's true. So let's try that out. Let's just see if lodash is correctly installed. So back to our code, let's just console.log that partition method. And it should be the same result as we see in the documentation. So one three and two four. And if I go back here, open up dev tools, we get this array should be one three and two four. And it is.

And the example they have here is a deeply nested array. And if we call flattenDeep on it, then it flattens the array and gets rid of all of the nested arrays. So let's try this out. It should be one, two, three, four, five as the result. So let's console.log that. Let's paste in flattenDeep. And let's see what we get. Save that. And we do get one, two, three, four, five.

Save that. And we do get one, two, three, four, five. How about we take a quick look at how we can make use of NPM instead of the CDN link. So let me get rid of this script src. So now we should get errors. And we'll just work with flattenDeep here. And the first thing we need to do is change the script type to a module. This allows us to import from other files using ECMAScript modules. And let's save that. Let's go back to the Lodash docs.

So I believe it's this one here, Lodash ES. And we can npm install Lodash ES. So let's grab that. Let's go into our command line to make use of npm. So this is the project. And if you want to check if you have a node or npm installed, you can do node --version, and the same for npm. So let's paste that in npm install Lodash ES. Okay, so what that did, if we go back into VS Code, is it created this node_modules folder, where all of the dependencies live.

Okay, so what that did, if we go back into VS Code, is it created this node_modules folder, where all of the dependencies live. So if we open that up, you'll see we have Lodash ES. And within there is where all of the Lodash files live. So to make use of flattenDeep, remember before we just used the script source tag here, but now we have to import it using ECMAScript modules. So we can do import. And we have to name it something. So let's name it flattenDeep from, and we have to grab it from this node_modules folder. So node_modules, Lodash ES, and this is called flattenDeep.js right here.

So let's name it flattenDeep from, and we have to grab it from this node_modules folder. So node_modules, Lodash, and this is called flattenDeep.js right here. Now if you had a module bundler set up, you usually don't have to import it from the node_modules folder, that's already going to be implied. But in this case, we don't. So I have to add that. So now instead of _.flattenDeep, we can just call flattenDeep. And now if I did this correctly, let's save that back here, back here, and it still works here. So again, just a quick example of how to use NPM.

So this goes in our head tag for the CSS import. So let's put that right here. And we also need the script tag for the JavaScript. So this one right here. Okay. Save that. Let me just put this back to the script tag for lodash, and we no longer need the type equals module here. We don't need this import. We can call this via console.log(_.flattenDeep);

We don't need this import. We can call this via console.log _.flattenDeep. Okay. Let's paste in the CDN for the bootstrap JavaScript. Okay. So bootstrap should now be installed. Let's take a look at some of its components. So how about we take a look at the modal component down here, components, let's look at the modal component and take a look at an example here. So we have, it's not that example.

And you can see there's a link to codebin here that shows an example. So GSAP should be available to us after we import GSAP, which we already did. So now we just have to define a div with a class of box and all of those elements should be animated. So if I copy this, we have to define a div with a class of box. So let's say .box. And we also have to add some styles so we can see it. So let me just go up here in a style tag. Let's add some styles. So right here, let's say style.

So if you want, you can run this code after we click a button and you should know how to do that by now. So how about we add a button above the box? Button. Let's give it an ID of animate. And let's say animate here. And we can run this code only when we click that button. So we can say document.querySelector. Let's grab the button. Let's add an event listener.

There's the button. Let's animate. Cannot read properties of null. Add eventListener. Sorry, this should be animate. Let's try that one more time. animate. And it does animate when we click it. Let's do a few more here. Next one is AlpineJS, which is a popular JavaScript framework,

Let's do a few more here. Next one is AlpineJS, which is a popular JavaScript framework, especially if you're working within the context of a server-side application like Laravel. The idea is to make use of inline JavaScript right where you need it. So if you scroll down here, you can see a script tag with a CDN link, which is great. So let's grab this. Let's paste that into our code. I'll put it right after GreenSock. And we don't need defer here,

So as we click this button here, this content should be either shown or hidden. Or it might actually only show it. So let's grab this. We can paste that anywhere in our markup. So I'll put it right underneath our box here. Let's paste that in. Save that. Back here. Into our code.

Back here. Into our code. Let's hit expand here. And you can see the content up here. Now if you want to toggle the visibility, we can change this code here and set open to not open. So it toggles it. So back here. Now if we click, it either shows it if it's hidden,

Let's paste it underneath alpine here. So right here. Okay. Save that. Now we can create a chart. You can see we have our labels. We have our data. So our labels are just an array, as you've learned. Our data is an object,

as you've learned. Our data is an object, which specifies our labels that we defined up here. We have our actual data set, which is an array of objects. Again, this has some options, like the label, the background color, the border color, and the actual data that we're trying to plot.

let's paste that in. And I believe we have one more step here to initialize the chart. So down here, it says finally render the chart using our configuration. So we're creating a new chart here. We're selecting the canvas element. And we're passing in our config. So let's grab this. Let's paste that here.