So did you succeed?
Let's now solve this together.
And for this first of all,
I will include exercise.js here
in my index.html file instead of app.js,
so that the code I do write in exercise.js actually
has an effect.
So let's save this HTML file,
and now go back to exercise.js.
And here we can start with task number one,
creating three variables.
And I'll solve that directly here,
just so that we always see the task,
but you can of course also just solve it
below this entire comment block.
Now, here we need three variables,
one for storing a name, a price,
and then one for storing a couple of goals.
Now let's start by defining those variables.
And we learned that we can do that with the let keyword.
Now we need to pick a name for our first variable.
And since that variable we'll store the name
of an online course, I'll name it courseName,
of course, we could also pick onlineCourseName
or just onlineName, whatever you want,
but I think courseName isn't too bad.
Now that's my first variable.
Now we should also store a value in there
and we can do this in the same line
as we use for defining the variable
by adding an equal sign and then the value.
Alternatively, we just define the variable
and we then assign the value in a new line.
Both (indistinct), both is fine,
here, I will do it in one line.
Now that should store the name of an online course
of our choice,
and hence, we will need a string
because the name of a course is definitely some text,
not a number or anything like that.
And here we can then then therefore pick
a name of our choice,
like Web Development - The Complete Guide,
something like this.
This semi-colon here as you learned is optional,
but I prefer to add it and hence I will add it everywhere
in the regular sections, and lectures,
and also in this exercise.
Now the second variable should store
the price of that course.
So here we could have coursePrice
and that could be a number,
because a price typically is a number.
And now let's assume that is $39 here.
Of course that value is up to you.
Now, the last variable is a variable
that stores multiple values in it.
Multiple main goals that you might have
when taking this course.
And we did learn that we do have value types
for storing multiple values in one variable,
we have arrays and objects.
Now, arrays are the right choice
if we basically have a list of data,
so the same kind of data, just multiple pieces of it.
For example, a list of shopping card items
or a list of goals like in this case.
And hence here, I'll add a courseGoals variable,
and then we create an array
with these square brackets as you learned,
opening and closing square brackets.
That's how we create an array.
And in this array, we can now store our goals.
And here my goal could be Learn Web Development.
And then I have a second goal where I have,
Become a web developer.
And maybe a third goal, which is, Have fun.
And of course you can add as many goals as you want.
Here my individual goals are strings,
because again, text makes most sense here I would say.
And as you learned, they are separated with commas.
That's how you separate items in such an array.
And that's now task number one solved.
Task number two,
now is to output these values.
And for that here, below this comment,
I will use this built-in alert function we learned about
to output the courseName,
and then the coursePrice,
and then also here,
the courseGoals,
like that.
That's what we also did before,
we called this built-in alert function
and we pass our variable values
as parameter values to that function,
that's what we're doing here.
And hence if we save all of that
and we view this on our page,
if we reload once after clicking away the old boxes,
we get the Web Development - The Complete Guide,
which of course is our courseName being output here.
Then we get 39,
and last but not least,
we get our array and the different values
we have in there.
So that's task number two solved.
Task number three now becomes more tricky.
Because now we should group the three variables
we defined before together.
And we got a good hint that
we might have a good grouping opportunity here
because their names are very similar.
They all start with course.
So it looks like they actually do belong together
and they describe different traits of a course.
And if you have something like this,
if you already start naming them in similar ways,
then that's a good indicator
that instead of using three individual variables,
which you can use, nothing wrong with that,
but that instead of that,
you maybe can use an object.
Because we learned that an object
is another kind of value in JavaScript
which we can use for grouping related data together.
And the difference to an array
where we also group multiple values together,
is that in an array,
we basically have the same kind of value,
we have three goals here,
whereas in an object we have different kinds of values.
And I don't just mean different
in the sense of strings and numbers,
but instead I mean different things being described
by these values.
For example, a courseName is a different thing than
a course description if we had one.
Here, we have courseName, price, and goals,
and these are clearly three totally different traits
that make up a course.
And hence we can group these three variables together here
by creating a fourth variable,
which could be named course or onlineCourse.
And then we create such an object with curly braces
as you learned.
We do use curly braces in different parts
of our JavaScript code,
for example, all of the four functions,
but also when used like this for creating objects.
And now these objects as you learned,
contain label value pairs.
And the labels are up to you.
So here we could again repeat courseName
or since we're already in an object,
maybe just name
or just title.
And by the way this strikethrough effect here
is something you can ignore,
and it goes away as soon as you add a colon.
It's essentially a little bug here in Visual Studio Code,
you could say.
So here I'll pick name,
and then store my courseName in here,
or of course, create a brand new value,
either by copying it or by adding a brand new string.
It's up to you since we already
have those variables up there,
we could reuse them on the array.
And here, I'll do something
which is called commenting out.
I'll mark them and press this comment shortcut.
You can also find it here in your Menu under Edit.
I'm toggling a line comment here.
And with that I'm actually making sure that
we can still see that code,
but that it doesn't have any effect anymore.
And with that of course,
I can't reference those variables anymore down there,
but instead I have to create three new values.
But it's totally optional whether you wanna do that
or reference those values.
Here I'm creating new values,
so now I'll also add a price which is 39,
and then my goals,
which is still an array,
so we still have the square brackets.
And we can have arrays inside of objects as values.
We could even have objects inside of objects,
that's all allowed.
And now we just have to copy these three values,
these three strings,
and add them to this new goals array down there, like that.
And now I will press this autoformat shortcut
and that formats this object such that
it's a bit more readable.
Now we did group these variables together,
now we should still output their values.
And for this we can again use the alert function,
but now we don't just use the name
or the price as a name here,
but instead these are now labels inside of an object.
So we start by using the overall object onlineCourse.
And then you'll learn about this dot notation,
which you can use to access
the different properties stored in there.
And here I then access the name property
and output this,
like this.
And then I'll do the same here, access my onlineCourse.
And then here the price let's say.
And then last but not least access onlineCourse.goals,
like this.
And that's now task number three solved,
let's see if it works.
If I clicked this away and reload,
I still see Web Development - The Complete Guide,
39, and my goals.
So that's still working.
Task number four now is to also outputs the second element.
So Become a web developer in my case
in this main goals variable.
And for this we can, again, of course use the alert function
since that is still the only way we have
for outputting values.
And in this function,
I now wanna output onlineCourse.goals,
but not the entire array,
but the second item in there.
And for that we can use this square bracket notation here
when accessing such an array.
This as you learned does not create a new array,
but it's a special syntax for accessing an item
in the array by its identifier.
And you learned that identifiers
are automatically assigned to array items.
They are numbers starting at zero for the first item.
And that's a potential gotcha
when accessing the second item here, you don't enter two,
because that would actually be the third item.
But instead one since that index starts at zero
and therefore Learn Web Development has the identifier zero,
Become a web developer, which is the second item,
has the identifier one.
And hence if I save this,
now I also get this second item here.
That's task number four.
In task number five,
we're now going to build a function.
And that function should basically do what we do here,
but the identifier should be dynamic
and the list on which we do it
should also not be set in stone.
Now for that, I will start with the function keyword
because a custom command is a function
and we create such a function with that function keyword.
Then you learned that the name is up to you,
but it should describe what this function does.
And here this function will in the end access a goal,
but actually since that should also be dynamic
and it should work on any list,
it will access an element in an array.
It will access an element in a list we could say.
So here we could name it, accessListItem,
or getListItem,
whatever you prefer.
And I think that accurately describes
what this function will do.
Then we add parentheses and now curly braces
between which we put our function code.
We use curly braces just as we did it
for creating an object,
but after the function keyword and this syntax.
These curly braces do something totally different,
they don't create an object,
they just mark the beginning and end of this function code.
Now in here, we now wanna do all the different operations
we wanna perform.
And for that, this function
will actually need to use parameters
because both the identifier here,
as well as the main goals should be dynamic.
So that list which we access should be dynamic.
So hence here, I wanna get my list or my array,
and my identifier
or my arrayIndex as parameters.
So that we can find them in the place
where we execute this command later on.
And then here in this function,
we can add a variable,
arrayElement could be the name
where we access this array.
And then again, we use the square brackets to access
a certain item in this array.
That of course has the assumption that
the value for this parameter will always be an array.
But since we are the one writing this function,
we can of course dictate on how it should be used
and which values we accept.
So that's absolutely fine.
And here the value which I wanna use,
and that's now maybe tricky and new
is not a hard coded number,
but the value stored in arrayIndex,
which I assume to be a number.
And that's definitely a tricky step
since that's not something we did before,
but it hopefully makes a lot of sense
if you think about it.
We put a number between square brackets
and instead of writing that number like that,
we can of course also write a variable
that stores a number.
And that's in the end what we're doing here
because parameters inside
of a function basically act like variables.
And now I'm accessing a certain element in that list,
in that array, which we get as a parameter.
And I store that accessed element in a new variable.
And now it makes most sense to then return
this array element here,
because with that we ensure that we can use
that accessed element in the place
where this function is being executed,
so that this is a pure utility function
that does a certain operation
and then yields the result of that operation.
That's what I also request here in this last instruction.
This custom command should provide,
which means return, the accessed value.
And now we have our function in place,
now we can use it down there to get our,
let's say first goal, for example,
and store it in a variable,
which hence is named firstGoal.
By calling getListItem,
and you learned for that,
that you repeat your name and then you add parentheses.
And then between those parentheses,
you pass in the concrete values for these parameters.
And here the order does matter.
So the first value should be a value for this array
which we expect as a parameter.
The second value which we pass in
should be a value for this arrayIndex.
Now the array I wanna access here
is my onlineCourse.goals array.
So I'm still using the dot notation here
because I wanna get access to that array,
which is stored in my onlineCourse object,
so to this array here.
For that I'm using the dot notation.
That's my value for this first parameter.
Now we also use a comma here for then passing in
a value for the second parameter.
And that is the index which I wanna access,
and since I wanna get my firstGoal here,
and the index starts at zero, that's zero.
And now if I alert my firstGoal here,
and I save this,
if I go back to my page,
here I get Learn Web Development,
which indeed is my first goal here.
And that's done with help of my function.
Now I am 100% aware that this part
was probably very challenging and tricky,
because you had to apply certain steps
which we haven't used exactly like this before,
like using two parameters or providing a variable
for the index of an element.
If you were still able to do that, congratulations,
that's really amazing.
If you did struggle a bit with that,
that's no problem at all,
we're just getting started.
And this was a quite challenging exercise,
but we are going to see plenty of other examples
and we'll see plenty of other exercises as well.