Since we have the listening party start time, we can use Alpine.js to kind of set that in data and then start to count down using JavaScript, again with Alpine.js, when the page loads. We know that whatever date now is and whatever date this is, we know how many days, hours, minutes, seconds are coming up until when that listening party starts. Why don't we remove that just for now? We have that already set to state and we can maybe create a new div. Let's just say that this is going to be the text of extra small that we had and we'll set this to the text of slate of 500, 600, and we'll again separate that up with a margin-top. Here's where we can start to set that data. We have this x-data. In this x-data, we'll just go ahead and close out this div for now. In this x-data, here's where we can start to set those elements that we want to use in this Alpine block. If you have never used Alpine, especially within Livewire, we're not going to do

now. In this x-data, here's where we can start to set those elements that we want to use in this Alpine block. If you have never used Alpine, especially within Livewire, we're not going to do any intermingling right now between the server and the JavaScript other than grabbing that server variable to use Alpine, but an x-data block is saying, I want to set this state. For example, in this div, anything in this div has access to this data. We can say the startTime and we're going to want that linked to the listening party startTime. Why don't we set this to an ISO string? Because we want to make sure that we have that accessible for us to use to count down. The data is going to be separated by commas where we can set the, maybe we'll say the countdownText, and we can set that to blank to start off with. We can say isLive because we want to know when a listening party is live. In this case, has the startTime happened? Has it been

text, and we can set that to blank to start off with. We can say isLive because we want to know when a listening party is live. In this case, has the startTime happened? Has it been counted down and it's still active? Because again, we have that isActive set where we can say, has the startTime already passed? Is it less than now, but isActive still true? The listening party startTime, and we can set that to, is that in the past? So is past and listening party isActive. If that isActive, then we'll set isLive to true. Otherwise, we will set it to false. Let's go ahead and wrap this for easier viewing. So isLive, the isLive value is set to true. If listening party startTime is in the past and listening party isActive. Otherwise, if neither of those are true, then it's going to set isLive to false. And then we can update the countdown. So we can set, first we can say the start is a new Date. So this is in JavaScript. We can initialize that Date

then it's going to set live to false. And then we can update the countdown. So we can set, first we can say the start is a new Date. So this is in JavaScript. We can initialize that Date with the start time, and then we can go ahead and get that time. So this is just saying, I want the start time that I've set, which is the server variable that we have. And I want to set that here with the JavaScript Date initialization. So then we can set now is going to be the new Date and we can get that time here. So now we know what time it is when the user loads the screen and the distance in this case, when start is different from now, we can say if distance is less than 0, this countdown text is started. And then we can also set this live or isLive is true else. And here's where we can do some math to kind of say, okay, when do we show how many like days, hours, minutes, seconds, for example. So we can say the days, hours, minutes, seconds,

true else. And here's where we can do some math to kind of say, okay, when do we show how many like days, hours, minutes, seconds, for example. So we can say the days, hours, minutes, seconds, or we can set the floor of the math based off of those distances. And the distance is what we set up here, start versus, or take subtracted by now. Okay. And that looks good. So now we can say this countdownText is how many days, hours, minutes, and seconds left. And now in this div, we can set the init. So this is when Livewire loads on the page, we can say, we want to call the updateCountdown function. And then the setInterval function is saying we want to run the updateCountdown function. And again, the x is saying when Alpine JS component loads on the page, we're going to run the updateCountdown function every second or a thousand milliseconds. Okay. Now why don't we start displaying the information about the startTime? We could

we're going to run the updateCountdown function every second or a thousand milliseconds. Okay. Now why don't we start displaying the information about the start time? We could probably have a badge for when it's live. We couldn't say, Hey, this is live. But otherwise we can just have a countdown and say the next, this listening party, this audio party room is starting to go live in this many hours, as many minutes, we already have that countdown text set up here. So we just have to display it on the page. So the first thing we want to do is maybe we can have a div that says, and we can use x-show to say, okay, when it is live. So when $isLive is true, then we can close that div. We can show a badge and we have this x-badge from WireUI components that we can say, maybe we need the flat color, maybe the rose color. We can have a label set to live and then we'll close that badge. And then, Hmm. So when it's live, we'll show the badge.

components that we can say, maybe we need the flat color, maybe the rose color. We can have a label set to live and then we'll close that badge. And then, Hmm. So when it's live, we'll show the badge and then maybe when it's not live. And in this case, we'll, we'll another badge here or not a badge, but this, this will be the, uh, close out this div here. We'll say instead of a badge, we can just say maybe like starts in and then span with the text of a countdown text. And this X text right here is just saying the text that we've set in the Alpine component again, right here for X data is going to be displayed on the page here. So let's take a look at what this looks like. Okay. So it looks like we actually have the text, but it's not updating quite yet. And just the note, I created a bunch of listening parties using the form with RSS feeds and then just duplicated them a bunch of times, just so I have this information here. Um, but yeah, we have

And just the note, I created a bunch of listening parties using the form with RSS feeds and then just duplicated them a bunch of times, just so I have this information here. Um, but yeah, we have this startsIn section, but it's not, if I refresh, then we can see it changing, but it's not reloading that list. So it looks like something is up with our setInterval. Uh, it's probably because we missed a semicolon there, I would assume. And let's see setInterval. Aha. This isn't actually a function. So we need to setInterval to a function as an arrow function. And then we're going to run updateCountdown every second. Okay. So setInterval runs updateCountdown every 1000 milliseconds. There we go. Okay. So now we have this startsIn time. We have two that are alive and still have not been changed from setIsActive, but we don't see the label. So when are we in this badge and that's probably because we misspelled label.

We have two that are alive and still have not been changed from set is active, but we don't see the label. So when are we in this badge and that's probably because we misspelled label. Okay. Live. Perfect. Okay. And just to change something, I know why are you, I, the component has the ability to prepend things to a, uh, label when this gets a badge, I should say. So a badge and we have badge slots, so we can prepend information there. Or in this case, maybe we want one of those, uh, animate pings that tailwind CSS provides so we can have the x-slot. I believe that's what it shows. So if we have x-slot:name prepend, actually, I'm just going to copy this right here. So we have x-slot:name prepend, but for the name, I believe that's just the name that needs to, yeah, it's going to prepend this slot. And then why don't we change the colors itself? So instead of cyan, I'll change it to rose and this one will be rose as well.

the name that needs to, yeah, it's going to prepend this slot. And then why don't we change the colors itself? So instead of cyan, I'll change it to rose and this one will be rose as well. Let's see what that looks like. Yeah, I'm liking that. So now we know when upcoming listening parties are live. And so maybe we'll just add a button to each of these looped through upcoming listening parties, just to say you can join this. Let's take a look here. So we have this <a> tag, and then in the <a> tag, we have this div that is justifying between any child items. So flex items-center justify-between. And so this is one item. So why don't we add a second item here? And we can say, this is a X button. We'll just say join just to see what this looks like first. Okay. We have that button, but maybe like, maybe that's too much, like too much, too much primary action. We don't necessarily need it to be that, I don't know, bright,

first. Okay. We have that button, but maybe like, maybe that's too much, like too much, too much primary action. We don't necessarily need it to be that, I don't know, bright, I would say. So we can call this a outline and that will show this like little outline, but maybe we'll call it even smaller, like a small button and maybe even like extra small. That might be good. And maybe we can say a class of width, maybe like it's 40, might be a little bit too much, maybe like 24. Let's see there. That looks pretty good. So now we know that we can join. We click on one of those, or if we click on this, it does the same thing as well. And I'll just say 20. I think that's a little better. Maybe even instead of outline, we can say flat. I think I like that. So now we have this join button. You can see here that we can click that.

outline, we can say flat. I think I like that. So now we have this join button. You can see here that we can click that.