1 00:00:00,540 --> 00:00:05,007 You've learned that you can set inline styles on an HTML element with the style 2 00:00:05,007 --> 00:00:06,150 attribute. 3 00:00:06,150 --> 00:00:11,100 The styles set in this way override those set within an external style sheet. 4 00:00:11,100 --> 00:00:15,630 In most cases, you'd style elements directly in an external style sheet. 5 00:00:15,630 --> 00:00:19,971 But there will be times when you'll use JavaScript to modify element styles in 6 00:00:19,971 --> 00:00:22,878 response to some user interaction, for instance. 7 00:00:22,878 --> 00:00:25,693 Like most other attributes, you can get and 8 00:00:25,693 --> 00:00:30,850 set the inline style of an element in the DOM with the style property. 9 00:00:30,850 --> 00:00:35,295 However, unlike most other attributes, the style property returns an object 10 00:00:35,295 --> 00:00:39,510 containing a list of all the CSS style properties you can set. 11 00:00:39,510 --> 00:00:40,885 Let's look at this in the console. 12 00:00:43,195 --> 00:00:46,975 I'll type our btnUpdate variable that's declared in app.js, 13 00:00:46,975 --> 00:00:51,180 which holds a reference to the page's update heading button. 14 00:00:51,180 --> 00:00:55,080 To access its style property, I'll type .style. 15 00:00:56,170 --> 00:01:00,570 This returns a CSSStyleDeclaration object. 16 00:01:00,570 --> 00:01:05,518 Expanding it displays all the style related properties, like background, 17 00:01:05,518 --> 00:01:09,370 background color, border, and a whole lot more. 18 00:01:09,370 --> 00:01:14,118 Notice how all property names with two or more words like backgroundColor, 19 00:01:14,118 --> 00:01:17,950 backgroundImage and borderColor are in camelCase. 20 00:01:17,950 --> 00:01:22,886 This is different from how you'd write them in CSS with dashes between each word. 21 00:01:22,886 --> 00:01:26,469 JavaScript's core methods and properties all use camelCase, 22 00:01:26,469 --> 00:01:30,680 including all DOM properties, attributes, and event handlers. 23 00:01:30,680 --> 00:01:34,460 The inline CSS style declaration properties are no different. 24 00:01:34,460 --> 00:01:37,300 And it's important to remember when working with the style property. 25 00:01:38,330 --> 00:01:43,085 These properties only get or set the element's inline styles and 26 00:01:43,085 --> 00:01:47,520 do not refer to any CSS applied from a separate CSS file. 27 00:01:47,520 --> 00:01:51,683 Because of that, the CSS Style Declaration object's properties 28 00:01:51,683 --> 00:01:56,070 are generally used to set styles versus get style values. 29 00:01:56,070 --> 00:02:00,708 At the beginning of this course, you used some of them to set the body's background 30 00:02:00,708 --> 00:02:05,613 color with style.backgroundColor and the button's text color with style.color, for 31 00:02:05,613 --> 00:02:06,780 example. 32 00:02:06,780 --> 00:02:09,599 Let's try a few more style properties here in the console. 33 00:02:11,585 --> 00:02:17,882 First, btnUpdate.style.borderBottom 34 00:02:17,882 --> 00:02:22,985 = '5px solid deeppink' applies 35 00:02:22,985 --> 00:02:29,117 a bright pink bottom border to the button. 36 00:02:31,708 --> 00:02:34,293 And btnUpdate.style, 37 00:02:36,682 --> 00:02:41,603 .backgroundColor = 'mediumvioletred' changes 38 00:02:41,603 --> 00:02:46,205 the background color of the button to red violet. 39 00:02:48,310 --> 00:02:52,286 One common use for setting a style with JavaScript is to hide and 40 00:02:52,286 --> 00:02:54,730 unhide elements on the page. 41 00:02:54,730 --> 00:02:59,582 In our project, let's set up a button that will toggle our task list in and 42 00:02:59,582 --> 00:03:01,080 out of view like this. 43 00:03:02,110 --> 00:03:07,962 In index.html, there's a button element with the class btn-toggle. 44 00:03:07,962 --> 00:03:14,111 The button displays above the task list, initially showing the text "Hide List". 45 00:03:16,319 --> 00:03:19,070 Back in app.js, let's first select the button. 46 00:03:20,480 --> 00:03:25,188 I'll declare a variable named btnToggle at the top of the file and 47 00:03:25,188 --> 00:03:29,640 assign it the button element with the class btn-toggle using 48 00:03:29,640 --> 00:03:32,992 the handy document.querySelector method. 49 00:03:42,741 --> 00:03:47,159 Next, to make something happen on the page when the button gets clicked, 50 00:03:47,159 --> 00:03:53,030 I'll need to add an event listener to the button that listens for the click event. 51 00:03:53,030 --> 00:04:01,650 I'll set that up here in my JavaScript file with btnToggle.addEventListener. 52 00:04:01,650 --> 00:04:07,650 I'll pass the method the string click, followed by an arrow function. 53 00:04:15,534 --> 00:04:18,365 When a user clicks the toggle button, 54 00:04:18,365 --> 00:04:23,560 we'll want to hide this div with the class list-container. 55 00:04:23,560 --> 00:04:27,500 We can do that by setting the div's CSS display property to none. 56 00:04:28,940 --> 00:04:32,780 First, let's select that div here within the function. 57 00:04:32,780 --> 00:04:35,736 I'll assign it to a variable named listContainer. 58 00:04:53,446 --> 00:04:57,086 Then to hide the div, 59 00:04:57,086 --> 00:05:06,203 type listContainer.style.display = 'none'. 60 00:05:09,260 --> 00:05:14,886 I'll save my file, switch back to the browser, and refresh. 61 00:05:14,886 --> 00:05:19,130 Clicking the button makes the list container disappear, great. 62 00:05:19,130 --> 00:05:22,320 Clicking again, though, does not make it reappear. 63 00:05:22,320 --> 00:05:25,020 I'll need to do a little more work with the event listener 64 00:05:25,020 --> 00:05:27,452 to make our toggle button completely functional. 65 00:05:30,513 --> 00:05:34,559 When the function passed into the event listener runs, 66 00:05:34,559 --> 00:05:39,913 it should show the list if it's hidden and hide the list if it's visible. 67 00:05:39,913 --> 00:05:42,183 Notice I used the word if. 68 00:05:42,183 --> 00:05:46,045 This is the perfect case to use a conditional. 69 00:05:46,045 --> 00:05:49,803 I'll start by adding if and else statements inside this function. 70 00:05:58,446 --> 00:06:03,371 First, as the if statement, I'll write 71 00:06:03,371 --> 00:06:09,293 listContainer.style.display = 'block'. 72 00:06:12,151 --> 00:06:20,980 Then for else, add listContainer.style.display = 'none'. 73 00:06:20,980 --> 00:06:24,930 The function will either show or hide the list. 74 00:06:24,930 --> 00:06:29,458 So what should we write as the condition that decides which code block to run? 75 00:06:29,458 --> 00:06:32,964 Well, we can check the list container's inline display value, 76 00:06:32,964 --> 00:06:35,395 which we're setting here with JavaScript. 77 00:06:37,944 --> 00:06:41,868 In the condition, I'll check if 78 00:06:41,868 --> 00:06:48,743 listContainer.style.display strictly equals none. 79 00:06:50,941 --> 00:06:55,836 So if display is set to none, the function will set the list container's 80 00:06:55,836 --> 00:07:00,430 display value to block, making the list appear on the page. 81 00:07:00,430 --> 00:07:04,460 Else, it will hide the list by setting its display value to none. 82 00:07:05,460 --> 00:07:07,939 Let's save our file and have a look in the browser. 83 00:07:10,310 --> 00:07:15,018 When the page first loads, the list container does not have an inline 84 00:07:15,018 --> 00:07:19,750 display property, as you can see here in the Elements panel. 85 00:07:19,750 --> 00:07:24,578 So when we first click the button, our condition evaluates to false and 86 00:07:24,578 --> 00:07:27,648 the else statement sets the display to none. 87 00:07:27,648 --> 00:07:33,550 Clicking the button again sets the display to block, making it reappear, good. 88 00:07:35,220 --> 00:07:41,020 Now when we click to hide the list, the button text is Hide List. 89 00:07:41,020 --> 00:07:43,645 The list is already hidden, so that's confusing. 90 00:07:43,645 --> 00:07:48,046 Next, let's change the button's text, depending on whether it's hiding or 91 00:07:48,046 --> 00:07:49,575 showing the list. 92 00:07:49,575 --> 00:07:52,415 We can use the textContent property to set the text. 93 00:07:53,935 --> 00:08:02,890 In the if block, I'll add btnToggle.textContent = 'Hide List'. 94 00:08:05,306 --> 00:08:14,091 Then for else, write btnToggle.textContent = 'Show List'. 95 00:08:17,901 --> 00:08:18,463 Let's try it. 96 00:08:21,797 --> 00:08:24,546 Good, now the button's text changes as expected, 97 00:08:24,546 --> 00:08:27,490 letting the user know what's going to happen on click. 98 00:08:28,830 --> 00:08:32,762 Finally, div elements like the list container, by default, 99 00:08:32,762 --> 00:08:35,380 display as block-level elements. 100 00:08:35,380 --> 00:08:40,310 So setting an inline display of block here seems a bit unnecessary. 101 00:08:40,310 --> 00:08:45,030 So let's instead remove the inline style attribute from the list container. 102 00:08:45,030 --> 00:08:49,130 You can remove an attribute from an element like style using 103 00:08:49,130 --> 00:08:52,000 the removeAttribute() method. 104 00:08:52,000 --> 00:08:59,028 In the if statement, change this line to listContainer.removeAttribute, 105 00:08:59,028 --> 00:09:02,940 followed by a set of parentheses. 106 00:09:02,940 --> 00:09:08,148 The method accepts a string, specifying the name of the attribute 107 00:09:08,148 --> 00:09:13,268 to remove from the element, in this case, the style attribute. 108 00:09:13,268 --> 00:09:15,040 I'll save my file. 109 00:09:15,040 --> 00:09:18,420 Back in the browser, everything still works as expected. 110 00:09:18,420 --> 00:09:23,011 But notice in the Elements panel how the style attribute gets removed from 111 00:09:23,011 --> 00:09:25,687 the div when you click to display the list. 112 00:09:30,664 --> 00:09:35,451 All right, next up, you'll learn how to create elements and add them to the DOM.