1
00:00:00,370 --> 00:00:01,960
In the last video,

2
00:00:01,960 --> 00:00:06,560
I offered you a challenge of merging
the design files into the final app.

3
00:00:06,560 --> 00:00:09,170
This is not a straight forward task.

4
00:00:09,170 --> 00:00:12,360
So, don't feel bad if you
weren't able to complete it.

5
00:00:12,360 --> 00:00:14,630
It actually took me
sometime to complete too.

6
00:00:15,820 --> 00:00:17,880
I'm going to show you how I did it.

7
00:00:17,880 --> 00:00:19,710
But for the sake of clarity,

8
00:00:19,710 --> 00:00:23,000
I'm going to skip a lot of the circular
paths that I took to get there.

9
00:00:24,020 --> 00:00:27,490
I mentioned it because
development is a messy process.

10
00:00:27,490 --> 00:00:31,800
So you shouldn't feel bad if you
feel like you're going in circles.

11
00:00:31,800 --> 00:00:33,820
Everyone does,
it's all part of the journey.

12
00:00:35,030 --> 00:00:37,450
That being said, let's dive in.

13
00:00:37,450 --> 00:00:40,460
I googled and
find an HTML_2_Jade converter tool.

14
00:00:42,403 --> 00:00:47,830
I took the HTML And
translated it into Pug files.

15
00:00:47,830 --> 00:00:50,230
I've linked to a couple of different
ones in the teacher's notes.

16
00:00:54,600 --> 00:00:58,150
You might see in some of
the output these pipe characters.

17
00:00:58,150 --> 00:01:01,090
This is part of Pug that
we haven't discussed, and

18
00:01:01,090 --> 00:01:04,450
it's a way to add plain text to HTML.

19
00:01:04,450 --> 00:01:07,430
You don't need to worry
about it too much for now.

20
00:01:07,430 --> 00:01:11,100
If you want to know more, you can
find a link in the teacher's notes,

21
00:01:11,100 --> 00:01:12,970
to the documentation that discusses it.

22
00:01:13,980 --> 00:01:18,849
I compared the layout file I created with
all the files I got back from design.

23
00:01:18,849 --> 00:01:23,149
I found that all the top
seven lines were in common,

24
00:01:23,149 --> 00:01:27,864
so I put this into my new
layout file called layout.pug.

25
00:01:27,864 --> 00:01:34,865
Then I called the block where I
wanted to place my content main.

26
00:01:34,865 --> 00:01:37,962
I notice that non of
the files had a footer.

27
00:01:37,962 --> 00:01:41,340
While many apps have footers,
this one won't.

28
00:01:41,340 --> 00:01:46,763
So I got read of the photo partial
from the previous version of the app.

29
00:01:46,763 --> 00:01:48,633
I did need a header though.

30
00:01:48,633 --> 00:01:52,985
That's actually where
the content wound up, so

31
00:01:52,985 --> 00:01:56,540
I just modified
the header.pug file inside.

32
00:01:56,540 --> 00:02:00,790
Next I looked at the body content for
the design files.

33
00:02:00,790 --> 00:02:04,570
They all began with the section that
had the class of name card, except for

34
00:02:04,570 --> 00:02:05,390
the error page.

35
00:02:06,470 --> 00:02:10,850
The error page has a different
structure to any other page, so

36
00:02:10,850 --> 00:02:12,520
I didn't need to try and cut that up.

37
00:02:13,950 --> 00:02:16,290
When I pasted the contents in,

38
00:02:16,290 --> 00:02:20,660
I replaced the dummy text with
the locals sent from my app.

39
00:02:22,130 --> 00:02:28,600
I put error message,
the error status and the error.stack.

40
00:02:28,600 --> 00:02:30,520
When the error page was out of the way,

41
00:02:30,520 --> 00:02:33,980
I didn't have to focus on as many pages,
which made it easier.

42
00:02:35,060 --> 00:02:37,260
I did come across a tricky part though.

43
00:02:38,550 --> 00:02:42,160
When I looked at the body elements
of the remaining designs,

44
00:02:42,160 --> 00:02:45,810
I noticed that they all started
with a name card section.

45
00:02:45,810 --> 00:02:48,750
The name card section is
a little different for each one.

46
00:02:48,750 --> 00:02:52,080
So, I decided to create a new
template to hold the common code.

47
00:02:53,080 --> 00:02:54,840
I called it app.pug.

48
00:02:55,868 --> 00:03:03,590
Inside the app.pug, I started to extend
the layout and declaring the main block.

49
00:03:04,890 --> 00:03:07,030
And then in the name card section.

50
00:03:07,030 --> 00:03:08,880
And a div inside.

51
00:03:08,880 --> 00:03:14,940
I compared the contents of this name
card login div among the designs.

52
00:03:14,940 --> 00:03:18,823
This is where the user
will see hello student, or

53
00:03:18,823 --> 00:03:21,769
greeted by their name and a goodbye.

54
00:03:24,591 --> 00:03:27,149
So I used an if else block.

55
00:03:31,280 --> 00:03:35,262
To show those whether if
the name was present or not.

56
00:03:35,262 --> 00:03:39,489
The design file then has the form
inside the name card section,

57
00:03:39,489 --> 00:03:42,060
while the other design files don't.

58
00:03:43,400 --> 00:03:48,100
That's why I declared the intro
block nested in the name card.

59
00:03:49,860 --> 00:03:53,810
Then I created a hello.pug file,
and extended from the app.

60
00:03:54,890 --> 00:03:57,690
Notice I extended from the app,
and not layout.

61
00:03:59,100 --> 00:04:04,420
When the hello template is rendered,
it will extend the app, and

62
00:04:04,420 --> 00:04:07,190
then it will extend the layout.

63
00:04:09,500 --> 00:04:12,880
Training templates together can
be a useful way to shear code.

64
00:04:14,550 --> 00:04:21,060
After extending the app, I declare the
intro block with the form nested inside.

65
00:04:22,120 --> 00:04:24,690
Looking in the index design file.

66
00:04:24,690 --> 00:04:29,708
It was one heading with an anchor tag in
the place of the hello templates form.

67
00:04:29,708 --> 00:04:32,800
So, I just save the hello
template as the index.pug,

68
00:04:32,800 --> 00:04:36,410
and then replace the block
with those elements.

69
00:04:37,990 --> 00:04:44,511
After that, the card front and card back
with the less design files to work with.

70
00:04:44,511 --> 00:04:49,485
They were really just the same template
with the unique content inside

71
00:04:49,485 --> 00:04:53,629
this section,
which is outside of the name card section.

72
00:04:53,629 --> 00:04:58,335
In the app template, I put a block
with card to place the content as

73
00:04:58,335 --> 00:05:01,426
the next sibling of the name card section.

74
00:05:04,530 --> 00:05:09,477
In the card.pug template file,
I extend the app and

75
00:05:09,477 --> 00:05:14,430
declare the card block with
the remaining content.

76
00:05:15,680 --> 00:05:18,801
Once I pasted in the design file content,

77
00:05:18,801 --> 00:05:24,523
I replaced all the dummy text with
the variables that our app could provide.

78
00:05:29,603 --> 00:05:35,826
Starting with the divs classes,
the class could either be card question or

79
00:05:35,826 --> 00:05:42,171
card answer, so replace the parts after
the hyphen with the side variable.

80
00:05:42,171 --> 00:05:45,052
Looking at the card title heading 1.

81
00:05:48,562 --> 00:05:53,159
The text content is capitalized, but when
I discovered this page when I viewed it in

82
00:05:53,159 --> 00:05:56,390
a web browser,
that the capitalization didn't matter.

83
00:05:57,630 --> 00:06:01,180
The text is converted by
the CSS to be all caps.

84
00:06:02,220 --> 00:06:03,800
That will make our code simpler.

85
00:06:04,950 --> 00:06:07,650
We were supplying a separate variable

86
00:06:07,650 --> 00:06:12,100
to this template to show the display
version of the string that was capsulized.

87
00:06:13,180 --> 00:06:16,720
Now, we can just use
the same local variable

88
00:06:16,720 --> 00:06:18,540
that we're using to set the class.

89
00:06:20,160 --> 00:06:23,580
I replaced the dummy hint
with a hint local variable.

90
00:06:24,740 --> 00:06:27,690
To provide the link to the view
to the other side of the card,

91
00:06:27,690 --> 00:06:29,160
I just modified the link here.

92
00:06:30,390 --> 00:06:32,910
Now let's look at the app in the browser.

93
00:06:32,910 --> 00:06:37,120
I can enter my name and

94
00:06:37,120 --> 00:06:41,680
see the greeting,
then I can launch the flash cards.

95
00:06:43,970 --> 00:06:48,940
I can uncover the hints,
and flip the answer over.

96
00:06:50,330 --> 00:06:54,380
Hitting the forward button
gives me a random card.

97
00:06:57,730 --> 00:07:03,070
Finally, I can click on the X to
clear the cookie with my name in it.

98
00:07:03,070 --> 00:07:05,170
Cool, this looks really good.

99
00:07:07,450 --> 00:07:08,300
In this course,

100
00:07:08,300 --> 00:07:12,410
you've learned how to create
a dynamic web application in express.

101
00:07:12,410 --> 00:07:15,050
You've also learned about HTTP and

102
00:07:15,050 --> 00:07:18,980
other concepts that are common
to many other web frameworks.

103
00:07:18,980 --> 00:07:22,250
Now that you have the basics,
feel free to take this out further and

104
00:07:22,250 --> 00:07:23,800
expand your knowledge.

105
00:07:23,800 --> 00:07:25,720
Here's a few ideas to get you started.

106
00:07:27,210 --> 00:07:31,190
Right now,
our app only has one set of flash cards.

107
00:07:31,190 --> 00:07:34,660
You could add the ability to
switch between different sets,

108
00:07:34,660 --> 00:07:37,350
which could be organized by a theme.

109
00:07:37,350 --> 00:07:42,910
There could be an astronomy set, for
example, or an anatomy of physiology set.

110
00:07:44,000 --> 00:07:47,260
The app is getting the data
from a flat JSON file.

111
00:07:47,260 --> 00:07:51,010
But normally this kind of app
would be connected to a database.

112
00:07:51,010 --> 00:07:55,721
A database would allow you to store new
flash cards through the app itself.

113
00:07:55,721 --> 00:08:01,155
As it stands, you need to edit the JSON
file manually to create a new cards.

114
00:08:01,155 --> 00:08:05,730
We have several courses at Treehouse
to get you started with databases.

115
00:08:05,730 --> 00:08:08,070
Check the teacher's notes for links.

116
00:08:08,070 --> 00:08:10,980
We have a simple greeting
functionality in the app,

117
00:08:10,980 --> 00:08:15,220
this is a far cry away from any
sort of login and authentication.

118
00:08:15,220 --> 00:08:19,990
We have a course on authentication at
Treehouse if you'd like to learn how to

119
00:08:19,990 --> 00:08:21,714
create users for your app.

120
00:08:21,714 --> 00:08:25,117
I hope you've enjoyed this course,
and that I will see you again soon.

121
00:08:25,117 --> 00:08:26,630
Til then, happy coding.