‫Okay, so there's a couple of things that I want to do here.
‫I have the the job listings page where we have this array of listings.
‫And down here in the HTML, we're looping over the listings and outputting some dynamic data from the
‫array.
‫So a couple of things I want to do.
‫First, I want to make it so that each even listing has a color of a light blue for the the card, the
‫background color.
‫So let's do that first.
‫So where we have the the color class is right here.
‫This div has a BG white.
‫So if I change it to BG blue dash 100 that makes it all blue right.
‫Light blue.
‫But I only want that for the even ones.
‫So if you want to pause the video and try this on your own, you can.
‫But I'm going to go ahead and get rid of that and replace that class name with an if statement.
‫So let's say if and then I'll put my end.
‫If so PHP and if.
‫Okay.
‫Now, in order to do this, I need to get the index of the listing, which starts at zero and then increments
‫from there.
‫And we can get the index by going to the for each.
‫And instead, instead of just saying as job, we can say as index and then have an arrow and then job.
‫So now I can say if that index and I'm going to use the modulus operator just like we did in the last
‫video.
‫So if whatever that number is that index divided by two, if the remainder is equal to zero, then we
‫know it's even.
‫So in that case I want to do the big blue 100.
‫Else, let's say PHP.
‫Else.
‫Then we're going to have keep it at PG white.
‫Okay, so let's reload.
‫And now only the even so zero.
‫This is zero, one, two, three and so on.
‫All right.
‫Now there are shorter ways of doing this.
‫You can use what's called a ternary operator.
‫But we're not there yet.
‫We will refactor this a little bit later on.
‫Next thing I want to do is add a little badge next to the location if it's our home location.
‫So let's just say we live in New York.
‫So New York should then have a little badge that says local.
‫You know, it's a local listing.
‫So let's come down to where the location is.
‫And still within this list item, let's go right here.
‫And let's open up a PHP tag.
‫And we're going to say if.
‫And what I want to check is to see if that job.
‫If that job location is equal to New York.
‫And let's add our endif here.
‫So if it's equal to New York, then I'm going to have a span.
‫I'm just going to style it a little bit.
‫So text extra small.
‫Let's say text dash white.
‫Let's do BG dash blue 500.
‫And we'll say rounded dash full.
‫Add some padding on the x axis.
‫So PX2 padding on the y axis p pi one and then ml so margin on the left two.
‫And in the span we'll say local.
‫So let's go ahead and reload that.
‫And now any listing that has New York as a location has that local badge.
‫All right.
‫Now, the last thing I want to do is not show this tags title if there are no tags.
‫So let's go up to one of these.
‫We'll go to the last one here.
‫And let's just make this an empty array.
‫So say that there's no tags in the database or wherever this is coming from.
‫So I don't want this to show.
‫So there's a few ways we can do this.
‫We can use the empty function or check if it's not empty.
‫So I'm going to come down here where we have the the entire list item.
‫We're going to wrap that.
‫In an if.
‫Okay.
‫And what I want to say is, if not empty.
‫And we want to check job and tags.
‫Okay.
‫We'll go under the list item and let's PHP.
‫And if.
‫Reload.
‫And now notice that the tags title is gone.
‫So those are little things that you have to think about when you're creating your website or your user
‫interface.
‫You know, you don't want to show empty, empty headings and things like that.
‫So that's where these if statements really come in handy within an HTML template like this.
‫All right.
‫So in the next video we're going to do a little challenge, a popular challenge that some of you may
‫have taken before called Fizzbuzz.