Project - Image finder: Learn Alpine.js

Learn Alpine.js

Sign in Get started

Playing

05. Project - Image finder

Transcript

00:00

To cement what we've already learned and build something fun we're going to create out an image fetcher with the Unsplash image API. What this is going to do is allow us to type in a keyword, hit search, and get back an image relating to that keyword that we've just typed. So we can

00:15

pretty much type anything in here and that's going to go ahead and bring us back an image that we've requested. So I'm going to go ahead and clear this out and let's build this out from scratch. All right, so let's start out with a form in here. We don't need an action because we're going to add an alpine event listener to this, but we do need that input inside of here

00:31

which we're going to type in a query. So this is going to be hooked up to some data inside of here that we've already seen. We're also going to need a button to actually send this across, so let's just go ahead and say search, and that's pretty much the structure of what we need. Let's go over and start to think about the data that we want to include inside of our data object.

00:52

Now I'm going to go ahead and pull this down because we're going to be adding a method inside of here, potentially a couple more properties, so we want to make sure this is nice and tidy. So we're going to keep up to date with the query that we type by using x model in here to bind that query, and that means that when we type this and then click the search button, we'll have a

01:10

reference to that within the method that we introduced down here to actually hit the Unsplash API. So we could add, of course, a click event to this button, but because we're doing this all within a form, it makes a lot more sense to introduce an on submit. Now we can combine this with x data. There's no reason why we can't do this within the same element, so we're going to

01:30

go ahead and say on submit. Remember to prevent the default behavior, which is just submitting this through, and let's call a method or function in here called get image. So we're going to go ahead and say get image, and for now let's just console log this out just to make sure this is working. Always a good idea to do that as you're learning. So I'm going to hit submit, and there

01:49

we go. We get the abc text logged out. Now of course instead of this, what we want to do is send a request through to the Unsplash API. We're not actually making a request with any kind of library at the moment. The Unsplash API has a image URL that we can pass a query directly into, and this is over in my notes. So let's just go ahead and grab this and pull this over so you can see what

02:15

it looks like. So this is of course the size of the image that we want back. This is the URL that we're requesting, and then just after the query string, this is going to be our query. So we can just type in cats here, and of course you can check out the Unsplash API to find out more. So this is what we want, replacing cats with the query that we have already used. This will bring back an actual

02:37

image, so we're going to go ahead and add an image with an empty string to here, and we're going to go ahead and set this image to a request to the Unsplash API with the query inside of here. So we're using interpolation here with the backticks and then a dollar sign, two curly braces, and in here we're just going to say this query. So that's going to go ahead and set that image then to the

03:01

value that we get back here. Let's just go ahead and test this out by adding a span with x text so we can see the content of image, just so we know that this is working. Let's go ahead and say cats, hit search, and there we go, we get the actual value of this back. Now this is exactly what we want to render or use inside of an image tag. So let's create our an image tag inside of here,

03:23

and of course we want that to hook up to the source. What we can't do is just say image, that's not going to work. What that's literally going to do, if we just inspect this element, is put the text image inside of here. Now instead what we want to do is bind this value in, and again we're getting a little bit ahead of ourselves, we're going to cover this a little bit more later,

03:45

but what we can do is we can specifically bind in any attribute on an element. So in this case we're binding in the source, getting the actual value back from image here. Now I'm also going to apply some styling to this, we're not using any CSS here, so I'm just going to use an inline style and we'll just set that to a width of 300 pixels. Let's go over and there we go. So we've got this

04:06

image tag in here, but now when we type something in and hit search, that's going to actually pull back and bind in. You can see it's bound in the actual value that we have inside of xData. Now the only problem with the solution we have at the moment is this image is always shown. We might not want to do that depending on what we're doing, so probably a best practice would be to go ahead

04:28

and wrap this inside of an xShow to only show this when we have an image. This also gives us the benefit of an additional wrapper which we can use to add any classes to if we want to. So now that's not going to be shown until we type a keyword, hit search, and actually have a value back inside of image. Now I want to kind of refactor what we've already done. We've pretty

04:49

much completed the functionality that we wanted to, but what we're doing is we're outputting this image inside of a form. Potentially what we'd want is the form to be separate to the actual output of the image. So what we could do with this is we could slightly refactor it by creating an overall wrapper for this particular piece of functionality, have the form inside of here

05:13

separate from the actual image itself. So let's go ahead and change this up to see what we can do. So I'm going to go ahead and create this, start creating this from scratch just up here, so we can move things along. So we know that we want certain data within our overall wrapper. That kind of remains the same. So let's go ahead and add in our X data into here as we had it

05:34

before, and then let's go ahead and bring our form into here with the X on submit. So let's go ahead and pretty much grab all of this actually, and pop that inside of this wrapper here. Make sure we indent that. And then what we can do is we can take the image now and put this outside of the form so the concern's separated. So the form itself deals with submitting and not showing any image

05:57

inside of this form, but the wrapper here is still going to work because it's in the context of this overall component that we've created. So let's go over and try this out and see if this still works. And sure enough, it does. So there was nothing wrong with the original solution, but it really just depends on how you're structuring your page and your components.

06:18

I prefer this solution because we have an overall wrapper component with a form separate to the image. We're not attaching all of this stuff directly into this form. The purpose of this form is just to bind the query and then go ahead and submit this to actually get back the image that we show underneath.

Episode summary

In this episode, we're diving into a hands-on project to solidify what we've learned so far—by building a simple (but cool!) image search app using the Unsplash API.

We'll start from scratch, setting up an input field and a "search" button inside a form, then wire it up using Alpine.js. As you type in a keyword and smash that button, our app will grab an image related to your query and show it right on the page.

We cover how to hook up the input field to your Alpine data so it always knows what you're typing, and then create a method that takes your input, plugs it into the Unsplash API, and fetches the image URL. You'll see how to bind that resulting URL into an <img> element using Alpine's special attribute binding, so the image updates instantly with your search.

You'll also learn to tidy things up—showing the image only once a successful search has been made (so it doesn't take up space by default), and separating the form from the image output by structuring your Alpine data/components a little smarter.

By the end, you'll have a neat image search tool and a better understanding of Alpine.js event handling, data binding, and component structure. It's a practical, visual way to bring together everything we've been covering, with instant results you can see!

Episode discussion

No comments, yet. Be the first!