Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,090 --> 00:00:01,580
Welcome to this section.
2
00:00:01,589 --> 00:00:07,860
In this section, we're going to create a quiz application, will utilize some of what we've learned
3
00:00:07,860 --> 00:00:12,420
in the past few sections by breaking our app down into components.
4
00:00:12,420 --> 00:00:15,690
We'll throw in some animations to make things more exciting.
5
00:00:15,690 --> 00:00:18,690
It's going to be a lot of fun, so I hope you're ready.
6
00:00:19,020 --> 00:00:21,720
We're going to need to prepare the project.
7
00:00:21,720 --> 00:00:24,750
I've gone ahead with preparing some starter files.
8
00:00:24,750 --> 00:00:27,330
In the resource section of this lecture.
9
00:00:27,330 --> 00:00:30,180
You'll find a zip file with everything you'll need.
10
00:00:30,180 --> 00:00:39,330
There are a total of three files which are app, text, data, text and 60 C.
11
00:00:39,360 --> 00:00:41,310
Keep the zip file in handy.
12
00:00:41,310 --> 00:00:43,110
We'll need it in just a moment.
13
00:00:43,110 --> 00:00:45,240
Pause the video and download it.
14
00:00:45,660 --> 00:00:50,100
I'm providing starter files because I want to focus solely on Vue.
15
00:00:50,130 --> 00:00:54,570
The zip file contains HTML, CSS and some data.
16
00:00:54,930 --> 00:00:58,680
We'll need to create a new project in the command line.
17
00:00:58,680 --> 00:01:00,360
Run the following command.
18
00:01:02,640 --> 00:01:05,250
This command will start a new project.
19
00:01:05,280 --> 00:01:08,460
The name of the project should be called Quiz.
20
00:01:10,550 --> 00:01:13,880
As usual, select no for all questions.
21
00:01:16,030 --> 00:01:19,300
After a while, a new project should be generated.
22
00:01:19,330 --> 00:01:24,370
Move into the project directory after Vue is finished downloading everything.
23
00:01:26,090 --> 00:01:31,130
Next, let's install the dependencies with the NPM install command.
24
00:01:33,160 --> 00:01:37,780
It's not necessary to have some of the default code you'll find in the project.
25
00:01:37,900 --> 00:01:43,000
For example, the files in the components directory can be emptied out.
26
00:01:43,030 --> 00:01:44,320
I'll do that now.
27
00:01:46,710 --> 00:01:50,730
The code in the app component file can be reduced to.
28
00:01:50,760 --> 00:01:54,120
We'll empty out the three blocks in the component.
29
00:01:58,560 --> 00:02:04,130
Lastly, let's export an object from the script block with a property called name.
30
00:02:04,140 --> 00:02:06,750
The name of the component will be called App.
31
00:02:08,910 --> 00:02:12,660
Your app component file should look similar to mine.
32
00:02:12,690 --> 00:02:15,810
Other than making these changes will be good to go.
33
00:02:16,410 --> 00:02:22,410
Our first objective is to add in the HTML and CSS we downloaded from the zip file.
34
00:02:22,620 --> 00:02:27,470
They have the overall structure and styles will be aiming for in this section.
35
00:02:27,480 --> 00:02:29,610
We'll start with the HTML.
36
00:02:29,640 --> 00:02:35,580
Inside the app text file, you'll find some basic HTML markup.
37
00:02:35,580 --> 00:02:37,860
Nothing in here is related to view.
38
00:02:37,890 --> 00:02:41,370
I haven't added any directives or expressions to it.
39
00:02:41,520 --> 00:02:43,620
Those are things we'll add later.
40
00:02:43,620 --> 00:02:46,620
Copy everything inside the text file.
41
00:02:46,650 --> 00:02:51,720
Paste the code you've copied into the template block of the app component.
42
00:02:54,190 --> 00:02:59,510
Next, we need to add in the case there are two options available to us.
43
00:02:59,530 --> 00:03:04,360
We can add the CSIS to the CSIS block in the component file.
44
00:03:04,390 --> 00:03:08,590
The second option is to load the CSIS in an external file.
45
00:03:08,620 --> 00:03:10,390
Either solution is valid.
46
00:03:10,420 --> 00:03:12,100
It's completely up to you.
47
00:03:12,130 --> 00:03:16,240
The first option is the easiest because it's just a copy and paste.
48
00:03:16,630 --> 00:03:22,790
However, I feel like this will be a great opportunity to show you how to load an external CSS file.
49
00:03:22,810 --> 00:03:24,190
It's not hard at all.
50
00:03:24,220 --> 00:03:29,240
Neither solution is wrong, but we'll be looking at how to put CSIS in one file.
51
00:03:29,260 --> 00:03:32,860
We don't need component specific CSIS at this time.
52
00:03:33,010 --> 00:03:36,500
Navigate to the public directory in the project.
53
00:03:36,520 --> 00:03:40,970
Any files we create inside this directory will ship with our application.
54
00:03:40,990 --> 00:03:46,240
They won't be bundled into a single file, but you can still deploy them with your application.
55
00:03:46,570 --> 00:03:49,890
We'll create a file called Main CSIS.
56
00:03:49,900 --> 00:03:56,050
The contents of the file will be filled with the code inside the CSIS text file.
57
00:03:58,320 --> 00:04:00,300
It's very basic CSS.
58
00:04:00,330 --> 00:04:03,060
Nothing in this file should be anything new to you.
59
00:04:03,090 --> 00:04:05,880
With that said, let's preview what we have.
60
00:04:05,910 --> 00:04:10,200
I have my app running using the NPM Run Dev command.
61
00:04:10,320 --> 00:04:13,860
Upon refreshing the page, you should have what I have.
62
00:04:14,070 --> 00:04:17,820
It's a basic quiz app with some dummy questions and answers.
63
00:04:17,850 --> 00:04:20,220
We even have a dummy result below.
64
00:04:20,250 --> 00:04:25,000
There's a progress bar to let the user know how far they are into the quiz.
65
00:04:25,020 --> 00:04:28,890
We'll be using components and animations to make this look nice.
66
00:04:29,250 --> 00:04:35,500
Keep in mind, this is one way of handling static assets in the resource section of this lecture.
67
00:04:35,520 --> 00:04:40,110
I provide a link to the Static Assets Handling Documentation page.
68
00:04:42,310 --> 00:04:46,720
There's more information you'll find on this page about including static assets.
69
00:04:46,750 --> 00:04:48,450
I recommend reading it over.
70
00:04:48,460 --> 00:04:52,660
We'll definitely talk about some of this stuff as the course progresses.
71
00:04:52,750 --> 00:04:55,660
The HTML and CSS are ready.
72
00:04:55,690 --> 00:04:58,190
The next step is to add view into the mix.
73
00:04:58,210 --> 00:05:00,730
We'll cover that in the following lecture.
6766
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.