Alright, guys, it's time to put into practice what you learned in the last lesson, namely how to use
these import and export keywords and how to work with different files and different modules.
In this challenge, I want you to import the functions that live in this calculator.js file and
once you've imported it, it's going to be used in each of these li's to calculate a number to go on
to the website.
Now the results that you're aiming for is the same as this Final.png file, four bullet points each
with a number which is calculated from each of these methods,
and all you need to do is figure out how to import those methods so that they can be used inside our
EJS here.
Now when you start out, you're going to get a lot of errors and a lot of warnings. Things like, "add is
not defined", "multiply's not defined", it basically doesn't know any of these methods until you actually
figure out the code and import the correct functions.
So go ahead and fork this sandbox and try to solve this challenge.
And once you're done we can walk through it together.
All right.
So the first thing we're going to do is go into our calculator.js because we need to export all
of the functions that we want to be accessible from other files.
So in this case, I have no default thing that I want to export, I actually want to export all of these
functions separately.
So I'm going to add the add function, the multiply, subtract and divide.
Now remember that at this stage you don't want to add any parentheses to these functions.
We're just exporting the function as it is without activating or calling it. Once I've exported all of
these functions
I can now go back to my index.js and I can import all of the ones that I want from that file.
So at this stage, I've got two options really, I could either use a wildcard form where I input everything
packaged under one name, or I can import each of them separately. So I can go ahead and say add, subtract,
multiply and divide.
Now notice the order in which you import these methods don't have to be the same as the order that you
export it
as long as the names match precisely, so like what I've got here. Now next I have to specify where or which
file I'm importing from.
And in my case, I'm going to use a relative path to my calculator.js file.
So now that we've imported all of these functions, our errors have gone away and our website is now working
and looking exactly the same as what we've got in the sample, the Final.png.
This is one way of solving it.
Another way that you could have done this is to use the wildcard,
right?
So you could've added an asterix and you could've given that particular module a name, so we could called it
Calculator,
and then down here instead of just writing add or multiply, what we have to do instead is we have to
add, Calculator.add, because this calculator is the object and it contains a whole bunch of functions
that corresponds to the ones that we exported.
So now I could add Calculator.add or .multiplied, .subtract and .divide.
And this now works perfectly as well.
So you have lots and lots of options and it's important that you understand that both of these methods
work so that when you come across them in the wild you won't be confused and you'll understand what
it does.
So have a play around with this file if there's anything that you're still unsure about, and once
you're already come and join us back on the next lesson where we're going to learn about how to set up
our local environment for React development.
So for all of that and more, I'll see there.