- [Instructor] In this video we're going
to step back a little and look at the mock-up
of what we're trying to build,
see what data we have,
and what components we'll need.
By the way I've included mock-ups
for all these projects because it's common
in my experience at least to start
with HTML that I or someone else
has created that gets you some of the way there
in terms of interactivity using vanilla JavaScript,
jQuery or whatever.
Then I take out the bigger toolbox to finish it up.
Adhering to the HTML and CSS from a mock-up
can really help you get the work done faster.
So anyway, this mock-up has a sneaker image right here,
a size selector and a color selector.
Changing the color changes the image
and that's really all the interactivity we have right now.
Thinking of this in terms of components,
each of these objects could be a component.
Shoe image, size selector, color selector.
Okay, what about the data?
Well we have the available sizes
that appear in this pop up menu right now.
We have the currently selected size,
and then we have the available colors
and the currently selected color.
Currently the available colors and sizes
are hard coded into the HTML which is never
what you'd want in a real store.
You'd probably be polling an API or something
to get the current values and updating
the customizer accordingly.
We're going to cheat for this little project
and just use static data from another JavaScript file.
Over here in the exercise files,
this is the inventory JavaScript file
that I'll be referencing.
In here I've defined global object called inventory.
Window.inventory that contains all the sizes,
all the colors and then objects that have
all the colors available by size
and sizes available by color.
It's all in here.
The sizes are created by this little helper function
that generates an array for me.
These are the things we do when we don't feel
like typing out every half size from seven up to 12.
Then we've got the list of colors
and these objects are a shortcut
to make it easier to say okay
what colors do I have if I am given the size
and then vice versa.
Now that we've gone over this inventory file,
we need to make sure that it's actually available
in our index.html.
So I'm going to use Command + P to open up my work in progress
index.html file and I'm going to use Command + Down Arrow
to scroll all the way to the bottom.
What I need to do is add the inventory JavaScript file
right before this app.js.
And I've included a snippet for this
so when you use Command + P again,
This'll be Control + P on Windows,
and what I'm looking for is called inventory snippet.
So I'll take this, copy it,
and I'll paste it in right here.
Now I can save index.html and all that inventory data
will now be available to my app.js file.
So now we know what data we have
and what components we could create.
One nice thing about view
is that we don't have to create components
for each of the things we need,
thinking through the components and data
is still helpful, but we can work directly
with the HTML and that's what we're going to do
over the course of the next several videos.