Let's work on a minor feature here, and that feature is the ability to click anywhere on the box and go to the appropriate link. So we already have the hover styles for it, as you see as we hover over the card, we get this box shadow, but when we click it, nothing happens. So if you take a look at the LayerCast form, this is actually being done as well. So we have the standard anchor link here, if you look in the bottom left, that's the link. But if we click anywhere on the box, it also goes to the link. So let's go ahead and do that. Actually, let's look at what LayerCast is doing here.

it to a tag name, and it clicks this link here. So anywhere that you click in here, it simulates a click to the anchor link here, and it also makes sure that it's not an anchor tag, because we want to be able to follow the links on these anchor tags. So let's do something similar for our app here. We have a few differences because we also have buttons, but we'll take that into account. So we'll be making use of Alpine. Let's go ahead and go into our index.blade.php, and let's go to the root div here, or the root div for each of the Idea containers. So let me just reformat this, and let's initialize this as an Alpine component.

root div for each of the idea containers. So let me just reformat this, and let's initialize this as an Alpine component. So to do that, we just have to add x-data, even though we don't have any state. So now we want to listen for the click event, and let's go ahead and put it on its own line, and let's just get it working for now. So we can do, or we can simulate a click in a few ways. Let's take a look at one way. We can do location.href, and we have access to the idea, so we can just do route, and the route name is idea.show, and we can pass through the idea here. So this will kind of work.

the route name is idea.show, and we can pass through the idea here. So this will kind of work. Let's verify that. And now if I click anywhere on the box, it does not work. So what's wrong here? Unexpected token. I think it's my use of quotes here, so let's change this to single quotes, because we're already using double quotes, and let's try that again. So if I click anywhere on the box, it does take us to the appropriate link. So that works, but I kind of don't want to mix Blade and just do it in JavaScript, so

So if I click anywhere on the box, it does take us to the appropriate link. So that works, but I kind of don't want to mix Blade and just do it in JavaScript, so let's tackle that first. So let's make a new variable called target, and let's just say event.target, and let's console.log that, and let's see what we get. So this should be whatever we click on within this idea container. So let's refresh, and there you see we get the element that we click on. So we just want to find this link and click on it, so let's do that. First let's put a class on the actual link itself, so that would be down here. So that's the image link for the avatar, it's not that one, it's this one here.

First let's put a class on the actual link itself, so that would be down here. So that's the image link for the avatar, it's not that one, it's this one here. So let's say ideaLink. So now let's go back to our JavaScript, and let's get rid of this. Actually let me comment this out for now, and we'll do event.target. We want to find the ideaContainer, so we can do closest ideaContainer as a class. And let's find the ideaLink class that we just made. So let's querySelector ideaLink, and let's click on it. So let's see if this works. It should work if I did everything correctly.

So let's see if this works. It should work if I did everything correctly. Save that, okay, and let's click anywhere, and it does go to the appropriate link. However, there are some issues here. So we have some extra functionality with the buttons, for example this menu button, but this will also open the link, and we don't want that to happen. So you'll see the menu open up, but it will also open the link, which we don't want. And the same thing will happen for the voting here when we implement that. So it seems to me we want to ignore certain elements, so let's do that. So back to our code.

So it seems to me we want to ignore certain elements, so let's do that. So back to our code. So let's comment this out, and let's bring this back. And let's get just the tag name here, and let's change this to lowercase, to lowercase. And let's console.log that so we can see what we're doing. And we should just be able to click and see whatever we click on. So that's a div, this is a button, this is an anchor tag, or an image tag, and this is also a button, and so on and so forth. But there's also an SVG in here, so there should be an SVG and also a path. So the ones that we want to ignore are button, SVG, path, and anchor link, because those

Let's click on this. The default functionality still works, but it doesn't go to the link. But anywhere else, it should go to the link, and it does. So that works, but let's clean up our code and make it more declarative. So instead of this long conditional here, let's make a variable that holds the ignores. Let's call it ignores, and let's put all of them in here. So let's say button, SVG, path, and anchor. Okay, and we can also do a conditional here. So if the ignores array, we can use the includes method, the target, and it should be not includes. Then we can do the same thing.

So if the ignores array, we can use the includes method, the target, and it should be not includes. Then we can do the same thing. So let's just move, or let's copy this, paste this, and we can get rid of this, or just comment it out for now. Actually, let's get rid of it, and let's get rid of these as well. Okay, so that looks good to me. Let's verify that it still works. Let's go back. Let's refresh, and these buttons should not go to the link. Okay, this button should not go to the link.

Okay, one more check. Let's go back, actually, and the buttons don't go to the link, but anywhere else in the box should work, and it does. So let's go ahead and make a commit here. So git add, git commit, episode 11, I believe. Let's say Idea container link.