1 00:00:00,369 --> 00:00:04,979 [MUSIC] 2 00:00:04,979 --> 00:00:08,348 >> Hey everyone, Guil here, it's time for more JavaScript practice. 3 00:00:08,348 --> 00:00:10,820 This time, you're going to practice DOM manipulation, or 4 00:00:10,820 --> 00:00:12,540 making changes to the DOM. 5 00:00:12,540 --> 00:00:17,070 This exercise is a follow up to the making changes to the DOM stage of our JavaScript 6 00:00:17,070 --> 00:00:20,180 and the DOM course, so if you haven't watched that stage yet, 7 00:00:20,180 --> 00:00:22,850 I recommend watching it before trying this practice session. 8 00:00:22,850 --> 00:00:25,670 I also added a link to this stage in the teacher's notes. 9 00:00:25,670 --> 00:00:28,750 So in JavaScript, once you've selected an element, 10 00:00:28,750 --> 00:00:31,200 you can manipulate it in many different ways. 11 00:00:31,200 --> 00:00:34,580 So to get you some practice with some of those actions, you're going to be getting 12 00:00:34,580 --> 00:00:40,130 and setting DOM elements, text, HTML, and attributes, also changing CSS styles, 13 00:00:40,130 --> 00:00:43,930 creating elements, as well as appending and removing DOM nodes. 14 00:00:43,930 --> 00:00:46,785 So to get started, go ahead and launch the work space with this video, 15 00:00:46,785 --> 00:00:51,555 I've included HTML, CSS, and a JavaScript file for this exercise. 16 00:00:51,555 --> 00:00:56,060 You're going to write your JavaScript here inside the file scripts.js, so 17 00:00:56,060 --> 00:00:58,420 now let's walk through what you'll need to do. 18 00:00:58,420 --> 00:01:04,300 The page has several elements you're going to manipulate with JavaScript only. 19 00:01:04,300 --> 00:01:08,600 So over in scripts.js, you'll see eight comments with the instructions you'll need 20 00:01:08,600 --> 00:01:11,415 to follow, to complete this practice session. 21 00:01:11,415 --> 00:01:18,295 So first, using JavaScript, you're going to set the text of the h1 element, 22 00:01:18,295 --> 00:01:23,265 and you can take the text anything you want, for example the title of the list. 23 00:01:23,265 --> 00:01:27,525 Then you'll set the color of the h1 to a different color, 24 00:01:27,525 --> 00:01:29,915 again you can set it to the color of your choice. 25 00:01:29,915 --> 00:01:34,730 After that, you'll set the content inside the paragraph with 26 00:01:34,730 --> 00:01:39,810 the class desc or description, add any text you want inside the paragraph. 27 00:01:39,810 --> 00:01:44,600 The only requirement is that the inner content has at least 28 00:01:44,600 --> 00:01:46,900 one HTML tag, so for example, 29 00:01:46,900 --> 00:01:52,460 you can place part of the content inside strong or end tags, or inside a link. 30 00:01:52,460 --> 00:01:57,600 Then you'll set the class attribute of the ul to list, 31 00:01:58,960 --> 00:02:02,420 then you'll create one new list item, 32 00:02:02,420 --> 00:02:07,080 set its content to any text you want, and add it to the ul. 33 00:02:07,080 --> 00:02:12,780 Now currently, all the input elements in the list are text fields, 34 00:02:12,780 --> 00:02:17,770 so the next part of the challenge asks you to change all the input elements 35 00:02:17,770 --> 00:02:20,650 from text fields to checkboxes. 36 00:02:20,650 --> 00:02:23,610 And to give you more practice with node creation and 37 00:02:23,610 --> 00:02:28,690 removal, I added this div with the class extra to the bottom of the container, 38 00:02:28,690 --> 00:02:32,580 as you can see, it's styled with a bright red background. 39 00:02:32,580 --> 00:02:38,530 So using JavaScript only, you're going to create a button element, 40 00:02:38,530 --> 00:02:46,200 set the button's text to Delete, and add the button inside the extra div. 41 00:02:46,200 --> 00:02:51,560 And finally, you'll write code that will remove the extra div element from the DOM 42 00:02:51,560 --> 00:02:53,400 when a user clicks the delete button. 43 00:02:53,400 --> 00:02:59,340 So the goal is to get your page to look similar to mine, this exercise is a great 44 00:02:59,340 --> 00:03:02,620 way to practice what you've learned so far about JavaScript and the DOM. 45 00:03:02,620 --> 00:03:06,690 So good luck, have fun, and in the next video I'll walk you through my solution.