Okay, let's take a look at using Algolia Places to grab a city for our weather app. So you can see an example here, if I type in a city, you'll see that city, and you'll also see a bunch of other places around that city, but we can turn that off in the config. So let me open the example app, but first let's grab an API key, and it's free. So let me just log in, and here I am in my dashboard, you can see my API key, which we'll grab in a second. And for the example, let's just grab this code, and it's basically what I just showed you earlier on, a bunch of cities and places. So let's grab this, and paste in our API key and our app ID. And let's put this in our application.

So let's grab this, and paste in our API key and our app ID. And let's put this in our application. So let me grab the input first. So these two, and let's paste that in. So that's going to be in our, I guess we can put it within the WeatherWidget Blade component. You can put it outside too. I guess it doesn't really matter, but we'll put it here. And I'm going to put it outside of the container. So see if that renders. Okay.

So see if that renders. Okay. And I'm going to put it in the center. So let's do, let's make a div here, and say same width, 128. And it's centering as well. Okay. Okay. And the CSS is going to come from the JavaScript that we import. So we don't have to do anything. Let me just put a margin-top on this, say 8.

So we don't have to do anything. Let me just put a margin top on this, say eight. Okay. So let's grab the script and it's all of this pretty short. So we're importing the places library from a CDN, and then we're initializing the places object and passing in a container, which is right here, or the input in this case. And as we change the city, or as we select a city, it's going to change this right here. So again, this. So that's basically it. And I'm going to paste this in our welcome.blade.php.

So that's basically it. And I'm going to paste this in our welcome.blade.php. So if we had a layout, we can just push to a script and we can put it within here. So the markup and the script is within the same file, but I'm just going to put it in here. Okay. So I'm going to paste that and let me just reinvent this and let's grab our appID and our apiKey. So that would be our appID here and our apiKey here. And I'll show you how to secure this in a second, since everything is client side.

I didn't spend too much time on it, but I'm just going to leave that. If you know the solution, definitely let me know. So now we want to make our location dynamic. So we want to be able to type in here and have our app display the weather for that city that you selected. So what I want to do here is store the location in a query string in the URL. So in this case, it's going to be location=Toronto, Canada like that. Okay, so let's go ahead and make that happen. So for now, I just want to output this in here. So let's do that first.

So for now, I just want to output this in here. So let's do that first. So let's go to our weather widget. And actually we can do this from within the location here. So instead of hard coding it, we can do request and I'm just going to use the request global helper and grab the query string. So if that exists, request, use it. So request location. And if it doesn't, we'll default to Toronto, Canada. Okay, that should be a string.

And if it doesn't, we'll default to Toronto, Canada. Okay, that should be a string. And let's pass in the location here. And let's use that in our weather widget. We have to pass it in as well. Or we can just grab the request here as well. But I'll just use that location. And within welcome, we have to pass that in right here. So let's say location equals location. And I guess we have to pass that into our class too.

So let's say location equals location. And I guess we have to pass that into our class too. So let's add one more location. One more down here. And one more down here. Okay. See if this still works. And it does. And now this should be dynamic. So if I say Montreal, that should work.

And one more to make sure that it works. Okay. So now we want to connect this to this query string. So whatever we type here, we want that to go in the query string and then reload the page. So let's see if we can get that working. So back to our JavaScript here. So we just have to grab the location in the query string and make use of that. So let's do that. So after this, I'm going to grab the query string.

So let's do that. So after this, I'm going to grab the query string. So we have to do URLParams equals new URLSearchParams, and you have to do window.location.search. And we have to sort of do what we did in the back end. So let's grab a variable called myLocation. And we want to grab the query string if it exists. So URLParams.get('location'). And if there is one, then use it. So we'll do URLParams.get('location') again. And if there isn't, then we'll default it to Toronto, Canada.

So we'll do URL params.get location again. And if there isn't, then we'll default it to Toronto, Canada. Okay. And we want to set the label. So this is this label right here. So let's set that to myLocation. Okay. So let's see if I did that right. So right now I'm in London. So if I refresh, it's London.

So right now I'm in London. So if I refresh, it's London. Okay, cool. But now as we select this, we want this to update. So how are we going to do that? So this code, when it's selected, is within this onChange callback. So we can just do it in here. So we can do window.location.href. And we can just manually add the query string. So I'm going to use template string here and say location equals e.suggestion.value.

And we can just manually add the query string. So I'm going to use template string here and say location equals e.suggestion.value. Let's do this, e.suggestion.value. And this should work. So again, now I'm getting the weather in London. If I remove the query string, it should default to Toronto, and it does. And if I select any other city, this should work. And it does. Cool. One more city here just to make sure it works.

So a few things here. I forgot to change it to only show cities. So right now it's showing places as well. So let's remove that. So I believe it's down here somewhere. So yeah, if you go to citySearch, you'll see how you can just get cities for your results. So we just have to add this configure method after we initialize places. So let's do that within our JavaScript. So after places right here, let's just add that. Okay.