To get started, go ahead and create a new project folder with a file structure like so:
my-project-name /─┐ js/─┐ ┊ classes.js ┊ selectors.js ┊ main.js index.html style.css
Probably the best part of all this is just how easy it really is to do. Simply just put a script in the
<head></head> of your HTML document.
Note: If you're here to just get the answer as to how, copy and paste the code snipper below.
With that setup, we can now use
export in files.
Box creator — code along.
To demonstrate how to use
export, we will be creating a box generator, nothing special, just some simple styles and some basic code.
First, go ahead and set up a style sheet for your
style.css file. You can do that by adding the following into the document's
Then I add some basic styles.
Then will add some inputs to our HTML document along with a button to create said box.
selectors.js file, we will put the following.
Notice how we've used
export. If you are not familiar with the Webpack, the keyword
export allows us to use
import on files and then user function and variables, etc. It is crucial to remember that if you use
export on a variable whose value is not a function, the variable will only ever have one instance of itself.
I like to keep my code as organized as possible and looking pretty too, so I decided it would be best to
querySelector multiple times on the same element, so it is good to have a way of only ever writing the code once.
Now in our the
Box will need to first create an array for all the boxes and
createBox function from
NOTE: Because we are not using Webpack, we have no easy way of purging our file paths. This means that we must be extremely specific as to the file extension we use and what directory the file is in. If we try to
import a file like so:
We will get thrown an error. So be sure that all your imports look like this,
'./myfileLocation.whateeverExt' if you do that you'll be set.
Next, we want to create a
Box that will take in a
This will allow us to have multiple instances of the same object. Keep in mind that I'm using the
Math.random() built-in object method because there are infinite possible numbers between zero and one, so the likelihood that we get the same number twice is pretty much null. However, this is not a great way of generating an
ID, and it would be better to use the
cuid NPM package if you were to actually store this in a DB. However, I'm merely using it for demonstration purposes only.
We need to have a way of adding all the input values to the
Box class. So in the
main.js file, let's create a function just for that and add an
eventListener to our button.
Will want to
classes.js and all the input selectors, box-storage element, and our button from
Now will create a function for adding a box to the DOM.
And add an event listener that will use this function when the button is clicked.
You'll notice that if we try and test our code, nothing will be working, and that is because we have to add an instance method to our Box class. Back inside our
classes.js file, let's add the following code to Box class.
Now, back inside the main.js, we can use our instance method to initialize the box.
Finally, to wrap up the code along, we will need to create a function that will append each box we create to the DOM.
Keep in mind that the
initBox method pushes the
div element into the boxes array, and we are importing the
boxes array from
When all is said and done, we should be able to successfully create a box and give it a name, color, height, and width.