Styling Elements

As you know, you can set inline styles on an HTML element with the style attribute. 0:00 The style set in this way override those set with external style sheets. 0:04 Just as we saw with other attributes, 0:09 inline styles can be set on an element with the style property. 0:11 However, unlike most other attributes, the style property itself is an object. 0:14 The properties on the style object represent the various CSS 0:18 properties we can set. 0:21 So let's look at this in the console. 0:23 Remember, the P variable is available here in the console. 0:26 And it's a reference to the description paragraph element 0:29 because it was declared earlier in app.js. 0:32 So let's have a look at its style property. 0:35 Over in the Console, I'll type p.style and 0:37 if you open this up, you can see all the style names. 0:41 So here's background, border, color, and so on. 0:44 And you'll notice that none of these styles are set. 0:49 But just looking at the paragraph, 0:52 it appears to have some styles applied to it, right? 0:54 Well, remember, these properties only refer to the elements in line styles. 0:57 Not any CSS rules that might be applied from a separate CSS document. 1:01 So as a result, you can't rely on these properties to know 1:06 how an element has been styled, unless you set them here yourself. 1:09 The style objects properties are generally used as setters and not getters for 1:13 this reason. 1:17 So let's try a few out, p.style.color = 1:18 'darkblue' changes the text color to dark blue. 1:22 And p.style.backgroundColor = 'lightblue' 1:27 changes the background color to light blue. 1:33 Now, one common use for setting style with JavaScript is to hide and 1:38 unhide elements on the page. 1:43 So let's set up a button that will toggle our description paragraph text field and 1:45 list in and out of view. 1:50 Switching over to index.html, let's add a button 1:53 below the first paragraph and give it an ID of toggle list. 1:57 And we'll make the button say, Hide list. 2:06 Then since we want to hide this paragraph text field button and list as one unit. 2:08 Let's wrap them in a div and give it the class list. 2:15 So now, over in app.js, let's select the button in div, we just created. 2:34 And I'm going to put my new constants at the top of the file to mirror where they 2:39 appear in the HTML. 2:44 The new button and div appear above the list. 2:46 So I'm going to declare these at the top of the file. 2:50 First, we'll say const toggleList = 2:54 document.getElementById('toggleList'). 2:59 And right below const listDiv 3:09 = document.querySelector. 3:15 And then, we're going to query the class list. 3:21 You also notice, that I'm using two different selector methods here, 3:25 just for practice. 3:29 But in a real project, keeping it simple is probably a good idea. 3:31 So for example, if you've decided to use querySelector, 3:34 it might make sense to use it as often as possible throughout your code base. 3:38 Right now, we'll need to add a click event listener to the button. 3:43 So right below my constants say, 3:47 toggleList.addEventListener, Pass in click and a function. 3:50 So when the toggle button is clicked, we'll want to hide listdiv. 4:07 And we can do that by setting its display property to none. 4:11 So in the function, we'll type listDiv.style.display = none. 4:14 All right, so let's save this, go back to the browser, and refresh. 4:27 And clicking the button, we see the description paragraph and 4:33 list disappear, so great. 4:36 Clicking it again, though, we see that they don't come back. 4:38 So we'll need to do a little more work with the event listener to make our 4:41 toggle button completely functional. 4:44 Let's look at the code again. 4:47 So when this function runs, we want to show the list if it's hidden and 4:49 hide the list if it's visible. 4:55 So notice, I used the word if, so this is a perfect case to use a conditional. 4:57 So let's start by adding if and else statements to the function. 5:02 First, I'll say if. 5:06 ListDiv.style.display = 'block'. 5:12 And then, right below, we'll say, else listDiv.style.display = none. 5:23 So now, the function will either show or hide the list. 5:30 So what condition should the if statement check to decide which code block to run? 5:34 Well, let's use the div element's display property. 5:41 Since our function here is managing the inline display property, 5:44 we can rely on the value it returns. 5:47 So in the condition, I'll add 5:49 a listDiv.style.display 5:51 = none. 6:00 So now, if the display is none. 6:03 It will be set to block, otherwise, it will be set to none. 6:06 And let's just add a little more here. 6:11 So first, let's change the button's text depending on whether it's hiding or 6:13 showing the list. 6:17 We can use text content for this. 6:19 So the first in the if condition, we'll say, 6:22 toggleList.textContent = 'Hide list'. 6:27 Then inside else, we'll add toggleList.textContent 6:36 = 'show list', all right? 6:43 So let's save our file and try it out in the browser. 6:47 I'll go ahead and refresh the page. 6:51 And click the button and we can see that it works both ways now. 6:54 You can see that the button changes text to tell the user what it does, hide list, 6:59 and show list. 7:03 But there seems to be a problem. 7:04 Notice, how the list description paragraph is getting erased except for a colon. 7:06 That's kinda weird ,right? 7:11 Well, something is wrong with the code we've written. 7:12 The problem is a little tricky but can you figure out what's going on here? 7:15 Feel free to pause the video and figure out what the problem might be. 7:19 The colon is a clue. 7:23 Now, don't worry, if you didn't get on your own. 7:27 As I said, it was a tricky problem. 7:29 But remember, how I said the colon was the clue? 7:31 The problem turned out to be that both of our click event handlers, we're firing. 7:35 When we click the show and hide button. 7:40 So the second handler replaced the list description with 7:43 what was in the text input. 7:47 So if that input was blank, which it was. 7:50 The paragraph's text content was replaced with an empty string, 7:52 with a colon appended to it. 7:56 So in other words, it was replaced with just a colon. 7:58 So why were both handlers firing? 8:01 Well, remember, how query selector selects the first element it matches in the DOM? 8:04 When we added the show/hide button, above the other button. 8:10 That became the first button element in the DOM. 8:14 This constant of button that's declared here on line five 8:17 is being assigned to the wrong element. 8:22 So now, that we have two buttons on the page, this line should be more specific. 8:27 Better specificity reduces bugs but also helps make our code more readable. 8:31 Now, since the element we want to target has a class of description, 8:36 let's add that into the selector. 8:40 And while we're at it, let's add the class to the input, as well. 8:44 That will make it obvious, that these three declarations are grouped together, 8:51 just from reading the JavaScript, all right? 8:54 So now, let's switch back to the browser, refresh, and make sure it all works. 8:56 Great, it does. 9:03 All right, so in the next video, 9:04 we'll look at how we can create our own elements from scratch. 9:06