LJSK – Floating Welcome Bubble 01

0:00:00
Welcome to the very first video in my new series, Learn JavaScript with Kevin. Before we get started, I just wanted to lay out some foundational stuff related to this series. Number 1, this is not like a learn from a JavaScript expert series or anything like that. I am learning JavaScript from the ground up. This is a learn with somebody,

0:00:25
not learn from somebody series. So things that I cover, things that I do, things that I say, these things may change in the future as I learn more and get better at them. But what a learn with series is good for, the value that you get from it, is one, because I’m not an expert, I have to teach from like a layman’s point of view, right? Which can be very helpful for a lot of people to make sense of things, right? When an expert is talking to them, the expert is so far removed from being a beginner

0:00:59
that they don’t realize they’re just talking over people’s heads, right? So it’s more of a lay person’s perspective. And then two, it can be more approachable because you’re watching somebody else learn and work through things. And that’s the situation that you probably happen to be in.

0:01:16
Whereas if you’re just watching an expert just fly through something, it just seems sometimes, you know, especially if they’re not good at bringing it back to the beginner land, it seems like it’s a little bit out of reach. Like, I’m never gonna get this. Look like, you know, they’re just, they’re obviously way better at it than I am.

0:01:35
And I don’t know if I can follow along or keep up. Now in my other expert content, you know, I try to always bring it back to beginner land and I try to go slow and make sure nobody gets left behind in this series. I don’t even have to try. I like, where I think,

0:01:49
you know,

0:01:50
I’m at the beginning and so,

0:01:51
you know,

0:01:52
I can’t just fly through it. I am going to work on talking through a lot of the things as best as I know. If there’s somebody else that is better at JavaScript or further along with JavaScript that wants to come in and chime in on hey You should approach it like this. You can do it better like this. This is best practice I am more than invite you to do that. We’re all Learning together in this series, right? Okay Let’s talk about my approach to learning. Yes. I do watch other people teaching

0:02:21
JavaScript, okay? What I don’t like about a lot of the courses that I’ve signed up for and a lot of the, you know, stuff that I’ve tried to do to learn it in the past is it’s not very practical. So they’re like, let’s build a calculator. It’s like, all right, fantastic. Like I can build a calculator,

0:02:43
but I don’t need a calculator, you know? I wanna know how to do the things that I need to know how to do in the projects that I’m actually working on. Or, you know, they start taking you through all this philosophy of JavaScript. This is a, this is a, this is a, this, and it’s not within any context of practical application. For me, it’s hard for my brain to connect to that, right?

0:03:03
The way that I learned best, and maybe the way that you learn best is we have something we want to accomplish that we would need to do in real life. Now let’s do that. And as we do it, let’s start out with something very small and basic. That’s what we’re going to do today. And as we do that, break down the concepts, teach the concepts that are important for that thing and break them down so that we can remember them and put them into practice next time and understand the philosophy, right?

0:03:33
But we’re actually building something useful. All right. Even if it’s a small, little, simple thing, like what we’re gonna do today, this is the process that I prefer, okay? All right, now, rules, two rules, I say, and I’m gonna follow these rules as we go through the series.

0:03:52
Number one, never copy and paste code. I’ve said this before, do not copy and paste code. So you’re not gonna see me copy and paste any code. Even if you’re given the code somehow, some way, right, which we’re going to talk about in just a second, do not copy and paste it. Force yourself to write it and force yourself to work to understand exactly what is going on in that code. Number two, if you’re going to use ChatGPT, which I am not opposed to, I am going to use

0:04:24
use it. I do suggest you use it in a very specific way. Two specific ways, actually. Way number one, and what you don’t do, there’s a rule. You do not ask, let’s say that you want to, you know, make JavaScript do something, right? Don’t ask chat GPT for the code, for the solution, okay? Start to work out in your head, all right, here’s what we would need to do with step one, right, I think, which you’re gonna start to put this stuff together very fast. Here’s what we need to do for step one. I’m not quite sure how to do that first step right here.

0:04:58
Ask Chad GPT for that specific thing. Don’t ask Chad GPT to solve the entire problem for you, okay? You work through the problem and let Chad GPT help you with specific areas. Second, if there’s something that ends up happening in the code that you don’t quite understand, it’s, ChatGPT is amazing for like, copy that little part, put it in ChatGPT,

0:05:22
and say, explain this to me. How is this working? Why is this working? Is this the best way to do it, right? And just see what ChatGPT says, and ChatGPT can kind of be your teacher in that regard a little bit. Now I’m not saying that ChatGPT is 100% accurate or amazing

0:05:40
or is the best to learn from, right? But it can be all you have. If you don’t have a personal mentor sitting there that you can ask, then I guess that’s the next best thing. And you’ll, again, learn as you go, okay? So those are the rules, that’s the process. Let’s take a look at exactly what we are going to work on today.

0:05:59
So I’ve got a little floating bubble down here. It just sticks to the bottom right-hand side of the screen. What I need to happen is when somebody clicks on that, we open a welcome message and it’s got a little CTA in it, join my list. I think this is a really cool little thing to add to websites, especially if you’re a personal brand. So I will be deploying this on my website.

0:06:27
It can be used for a lot of different things. It can be used for a CTA, it can be used to make an announcement, it can be used for whatever, okay? I’m gonna call this a welcome bubble, all right? We’ll call it a welcome bubble. And what we need in terms of the JavaScript side of this is getting this to appear on click, right?

0:06:47
So if I click this, I need this message to appear. And then if I click it again, I need the message to disappear. How are we going to approach that? Like I said, very small, simple, little practical application of JavaScript. Now, there’s probably gonna be a part two to this because there’s other things like when it opens,

0:07:09
we’re talking about accessibility, when it opens, we need to maybe like hit escape on the keyboard and get it to close, right? Or we maybe need a close button in here that then closes it. Now I’m using the button to do the same exact thing, but this presents another challenge, right? Number one, to be accessible,

0:07:27
it needs to have some ARIA stuff going on to announce that, hey, there’s a window that was just opened and then it needs to focus on the first focusable element inside of that screen that just came up. And then when we close it, we need to return focus back to the normal website in the proper order. And there’s all this stuff.

0:07:50
There’s all this, something so seemingly so simple now has all this complication involved. And a lot of that is gonna require some JavaScript. And so that’s where we’re gonna start. We’re gonna start with this thing and see if we can build it. So I am starting from a blank slate.

0:08:06
The first thing I’m gonna do is I am going to, no, we’re not gonna add a section. We are going to add just a div. So I’m gonna go ahead and add a div, and this div is gonna be called welcome bubble, okay? Welcome bubble. And then inside of my div, we go look at this. We obviously need our avatar, okay?

0:08:26
So inside of my welcome bubble, I am going to add an image. And I’m going to wrap that image in a figure tag. So we’ll go HTML tag figure. And I’m not going to do any styling yet, all right? We want to get all of our pieces in place, then we’ll do the styling and the classes and all of that. Next thing that I need to do outside of the image is I need to add a block. This is going to be for our message, right? So we have a welcome bubble and then we have a message inside of the welcome

0:08:56
bubble,

0:08:56
which seems odd that your message is inside the welcome bubble when visually the message seems to be outside of the welcome bubble. But remember this welcome bubble is literally just a wrapper that contains the whole situation that we’re building so that it’s a self-contained piece. We don’t want two pieces to manage. We want one little, again, thinking components, we want one little component thing that we can add to a page and it’s self-contained,

0:09:26
it’s got everything it needs, including the code, okay? So we’re gonna be good to go there. All right, so we’ve got a message. Inside of our message, we’re gonna have a heading, we’re gonna have text, and we’re gonna have a button. Now I’m gonna put the message first in the DOM and we’re going to add a heading to it. We’re going to add rich text. I think it’s the better way to go here. And then we’re going to add a button which is really just a link.

0:09:48
Okay, this is going to say call to action. And then I’ve got this text right here that I will drop in. Perfect. And then our heading says this for now. OK, and you could even use like custom fields to change the message per page and you do a lot of fancy stuff, but we’re just going to start simple. We’re just going to work our way through the problem. OK, so I’m going to select my headshot here. Will put that in fantastic and now what we’re going to do

0:10:19
because we’ve got all of our pieces in place is we’re going to add classes to everything now. So I’m gonna use Auto BIM. I’ve got welcome bubble, message, heading. We’ll call this the message text, all right? I’ll call this the message heading and I will call this the CTA. We will call this the avatar

0:10:43
and I’m just doing my labels in here. Sometimes that’s easier and faster. I’m gonna sync the labels over to the structure panel and let’s just go ahead and hit apply. You’re going to see how automatic CSS makes so much of this a lot easier, especially just in terms of getting everything BIMified and styled and all of that. Our avatar, let’s just go ahead and handle this,

0:11:09
because it’s obviously out of control right now. We’re going to do an aspect ratio of one, and then we’re going to go down to our width, and I’m going to do something like 80 pixels, let’s do like 75 pixels. Now, if you want this, I can do CTR and hit enter, it’s going to convert that into rim.

0:11:28
Sometimes rim is a little bit better to use in these situations, because if the person wanted to increase their root font size of this website, the bubble would get a little bit bigger as they did that, right? And maybe that makes sense to have happen. If you don’t want that to happen, then use pure pixels, okay?

0:11:47
We’ve been over all this stuff before. The next thing I wanna do is I want to use a radius, right? Now I can use a circle radius from Automatic CSS to get my circle using the context menus, that’s super easy. So our avatar part of this situation is really good. We need this heading to be an h2 but we do want it to be the size of an h3 right so I’m going to right-click and I’m just going to choose h3 from there. As far as this text

0:12:16
goes I would like it to be S. And then what we’re going to do is take that message, this is the message inside the welcome bubble, and we’re going to add some padding to it. I think I’m going to go with L and we’ll do that on all sides. And then we need a gap. Okay. So we’ll do row gap and we’ll do our content gap. And then I just want to probably divide that by two. It’s going to auto wrap it in the calc and that’s looking really, really, really good. Okay. Now the welcome bubble, I do want this to display flex.

0:12:45
We do want it to be a column. And what we’re going to do here is we’re going to set the width on it. And I’m thinking, let’s go with 300, 320, 360. Let’s do something like 360 on this. And I’m wondering if we should do this on the entire welcome bubble or if we should do it on just the message itself. If it ends up being a problem, we can make some changes. I don’t know the best way yet.

0:13:21
We got to work our way there. All right, what I want to do is I want to position this fixed so that it’s positioned according to the browser window. So I’m going to go down to position fixed. And then what we’re going to say is from the bottom, let’s go zero. And from the right, let’s go zero. And that’s gonna put it down in the corner. All right.

0:13:42
The next thing that I wanna do, remember this is all self-contained. Yeah, this may be, okay, I think we’re all right. I think we’re all right. Let’s go align self on this avatar. All right, where did it put my flex controls? Here we go, align self, let’s go to the end. In fact, actually, hmm, oh, you know what?

0:14:06
You know what I wanna do?

0:14:07
Welcome bubble message. I wanna position the message absolute. So let’s take it out of the context of this. So let’s go position absolute, and we’re going to go right zero for now. Okay. And now it’s kind of behaving independently of the whole wrapper.

0:14:34
You see what the whole wrapper is doing. And in fact, in this position, I don’t even think I need a width on the, on the wrapper really just positioning the avatar at this point. And now, because the message is position absolute, it can kind of behave on its own. And so I’m gonna go 360 pixels here,

0:14:57
and you don’t have to put pixels in Bricks, it’ll put pixels for you automatically. And I think if we just remember now that because this wrapper is so small, the message, Bricks puts a max width of 100% on everything. That it doesn’t, you know, you wouldn’t know that unless you really inspected what’s going on. So this confuses a lot of people a lot of the time.

0:15:16
You just have to override that max with 100%. It’s actually, this is the wrong way. Bricks does it the wrong way in this case. And it’s a little bit problematic, but there we go. So now what I can do is we’ll take our welcome bubble and instead of being fixed zero, zero, we just need to decide what kind of gap we want away from the edge.

0:15:36
I am just gonna go ahead and use a content gap. I think you know that it probably makes sense. It does the trick, right? You know, let’s not overthink it or over-engineer it. Now let’s take the the welcome bubble message and let’s give it a background color of white. Let’s give it a box shadow so that we can actually see the edges. All I have to do really here is go add, if I can do the right brackets, okay? We’ll do box shadow of box shadow m. There you go. And let’s see if we have, okay?

0:16:17
Let’s close that. Yeah, we’re starting to get it. Okay, let’s go ahead and add a very faint border to this. So we’re gonna go one on all sides. We’re going to go solid and let’s go for neutral light trans 20 and see what we get there for a border. Okay I don’t actually see that border. Uh maybe we need to go let’s do neutral dark. Let’s do neutral dark trans 20. Maybe we need to do trans 10. We’ll see. Just kind of there we go that and that’s too much. That’s too much. Okay, so neutral dark trans 10. All right, save and refresh. There you go. Okay. I’m liking that now. We need a little bit of a radius on it.

0:17:03
Uh, so we will go to border border radius and sometimes I like to just link these before I choose And i’ll just do radius m and that way it’s all set and ready to go. Now look where it’s positioned. What I need is it to be up here on above the, above the avatar, right? So I think what I need to do here is I kind of need to know the, no, I can do, let’s go get the message. Let’s go lay out. And maybe if I do top zero, no, that’s gonna, that’s gonna do that.

0:17:39
Top 100%, no, bottom 100%. Bottom 100%, there we go, bottom 100%. The dyslexia really helps in this situation, by the way. I actually don’t wanna come over from the right anymore. I just wanna go up 100% plus content gap, right? So let’s just do plus and content gap and hit enter. And now we’re good, okay? So fantastic.

0:18:01
Now let’s go look at this on the front end. Great, so Well now I’m seeing we need the button. Okay, so we don’t want to leave the button like that. Let’s just do button primary Okay, great and then you know this situation where I actually want a little bit more of a Space between the button and everything else that’s where I’m going to use the welcome bubble CTA class. And I can just choose like S something like that. And just gives me a little bit of, you know, I, it’s not perfectly even spacing.

0:18:34
It’s a little bit extra boost in our margin on that, on that button. Okay. All right. Kind of sets it apart, right? Okay. We are doing really, really, really well. What we can start to think about now is the JavaScript portion of all of this. And so what we need to think about is number one making this avatar a button right because we want to be able to focus on the Avatar we want people to be able to click on it

0:19:00
Okay

0:19:01
and so what I need to do is actually wrap this in a div and the div is going to be called a button and I need to do a class on that of welcome bubble double underscore button. So now that has a class on it. And because buttons come with default styling, I’m just going to go in here and say transparent backgrounds. I’m going to make sure there’s no values for margin and padding. Sometimes if there are,

0:19:29
you have to zero them out. Okay. So now let’s go hover this. All right. Oh, I didn’t change it to a button. So the HTML tag needs to be button, okay. And I’ll leave it as display block for right now. Let’s go back, make sure nothing was added, nothing was added, okay. So we now should see that the pointer indicator,

0:19:55
there you go, to show that it’s actually a button and it’s a clickable element. And now we’re gonna open up the inspector and we’re gonna go into the console and we’re going to be kind of back and forth between elements and console right. Console is going to come in handy as we’re looking at JavaScript stuff perhaps if we have errors and things like that. But this is going to help us figure out you know this inspector right here is going to help us figure out are the JavaScript things that we’re programming in here are they actually happening, right? Because if you can’t see anything visually, then you need to know,

0:20:31
but is anything happening to the code, right? So that’s where the inspector is going to come in. So let’s start to talk through what we want to have happen here. First of all, I am going to go hide because we want this to be hidden by default, okay? So I’m gonna go to the message and you can actually do this on the class,

0:20:50
not on the class, doesn’t matter. We’re going to use an attribute here, and we’re going to use the style attribute. If I set the style here to display of none, just like this. Now we go back on the front end and we refresh, and it’s gone. Now, why is it gone? These are the parts that I’m going to talk through. CSS style display none in the DOM right there,

0:21:13
that’s called an inline style. We’re not doing a whole intro to CSS course, but that’s what’s telling that message to display none. Now, the thing about JavaScript here is I can use JavaScript to change the style instruction from display none to display flex. Okay, how are we going to do that? So what I’m gonna do is I’m gonna go over here.

0:21:34
I’m gonna go to my welcome bubble. So there’s my code right here. It can stay saying code, all of that’s good. I’m going to hit execute code, I’m going to hit render without wrapper. Then you’re going to see this new, this is new in Bricks, the sign code functionality.

0:21:55
This is a security feature for these code blocks, which is really, really, really good, really nice to have now. I’m just going to remove the example code here, remove all of this. So we’re starting with a blank slate. If we want to write JavaScript here, we’re going to start with script tags.

0:22:11
Okay, so we’re going to put our script tags in. Now, the way you can write comments in JavaScript is with a double forward slash like this, and you can put more of them if you want, but a single obviously won’t work. I’m going to at least do a double here, maybe set a standard for yourself. Do you want to use twos, threes?

0:22:28
I don’t know if there’s a set standard. Maybe it’s something you should look up. And I just use these comments to explain to myself what we’re trying to do in each part of the script. You don’t have to use these. It’s up to you, it’s up to you, all right? But the first thing that I wanna do is, and you could do this two ways as far as I know.

0:22:51
You could just start targeting things or you can create variables and then use those variables throughout your script. Now, again, as far as I know, and you’re gonna hear a lot of the as far as I knows and I wanna remind you and bring you back, this is not a learn from expert series. This is a learn with series.

0:23:09
You’re learning with me, all right? So what I’ve learned up to this point is there’s two primary ways to create a variable in JavaScript. You can say let, like let this, I’ll come down here, so we’re gonna say create variables, okay, for our elements that we’re gonna target, and you can say let and then name the variable.

0:23:29
Now, in SAS, you put a dollar sign in front of your variable names, and I believe you can do that in JavaScript, but you don’t have to, right? So I want to target two things. There’s two things that we’re gonna, that need to kind of interact in this script, right? The button right here and the message, okay?

0:23:50
So the button and then I believe, the button and the message, yeah, because when we click the button, right, we need to do something to the message. So we’re gonna say, let message, and we can say welcome, we’ll say welcome message equal, and then we need to identify that,

0:24:09
like find it, select it. How do we select something in JavaScript? Okay, well, there’s something called query selector, and then you can also do query selector all. So what query selector does, let me write it like this, I believe it’s queries, I’m trying to do this from memory, right?

0:24:27
This is part of learning is like forcing yourself to, you know, when you’re learning typing, don’t look at the keyboard, don’t look at the keyboard, don’t look at the keyboard, right? You gotta remind yourself. When you’re learning JavaScript or CSS or SAS or anything, I constantly am reminding myself, HTML, whatever. Don’t look, don’t look, don’t look, look,

0:24:44
look when you have to, but don’t look constantly, right? Okay, so let welcome message equal query selector now. There’s a query selector all as well The other thing I want to pause and show you is What this is called this case that we’re using where it’s like a lowercase first word and then everything else starts with a capital letter this is called camel case and this is seems to be the Siri, chill out, dog, chill out.

0:25:09
Okay, nothing’s gone wrong yet.

0:25:11
All right, man, she has no faith. So camel case is like the way to go in JavaScript. I believe you can use underscores as well, but the kebab case thing, where it’s like, you know, that we commonly do in CSS, the dashes is a no-go in JavaScript. And this is one of the hardest parts about going from like language to language to language

0:25:33
is like syntaxes, right? Getting the syntaxes all straightened out in your brain. But Query Selector All will basically select every kind of that thing that you’re asking it to select, whereas Query Selector by itself will only select the first instance of that thing. So in this case, there’s only one button and there’s only one welcome message, right?

0:26:00
And I’m selecting these things by their class name. Uh, and since there’s only one of them, it’s going to select the one that we want, hopefully. Right. So I’m going to use quotes in here. Now the single quotes versus double quotes thing. As far as I know, it’s okay to do it either, either way. I don’t know if there’s an advantage one way or the other.

0:26:17
I’m sure we’ll figure this out as we go.

0:26:18
All right.

0:26:19
So what are we going to select? Well, this is where having the Dom open helps us, right? First thing I want to do is select the button, right? Which is the welcome bubble CTA right here. Okay, so I’m going to copy that to my clipboard and I’m going to say, hey, oh and this is actually welcome message, so we got to be very careful of what we’re doing here. Let’s go make sure we’re actually selecting the message. So right here you see welcome bubble message. All right, I’m going to paste that in. We do need the dot, I believe.

0:26:51
So I said let welcome message equal welcome bubble message. So now I’ve essentially taken that DOM element and I’ve assigned it to this variable, this token. So I’ve tokenized that element. Now, I need to create another one. So I’m just going to copy and paste. By the way, we started to talk about let and const. Const is the other one like this.

0:27:15
So let is a variable which its value may change, will change in the future, right? Whereas const stands for constant. So its value is not going to change in the future. Again, this is just the way that I’m understanding things so far. Okay. Correct me if I’m wrong. Now, I’ve looked at the opinions of a few people, and it suggests that you should use const almost always,

0:27:44
and then use let when you need to use let, okay? But const should, I guess, be the default, right? Okay, so we have const welcomeMessage, and then we have const welcomeMessageButton, okay? Welcome, yeah, welcomeMessage, welcome, welcome, welcome button. Okay, welcome, yeah, naming things is hard, okay? We’ll just do welcome button to try to keep this as simple as possible. All right, so what are we gonna select here?

0:28:16
Well, we’re gonna do the welcome bubble button, which we can double check and make sure that that is welcome bubble, ooh, it’s CTA, see? If you give it the wrong things, it will not work. So it’s very, very, very important to do this stuff right. Okay. Next step is we want to listen for the click. We need to listen for a click on what on the button, right? So I’m going to say welcome button. That’s why I tokenize this. Cause now you can just say, all right, here’s my token,

0:28:45
my thing that I want to do something to. And the thing that I want to do is I want to add an event listener. And so in JavaScript, you know, as far as again, as far as I can tell, when you want to do something to that thing, you put a dot and you attach the behavior to that token, right? So I’m going to say add event listener, and then I’m going to do parentheses. And again, I haven’t nailed the context for all of this. We want to do click, right?

0:29:14
And then I’m going to reference over here one thing, click, yes, that is correct, okay? And now I want to write a, and this is going to be called an anonymous function. So notice we’ve named some DOM elements, right? As tokens. Well, you can name a function or you can just use what’s called an anonymous function,

0:29:36
which is just a function, but the function doesn’t have a name, right? And so we’re gonna say function, and then we are going to do double parentheses, we are. All right, and then we are going to open our curly braces, and we’ll bring this down here. And then I believe what we’re gonna do is need a closing on our curly braces,

0:29:57
and then an end to this line, okay? I just tried to get all the syntax like, you know, correct before we really go any further here. So I have the welcome button I’m adding an event listener the event listener is a click and then we’re going to start a function and now what we want to do is we want to say so on click is basically what we’re saying right here right we want to do something to the welcome message now so we’re just going to call our token welcome message and we want to style that welcome message,

0:30:28
and the style is going to be display. So we’re putting the display property in the style tag, and then we’re going to say what’s the value of that property, the display property or the value of the display property needs to be flex when we click the button. That’s essentially what’s going on here. So it’s listening for a click. And when there’s a click happens, it’s going to execute this anonymous function

0:30:55
that basically does this, it adds a style tag to the welcome message with display equals flex as the, you know, value. I think I think we’re gonna find out right now. Okay. So now in bricks to proceed, you need to sign code every time you’re finished with it. Every time you make changes you have to sign it. Okay so now I’m gonna go back to the front end we’re gonna hover over this I’m gonna click and nothing has happened nothing has happened. So now I’m gonna go to the console. Oh uncaught reference query selector is not defined. Okay query selector is not defined. Alright let’s look at this here.

0:31:39
Query selector is not defined. Welcome bubble message. Okay, welcome button. All right, welcome button, welcome message. All right, I’m just looking to see if there’s any obvious errors here. So now what’s helpful for chat GPT now is you can go over here is where we’re going to bring chat GPT into the mix. Is this JS correct?

0:32:06
Just paste it in. The JavaScript snippet you’ve shared has the right idea. This is a crucial detail on accessing the query selector method. It’s document.querySelector. That’s correct. We have to tell it where the query selector lives, and it lives in the document. We’ve made a small error here. Now I’m going to refresh and I’m going to click and I still get nothing. I still get nothing and we can look and see when I’m clicking nothing is happening. I checked the console. I’m

0:32:40
actually not getting any console errors now. Oh I did not sign the code guys. There’s an extra part of Bricks that I’m not used to. I’ve got to sign that code. Okay. Still nothing. Still no console errors. Okay. All right. Let’s bring it back to chat GPT. What about this? Yes, the corrected JavaScript snippet is now correct and should work as intended. Document query selects a select elements from the DOM, attaches a click event listener, welcome button. When the button is clicked, the style of welcome updated to change its display. Okay. Welcome bubble message. Welcome bubble CTA. All right let’s go make sure that our DOM elements are being targeted properly. Okay. Welcome bubble button. Oh wait where did I get CTA from? It does it

0:33:34
is button. Wait a minute, when did I change this to, I thought we had CTA going. Okay, so yeah, if you get the classes wrong, you’re obviously going to be wrong. Okay, save, sign the code. Now let’s go to the front end. Hey, and we’re working and look,

0:33:55
you can see it happen right there. Now, if I click it again, nothing’s going to happen and this is the next phase of what we’re going to do with the JavaScript here, okay? But watch this display none right here when I click it, it changes to display flex. And because it’s display flex, now we see the message.

0:34:12
Now, the problem is, it’s not being told like, well, what happens on the second click? Like the next click, don’t we have to change it back, okay? So now what we can introduce is some logic. If this is happening, then do this. Else, it’s called an if else statement, else do this. Okay, so I’m going to copy this, right, and I’m just going to say if, and then we can put else below it. All right, this is the way I’m trying to make sense of this stuff with I can say if welcome message dot style equals style dot display equals none.

0:34:57
Okay, then I can do something else. I’m going to do something else. So if welcome message, so we’re checking the welcome message, essentially to say, hey, if you’re already displaying none when this button is clicked, then let’s go ahead and switch it to flex. Else, right, let’s go none. So if it’s anything other than none, then change it to none,

0:35:25
because we want it to go away when the button is clicked. Let’s see if that does anything. Okay, so I’m gonna hit save. I’m gonna sign the code, excellent. And we’re going to refresh. Now I click it, oh, and now we’re not getting, now we’re not getting any functionality at all. If welcome message style is display none, okay well let’s just have chat GPT check us now, right. Please check this code. Whoops I hit enter. Please check,

0:35:55
let’s stop it. Please check this code. Okay, a couple syntax errors. Ah, yes, yes, yes, yes. Okay, so the equals part of it.

0:36:11
Yeah.

0:36:12
Okay. So we need to use this corrected, the if condition syntax and use the strict equality operator for comparison. Okay. So if welcome SSL equals display none, we put three equals in there, okay? Now, you can learn a little extra here. It says, use the strict equality operator. Instead of using the assignment operator,

0:36:37
which is like assigning a value equals, right? You should use the strict equality operator for comparing the two styles together. That checks both the value and the type, making it a safer choice for comparisons like this. Okay, let’s save, let’s sign the code, and let’s go back to the front end. Okay, oh, unidentifier, unexpected identifier,

0:37:01
welcome message. Okay, if welcome message style is display, all right, let’s see if it works. I don’t know, yeah, it’s not going to. Okay, unidentif, okay. Let’s say that equals none. Okay, let’s ask chatgpd to check it again. Almost correct but changed the syntax error

0:37:21
in the if statement.

0:37:23
The if must be closed in parentheses. Aha, see that’s a different syntax from SAS, right? And this is where it gets hard, like you can pretty much just do this in SAS, whereas in JavaScript it’s like, nah sir, you can’t do that. Okay, so we’re just gonna wrap those in parentheses. Let’s refresh. No console errors. Oh, I got to sign the code though. Okay. Any console errors? No console errors. Oh, look at that. Look at that. Display flex and now, now the moment of truth. Back to display none.

0:38:05
So we now have, look at that, a working button. That’s displaying and hiding things. Okay. This is fantastic. Fantastic. All right. And we’re learning. We’re learning as we go. All right. Now, obviously there’s more things to do. I want to do a little bit of CSS stuff to close this out.

0:38:22
And then we’re going to be done with this lesson. I think we’ve done enough. Okay. If your brain is hurting and you want to take a break congratulations we’re about to take a break all right but what I’m going to do is come over to this button here the avatar and on the avatar I am going to add a outline okay so we’re gonna say outline and we’ll do two pixels solid primary okay and we’re gonna do an outline offset of two pixels We’re gonna save and we’re gonna go back to the front end and there you go with our little outline there

0:38:55
And then what I want to do is on the button hover. All right, so root hover. I want to target the Avatar so the welcome button. Yeah. Okay. How are we gonna do this to just use root selectors. Okay, I got it. Let’s move this. Let’s go to the parent element. Welcome bubble. Best to, usually best to just do this at the parent element level. And we’re going to say avatar. Okay, and that’s going to get me my outline. Let’s just make sure that that didn’t break. Okay, so um root button and root button hover. So when we hover the root button um we’re going to do something to the avatar. What are we going to do? We’re going to do outline offset and we’re going to go to six pixels. Okay now let’s go check that. There you go.

0:39:54
And now all we have to do is transition that. We’re going to transition the outline offset by 0.1 second even out and just see that gets us what we want. Nice. Very smooth. Okay. I also want that to happen not just on hover, but on, uh, let’s, let’s, how are we, how are we going to do this? Okay. Let’s also try some nesting here. Okay so root button let’s try some nesting. Let’s come down here and say hover and active which is basically like on click hover and active and then we can actually come in here and say we’ve got to do we’ve got to do the ampersand and then we have to do root, which the root shortcut doesn’t work when you’re nesting for some reason in Bricks. All right, we’re going to do root avatar.

0:41:02
Then we’ll do outline six pixels. This is vanilla CSS nesting here, just starting to experiment with it and play around with it and such that is clearly not working and hover active Okay, and I wonder if it’s because it looks like it’s because of this Dynamic root selector may not work in the situation Let’s change this to welcome button avatar and just see if that does it and maybe no now. I don’t know what I’m doing wrong there And I don’t honestly I don’t have time to look at it

0:41:45
So we’re just gonna do it the old-school way all right so a root button hover. Let’s go back to the way we were What we did is we went outline offset of six pixels All right, and let’s make sure it’s not really working in the okay. What what has happened now oh yeah yeah I’m sorry you got it you got a target the thing okay root now now now I’ve officially broken my brain at this point so we got to do the avatar because that’s where that’s where our outline is there we go now we’re back to normal and now we just want to say okay also do this when we’re active right and now when we click this, actually I’m sorry, no we’re not going to do that. We’re going to do it backwards. It’s got to go backwards. So we’re going to take this

0:42:33
and we’re going to say root button active. This is going to go back to two pixels. We’re going in reverse when we click it. So because it’s going to go out when we hover it and then when we click it, see it? See when I’m holding it down, holding the button down, it goes back in. And when I fast click, it just gives me a little bit of like a, not haptic touch, right? But you understand, right? It like shows the person

0:42:59
that they’re actually clicking it, okay? And our JavaScript is all working and we’re good. So what we have to do now is it’s got to focus on the first and we’re going to do this in a different, it’s like the next lesson or whatever, okay? So got to focus on the first focusable element, which means we have to find the first focusable element, identify it, and then focus on it. Then we need to add a escape key to close this thing.

0:43:22
And we need to maybe make focus go back and forth between these two buttons. I’m not sure. That would kind of like trap focus. I think that’s what we’re gonna do. We’re gonna have to trap focus inside of here. So until it’s closed, and then when it’s closed, focus can freely go wherever it wants on the page. We’re gonna have to add some ARIA attributes and things like that so the person knows when the thing is open and when it’s closed and okay so we’re gonna save all of that for a follow-up. I’m gonna go back to camera here let me see if I am indeed back on camera. I am okay good. Man did you find this valuable? Is this helpful? Should we continue with this series let me know this was like the

0:44:04
first episode the first experiment okay if you don’t find it helpful if you don’t like it we won’t continue doing it if you do find it helpful voice your don’t like it we won’t continue doing it if you do find it helpful voice your opinion down below and that’s it love you guys peace