So let me just get rid of the sidebar here for more space. And you can scaffold up basic HTML with Emmet if you type in an !. And let's name ours counter. And let's quickly set up the markup here. So I'll put an h2 with counter. Let's put the actual counter value in a div. Let's give it a class of counter-value and also an ID of counter-value. Okay. And let's put in 0 to start. And let's have a button container.

And let's put in zero to start. And let's have a button-container. So button-container, and let's have three buttons in here. So say button, this one to decrement with an ID of decrement and a text decrement, one for increment. So let me just change these to increment and this as well. And one for reset. So reset and reset. I actually want to put this entire thing in a container. So let me just select everything here.

I actually want to put this entire thing in a container. So let me just select everything here. Let's wrap it in a class of container. Okay. And now let's add some styles. So I'll just do an inline here in a style tag. And let's say for the container, let's center it with margin: auto, let's give it some margin-top of 40. Let's give it a max-width of say 600px. And let's center it with text-align: center.

Let's give it a max width of say 600 pixels. And let's center it with text-align: center. We have our counterValue. Let's make that a bit bigger. So counterValue as a class, let's say font-size: 32 and font-weight: bold. And for our buttonContainer, I think that's what I named it. buttonContainer, let's say buttonContainer. How about display: flex? So they're next to each other. display: content-center, let's give it a gap of 16 pixels and a margin top of 20.

Okay. So that looks decent. And now we can work on our JavaScript. So down here, again, I'll just do it in line, but you can put it in an external script if that's better for you. Let's put it right here. So script. So let's say const counterValueElement, let's say document.querySelector. And we have an ID on it named counterValue. So we can say #counterValue.

And we have an ID on it named counterValue. So we can say #counterValue. Okay. And we need to grab our buttons as well. So let's duplicate this. Let's name this one incrementButton, or let's start with decrementButton. The ID on that is decrement. Same for increment. Let me just change this real quick. And this to increment.

Let me just change this real quick. And this to increment. And we need one for our reset button. So this one will be changed to reset. Okay. And this one's called reset. Okay. Now, I'm also going to define a variable for our count. We don't actually need this. We can just grab the value from the element itself, but I'd like to keep an actual variable.

We don't actually need this. We can just grab the value from the element itself, but I'd like to keep an actual variable. So let count equals 0. Okay. So those are our elements. Let's go ahead and define our events. So let's start with the decrementButton. So decrementButton.addEventListener, let's listen for a click on that button. And when that happens, let's run this callback function here. I'll just use an arrow function.

And when that happens, let's run this callback function here. I'll just use an arrow function. Okay. And let's say count equals count minus one. Or if you want, you can do count minus minus. This is fine. And then we have to update the value of this. So let's go ahead and do that. We have that element. It's named counterValueElement, and we can say counterValueElement. textContent equals count.

We have that element. It's named counterValueElement, and we can say dot textContent equals count. Okay. Increment is basically the same thing, but we are incrementing the count. So let's update that incrementButton. Click count plus one, or you can do count plus plus. And this is the same. And the resetButton just resets it to zero. So let's duplicate this. Say a resetButton.

So let's duplicate this. Say a reset button. Click count equals zero. And now if I save that, hopefully I did everything correctly. Let's save. Let's try our buttons. decrement does work. increment does work. And reset works as well. Awesome.

And reset works as well. Awesome. How about we add an extra feature here that changes the color of the counter based on its value. So if it's greater than zero, how about we change it to green? If it's zero, we'll leave it at black. And if it's less than zero, we'll change it to red. So we can define a function for that. So let's say function setColor(), no params. And we need a conditional here to check those cases.

So let's say function setColor, no params. And we need a conditional here to check those cases. So say if count greater than zero, then we can change the color. So we have counterValueElement.style.color equals green. We can use else if for the other case. So else if count is equal to zero, so triple equals, then we can do the same thing but set it to black. So let me just grab this, paste it here, but change it to black. And for the else case, we'll just change it to red. So that's when count is less than zero.

And for the else case, we'll just change it to red. So that's when count is less than zero. Grab this, put it here, change it to red. So now every time we click a button, we have to make sure to call this function. So we can add setCount here, or setColor I mean, for each one of these event listeners. So here, here, and here. Okay, let's save that, let's give it a try. decrement should be red, it is. When it's zero, it should go back to black, and it does. And when it's above zero, it should be green, and it is, cool.

Let's paste that in a <style> tag. Let's get rid of the sidebar here. Let's right click and open with Live Server. And let's just write something in here, say .container, background, okay. So let's put an <h2> here, background color selector, okay? And this one's going to be quite simple, but it's going to make use of an input type="color". So instead of something like input type="text", we can say input type="color". Let's also give it an id so we can select it, colorSelector.

we can say input type equals color. Let's also give it an id so we can select it, colorSelector. Let's also wrap it in a div, so it's on its own line, okay? Now if I save that, you'll see the browser's native color input here. So if we click it, you'll see we have a color selector here. So we want the background to change as we select a color here. So let's go ahead and do that, make a script section here. Again, I'll just do it in line. As always, let's go ahead and select our colorSelector. So const colorSelector equals document.querySelector.

As always, let's go ahead and select our colorSelector. So const colorSelector equals document.querySelector. And I named it colorSelector, colorSelector, okay? And we also need reference to the body, but we can use document.body for that, so we can change the background of the body. And now we can just define an event listener on this colorSelector. So let's say colorSelector equals document.querySelector. Let's say colorSelector.addEventListener. And the event we're listening for is input.

Let's say colorSelector.addEventListener. And the event we're listening for is input. So any time the color changes, go ahead and run this function. So I'll take in the event here. And we can say document.body.style. So we're adding an inline style on the body. The CSS property is backgroundColor, okay? And we're going to set that to whatever the user selects in the colorSelector. So in this case, that's event.target.value. Actually, let me just console.log that so you can see the value.

So in this case, that's event.target.value. Actually, let me just console.log that so you can see the value. So let's comment this out for now. Let's console.log event.target.value. Save that. Let's bring up DevTools here. Let's select something here. And you can see the hex value of the color selected here. So let's get rid of this. Let's bring this back.

Everything does seem to work. Awesome. How about we add a button here to select a random background color? So let's add that here. Say div. Add a button. Let's give it an ID of... Oh, sorry. getRandomColor. Okay. randomBackgroundColor. Okay.

RandomBackgroundColor. Okay. So again, let's add an event listener for this button. So let me just duplicate this, actually. Actually, we have to select the button first. So const GetRandomColor = GetRandomColor. The ID is GetRandomColor. And the event listener is also GetRandomColor.

The ID is GetRandomColor. And the event listener is also GetRandomColor. Okay. The event is a click event. We don't need the event here. And we are changing the background color as well. But we need it to be random. So how do we do that? So instead of using hex values, we can also make use of RGB for colors. So let me just do it here, actually.

Because it's already white by default. 0, okay. And that should change it to black. It does. But we want it to be random, so how do we do that? So how about we define a function that returns a value between 0 and 255. And we can just call it directly within here. With ${{ let's say getRandomRGBValue}}.

With ${}. Let's say getRandomRGBValue. And let's do the same for the other two values. So let me just copy this. And let's paste it in here. Okay. And now we have to define that function. So up here. function getRandomRGBValue. And how do we get a random value between a range?

Function getRandomRGBValue. And how do we get a random value between a range? I've done this several times in the past, so I already know it's Math.random times in this case we want 0 to 255. So it's 256 in this case. But we also want to Math.floor that. So let's say Math.floor. And again, if you're just starting out, you probably don't know that.

So let's say math.floor. And again, if you're just starting out, you probably don't know that. So you'd have to refine your Google skills and do some research to figure it out. But in this case, this should work. Let's save that. Let's say getRandomBGColor. And it does seem to work. Awesome. Let's work on our final example here,

Awesome. Let's work on our final example here, and that is our character counter. So let me just grab some CSS like we did before. Let's go to our character counter, which is right here. Character counter. Okay. Exclamation mark. Character counter.

Character counter. Let's hide this. Let's say .container. Let's put an h2 in here. Character counter. Okay. Let's run this with live server. Okay. And I just want to count the amount of characters.

Okay. And I just want to count the amount of characters within a textarea, and then display them on screen as the user types. So let's create a form here. So say form, and let's put a textarea within that. So within the form, let's put a div, say textarea.

let's put a div, say textarea. And how about we give it a name of description. And the ID can be description as well. Okay. Let's give it a cols space of 40. And let's see how that looks by default. That should be fine. So I want a character counter underneath.

That should be fine. So I want a character counter underneath. So say for example this was Twitter, and you're limited to the amount of characters you can tweet. So let's put another section in here. Let's name it with an ID of charactersCounter. Okay. And let's say characters say 0.

And let's say characters say 0 of 20, for example. Okay. And I actually want to put the 0 and the 20 within a span because we're going to be updating that. So let's put it on its own line. 0 of 20. That should be fine. This can be a span with an ID of characters.

Okay. Save that. And of course, if this were real, this would be higher. But for example, 20 is fine. So let's go ahead and define our script down here. Let's select what we need. Let's grab our textArea. So const textArea equals document.querySelector as we've been doing. It's just our textArea here.

equals document.querySelector as we've been doing. It's just our text area here. Let me just move this up. We need the element that shows our characters. So say const charactersElement equals document.querySelector. And that should be ID characters. And that should be fine for now. But we also store variables for our max characters. So const maxCharacters equals.

But we also store variables for our maxCharacters. So const maxCharacters equals. Let's just say 20 for now or for this example. And we need one for the actual count of the characters. So say let characters equals 0 to start. And this one's going to be updating. That's why I used let. So pretty straightforward here. We have to add an eventListener on our textArea. So let's start with that.

We have to add an event listener on our textArea. So let's start with that. textArea.addEventListener. We can either listen for keyup or in this case, I'll use input. Which is almost the same, but doesn't listen for certain keystrokes that we don't need. So as the user types into the textArea, let's run this callback function here. We'll use an arrow function here.

let's run this callback function here. We'll use an arrow function here. And we can update our characters. So characters is going to be the length of the textArea. So textArea.value.length. So .value is everything the user types in here. And length obviously counts that. So now we have to update this here. So let's go ahead and do that. We selected our characters element.

So let's go ahead and do that. We selected our characters element. So we can say characters.element.textContent equals characters. Let's see if this works as I type in here. Typing, it does update. It's there and it should go over. But how about we change the color as we're approaching the maximum amount of characters? So down here, let's add a check.

as we're approaching the maximum amount of characters. So down here, let's add a check. So if characters is greater than the maxCharacters, but let's subtract 10. So if it's within 10 of the upper limit, then go ahead and change it to red. So we want to change all of this to red here. So I believe I do have a container on the entire thing. So we can just change that to red. So it's called characters.

So we can just change that to red. So it's called characters. Sorry, did I say counter here? That should be container. characters.container. And we also have to select that. So let me just duplicate this. characters.container. And same with this over here. Okay, so now we can set that container to red.

And same with this over here. Okay, so now we can set that container to red if this condition is true. So characters.container.style.color equals red. But if it's not, then we can just do the same thing, but set it to a default color, which is black in our case. And now if you save that, if we reach 10 characters, then this should turn red.

And now if you save that, if we reach 10 characters, then this should turn red. 8, 9, 10. And that doesn't seem to work. And that's because this block of code should be within the event listener. So here, let's paste that in. Let me just reinvent that. And now as I type, hopefully that should work. 9, 10, and 11 should be red.

we can do another check and prevent the form submission if the number of characters is too many. Or we can just prevent extra characters to be typed in. So let's see how we can do that. Above here, before any of our code runs, let's put another conditional. Say if characters is greater than or equal to maxCharacters, then we can set the value

max characters, then we can set the value of the textArea. So textArea.value. And we can make use of the substring method to grab a piece of the string, or what's currently in there, but not add additional characters. So let me show you what I mean. Say textArea.value.substring. So grab the entire string

Say textArea.value.substring. So grab the entire string from 0, so the start of the string, up to the last character. So the last character should be max characters. So now, let's try that again. Let's type 20 characters in here. And you can see, as I keep typing, it won't let me, which is the desired result. And if we wanted to change the max characters,

it won't let me, which is the desired result. And if we wanted to change the max characters, we can just change the variable here. Let's make it smaller, actually. Say 5. Now this should work. This doesn't update because we hardcoded 20 in the HTML up here. But let's see if it works at 5. And it does. Cool. So what we can do here is leave this blank.

And it does. Cool. So what we can do here is leave this blank and let JavaScript fill it in with the correct value. So down here, we can say maxCharacters.textContent equals maxCharacters. Actually, we have to select that element first. So what I meant to do was maxCharacters.element.textContent equals maxCharacters. And let's duplicate this one here.

equals maxCharacters. And let's duplicate this one here. Let's say maxCharacters.element. And this one is maxCharacters. And now hopefully this should work. Save that. It's 5 here. We can't type more than 5 characters. If I change it to 10, that should work as well. And everything does seem to work. Cool.