Okay, let's get the example code set up on your machine, we're going to do three things. First, we'll download the example code. Next, we'll set up the project using NPM. And then after that, I'll demonstrate the local web server. So first, let's start by downloading the example code. Just as a preview, I'm going to walk you through the steps of clicking this link in the class web page, which will start to download the zip file.
And then after you have downloaded that zip file, you're going to unzip that file, open up that folder in your terminal application, you'll run npm install to install dependencies, then you'll run NPM start to start the local web server, and then you'll point your browser to localhost 3000. At that point, you'll see the example web page or the local web server in your browser. So let's actually walk through those steps together right now. Scroll down towards the bottom of the page and click your project. On the right side you'll see a link named scope versus contacted Examples dot zip, click that link to start the download, move into the folder that has the downloaded zip file. I've got mine on my desktop just to keep things simple, unzip that file, open up your terminal application and move into that folder.
Next, run the command npm install. This will download all the dependencies for the project. When that's finished, we'll need to start the web server. So when your npm install is complete, run the command NPM start you'll see a message stating that the web server is running on localhost Port 3000. So open up your browser and point your browser to localhost 3000. And you'll see the example web page.
Okay, now that you've got the example code set up on your machine, I'm going to walk through this little web page that I put together, which we'll use as for our discussions of the different options concepts in this class and some of the code examples. This is a very, very simple little web page I put together doesn't do much, but it's mainly, we're going to be using it to demonstrate the code examples in many of the lessons. So first in the upper left hand corner, if you click the show examples button, you'll see that there are links to all of the examples from the course. And it allows you to run the code examples without having to copy and paste, you can just run them right there in the browser. So if you scroll down and click the one that says method chaining, we're not going to actually go into that right now.
But that particular example, actually makes all of the code work for the UI. So now I just want to show you how the page works. This is a fictitious sales team of 10 people and for each salesperson, I can click the Select button, and I can click the D Select button. So when I click select that you can see the salesperson is selected, the UI changes a little bit and I can be selected and I can also just manually delete each day. salesperson from the page by clicking the Delete button for that salesperson. And when I select one or more salespeople, the delete selected button in the upper right hand corner shows.
And when I click that any salesperson that's selected is then deleted. So if I select, say two more, and click, delete selected those to delete, and as you delete salespeople, the count the total count of salespeople goes down. Really simple stuff. But you know, we'll be kind of walking through some code examples. And we're using this to base our examples off. And at any given time, if you want to reload the page, just click the reload Page button.
And you can start from scratch. If you open up your JavaScript console, you'll also see a message whenever you load a code example, that just tells you exactly which file was loaded. So you can be sure that for example, I'm loading global scope examples too. And I see that in the console. So it just lets you know that you're running the right example in case you're not really sure