1 00:00:03,560 --> 00:00:08,385 We come to the final assignment of this course. 2 00:00:08,385 --> 00:00:10,255 In this fourth assignment, 3 00:00:10,255 --> 00:00:13,185 you're going to work with bootstraps, 4 00:00:13,185 --> 00:00:19,075 JQuery support and also a little bit of Sass. 5 00:00:19,075 --> 00:00:23,910 This assignment consists of four tasks. 6 00:00:23,910 --> 00:00:28,370 Your first task would be to remove all that 7 00:00:28,370 --> 00:00:36,120 data-attributes from both the login link here and the reserve of tables here. 8 00:00:36,120 --> 00:00:38,910 Now, in this assignment, 9 00:00:38,910 --> 00:00:43,285 we are going to trigger the models using JavaScript code. 10 00:00:43,285 --> 00:00:44,915 So, to do that, 11 00:00:44,915 --> 00:00:46,990 we'll first remove the data-attributes, 12 00:00:46,990 --> 00:00:54,895 both from the reserve model and the login model as our first task in this assignment. 13 00:00:54,895 --> 00:00:59,470 Your second task is to add 14 00:00:59,470 --> 00:01:07,050 appropriate JavaScript code by using the models methods, 15 00:01:07,050 --> 00:01:08,985 JavaScript methods that are available, 16 00:01:08,985 --> 00:01:13,300 such that when the reserve table pattern is clicked, 17 00:01:13,300 --> 00:01:18,375 then the corresponding reserve model will be displayed as seen here. 18 00:01:18,375 --> 00:01:23,250 So, we see that this showing and hiding of the model 19 00:01:23,250 --> 00:01:28,800 is triggered completely using the JavaScript methods of that model. 20 00:01:28,800 --> 00:01:33,185 Your third task would be to, again, 21 00:01:33,185 --> 00:01:42,985 insert appropriate code into the script such that when you click on the login link here, 22 00:01:42,985 --> 00:01:45,805 the login model will be displayed. 23 00:01:45,805 --> 00:01:47,995 Now, in order for this to work, 24 00:01:47,995 --> 00:01:52,140 you need to give appropriate IDs both to the reserve table button and 25 00:01:52,140 --> 00:01:57,850 the login link such that they can then be referenced in your JavaScript code. 26 00:01:57,850 --> 00:02:00,085 So, that's a hint for you, 27 00:02:00,085 --> 00:02:05,590 how you can go ahead and proceed with the implementation of this. 28 00:02:05,590 --> 00:02:12,955 The use of the JavaScript methods should be quite straightforward. 29 00:02:12,955 --> 00:02:17,669 The link to the bootstrap documentation describing 30 00:02:17,669 --> 00:02:19,840 the JavaScript methods is available in 31 00:02:19,840 --> 00:02:24,120 the additional resources section of this assignment. 32 00:02:24,120 --> 00:02:29,700 As you might have already realized that these models now look a lot more colorful. 33 00:02:29,700 --> 00:02:32,435 So here is the reserve table model, 34 00:02:32,435 --> 00:02:34,590 and here is the login model. 35 00:02:34,590 --> 00:02:40,620 So, as part of the fourth task of this assignment, 36 00:02:40,620 --> 00:02:46,235 you're going to add in some SCSS code into the styles start SCSS file, 37 00:02:46,235 --> 00:02:50,115 such that the colors are appropriately set. 38 00:02:50,115 --> 00:02:53,500 So here, you see that that model header has 39 00:02:53,500 --> 00:03:00,940 the background dark color set and the text here is displayed in white color. 40 00:03:00,940 --> 00:03:05,700 And also, this particular class by 41 00:03:05,700 --> 00:03:11,850 using a nested class here in your SCSS code, 42 00:03:11,850 --> 00:03:17,160 you can define this also to use a flat or white color here. 43 00:03:17,160 --> 00:03:26,135 Then the model body itself uses the pale background color. 44 00:03:26,135 --> 00:03:30,620 So, insert appropriate SCSS code into your style start 45 00:03:30,620 --> 00:03:36,710 SCSS file to enable this to work for the reserve model of header and the body, 46 00:03:36,710 --> 00:03:42,005 so you can see that the same background dark color is applied to the header and 47 00:03:42,005 --> 00:03:48,435 the background pale color is applied to the body of your model. 48 00:03:48,435 --> 00:03:51,450 And upon completing this assignment, 49 00:03:51,450 --> 00:03:59,370 you may wish to do a good comment to save your changes with the message assignment four.