Original subtitles

1 1

So in this section, 2

2

we're gonna build the biggest and coolest project yet. 3

3

And as always, 4

4

let's start by looking at the finished project, 5

5

so that we can get a feel of what we're gonna build here. 6

6

And so this is the mapty Application. 7

7

So you have just a small sidebar here on the left side. 8

8

And then the main part of the application is this huge map. 9

9

And so this map is actually loaded, 10

10

from a third party service. 11

11

And so in the section, you're gonna learn how to do that. 12

12

And also the position is actually automatically obtained 13

13

by the browser using geolocation. 14

14

So let me turn this off here for now, the geolocation, 15

15

and now I will reload. 16

16

And then the browser will ask me here, 17

17

if it is allowed to know my location. 18

18

So probably you have seen this year in other applications. 19

19

And so you will learn how to do this yourself now. 20

20

So I click allow and then JavaScript will fetch my position, 21

21

and it will then also load the map on my current position. 22

22

Now the goal of this application 23

23

is for me to log my workouts. 24

24

So let's say I work out here downtown of the city. 25

25

So here I have this form where I can input my workout. 26

26

So here's the type which is gonna be running for now. 27

27

Then let's say I have five kilometers and 20 minutes. 28

28

And with 175 steps per minute. 29

29

Then I hit enter, 30

30

and then you see it prints here nicely on the sidebar. 31

31

And also on our map, 32

32

we got this pin together with this popup now, am I right? 33

33

And of course we can do another one. 34

34

Let's say I went cycling here a bit in the mountains. 35

35

So here I can choose a different type. 36

36

So this application allows us to log a running and cycling, 37

37

and now watch what happens here to this the last value. 38

38

So it changes from step to minutes to an elevation gain. 39

39

So let's say I did 50 kilometers in five hours, 40

40

and an elevation gain of 400 meters. 41

41

And so you'll see, 42

42

that now I get this popup here with cycling. 43

43

Let's just do one more. 44

44

Let's say over here, 45

45

which is another nice spot to go running. 46

46

And this actually has to be running again. 47

47

And let's say 180 steps per minute. 48

48

And now what's cool about this. 49

49

Let's say I have activities all over the place. 50

50

Then I can just click here, 51

51

and it will automatically move to map to that workout, okay. 52

52

So that's really nice. 53

53

And I think this looks like a real nice real world project, 54

54

and we're gonna have a lot of fun, 55

55

building this one together. 56

56

Of course, it could be even more real world. 57

57

For example, we could be able to trace whole lines 58

58

or polygons here on the map, but as always, 59

59

I wanted to keep it simple here 60

60

and focus mainly on the learning, 61

61

and on just implementing some other features 62

62

that are also pretty cool. 63

63

I believe at least. 64

64

Another thing that is special here, 65

65

is that actually when we close this app and reload it. 66

66

So let's just reload. 67

67

It we'll basically keep it state. 68

68

So you see that the workouts, are still here, 69

69

and they're also still on the map. 70

70

So you'll see, it's still everything here, 71

71

even after we basically closed down and open it again. 72

72

And of course, this also works if I copy it, 73

73

open another tab and so here it is, here's all the data. 74

74

So essentially this data about the workouts, 75

75

is gonna be stored in a browser. 76

76

And then each time we load the page, 77

77

we will read the data from the browser. 78

78

And so that's a, yet another really cool browser API. 79

79

And that we're gonna learn about here in this project. 80

80

All right, and now that we have a broad overview, 81

81

of how this application works, 82

82

let's quickly take a look at our starter files here, 83

83

one more time. 84

84

So this is the JavaScript. 85

85

And once again, I already have my elements preselected here. 86

86

So we don't have to waste time with that. 87

87

Then here we have to style. 88

88

And as always, you can have some fun by going through that. 89

89

Then here's the HTML file, 90

90

which is gonna be important 91

91

because we will need some code from here. 92

92

And then will also see that I have this flow chart here 93

93

for this application, 94

94

and also a diagram for the architecture, 95

95

but I will not look at this flow chart for now, 96

96

because actually in this project, 97

97

I will explain you exactly how to come up 98

98

with a flow chart like this. 99

99

And in fact, that's gonna be the topic 100

100

of the next lecture. 101

101

And so let's move there right now.