![Hardware with Arduino & JavaScript](https://static.frontendmasters.com/assets/courses/2023-09-26-arduino-javascript/thumb.webp)
Check out a free preview of the full Hardware with Arduino & JavaScript course
The "Wiring Button with LED" Lesson is part of the full, Hardware with Arduino & JavaScript course featured in this preview video. Here's what you'd learn in this lesson:
Steve adds a button to the circuit that logs messages to the console when pressed. Pressing the button completes the circuit and sends the voltage to a pin. Use the wiring diagram linked below.
Transcript from the "Wiring Button with LED" Lesson
[00:00:00]
>> And with that, it is fun to make a LED fade in and fade out and blink, and yes, let's be very clear, could probably amuse us all for a solid hour. I'm thinking what we're gonna do next is add in some interaction, right now, with the computer to the board.
[00:00:19]
It's time to go the other direction, which is taking at least a very first amount of the outside world and bringing it in, which is we're gonna start out with a button, cool. All right, so let's talk about this circle a little bit. And then we will talk about what's happening.
[00:00:36]
So you look at this one is one of the ones that spans that little chasm there which is we start by sending five volts. If you look over at the bottom of that diagram, we start by sending five volts out to the button. Now again, it might go into the rail or something along those lines as well.
[00:00:53]
And then it goes to the button, which the button now will, it's kind of like a choose your own adventure. The button either will send it to the ground and nothing will make it back to the pin we're using. Or when you press the button, it connects that yellow wire up top.
[00:01:14]
All right, which will then actually send voltage back to the board. So either the board is going to get nothing cuz it's a closed loop, or it's gonna get the five volts that is sent back and receive it again, which is how it knows. Did they push the button?
[00:01:29]
Did they not push the button? Right so I'm going to wire that up a little bit as well. For the moment of truth, did I wire mine up correctly before we get too invested, Mark?
>> The way Steve connected his wires looks different than the diagram. I don't see the black wire on the right.
[00:01:52]
Does that not make a difference?
>> So yeah, I can either kind of go cuz again, the resistors are also effectively wires. So I can go over in here and then do another bridge as well. That is the same. Let me look for another little guy. That is the same as going in there it's also in the diagrams it's hard to like I can't like do the same things I can do with bending wire so we can also do this as well for ideally the same effect should look Now we're off by one.
[00:02:47]
That should give you the same effect. Assume I've got everything lined up. Yep. As long as this circuit itself makes it to ground, we're good. All right, let's find out if I messed anything up. You can move to a different like, there's also a folder called buttons. I can also write it in the same file as well.
[00:03:09]
It doesn't matter. I mostly did this for when you see that when I load in the completed ones. I'm gonna write the code here. We'll have it in the button directory. So in this case, I've got my LED. It is still currently plugged into 11 cuz I did not move it.
[00:03:23]
But now we have this idea of a button, right? And so this should be strangers to no one we do const button is new five LED button two right. Cuz I pin if again if you did not plug into two you plugged into a different pin guess what the change to the code is you change number two to whatever pin.
[00:03:47]
You plugged it into. I'm gonna get rid of that pulse code for a second. We're gonna say, we'll go with this, we'll go to button.onPress. We'll just start there. I'm also validating that I wired mine up correctly, which if I didn't we will fix, but I would like to find out.
[00:04:09]
Sooner than later. So again kind of looking real quick we pull in I'm not using the elite I mean the LED is still being loaded into there Johnny 5, I will do stuff with it in a second. But for the most part, I am mostly seeing, did the button get pressed?
[00:04:31]
And that is my kind of validation that I wired this up correctly. Button press, button press, button press oddly satisfying. It's like the first time I ever made an Ajax call and jQuery and saw something changed in the dom based on that. Made me shockingly happy. So we've got that in place.
[00:04:52]
The interesting thing to do would be to blend the two things that we have done together. Before we do that, again, I wanna just pull up the button docs real quick And you can see that there are again, different methods and events here. Use the down value. The other thing to look at is there's a few there's press release.
[00:05:16]
They do what you think they do. They have other friends known as up and down, does anyone want to venture guess what up and down mean in relation to press and release? You push the button down, the button goes up, right? And so i can swap out this code for up or down rather.
[00:05:39]
So let's see. Here we say button down. Button on up, button up, Right? I'm gonna load that code in instead Button down, button up, button down, button up.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops