Exercise: NPM and ES6 Modules
#
ObjectiveYour objective is to create an application where users can submit car details (make, model, and year) within a form, and see their cars displayed in a "wishlist" on the DOM. Users should be able to click an item in their wishlist and see the specific details within a card element on the DOM. Lastly, users should be able to remove a car from their wishlist, with the DOM updated accordingly.
#
Getting StartedFork and Clone the Exercise Repo to get started: JavaScript ES6 Modules
#
StepsThe JavaScript ES6 Modules exercise has multiple steps:
- Exercise 1: Project Setup
- Exercise 2: Install Webpack
- Exercise 3: Create a Car Class
- Exercise 4: Create a WishList Class
- Exercise 5: Import WishList and Select Elements
- Exercise 6: Create showCardDetails
- Exercise 7: Create updateDOMList
- Exercise 8: Create addCar
- Exercise 9: Create removeCar
#
Exercise 1: Project Setup- Create a new folder called
dist/
- Create an
index.html
file in yourdist/
folder - Add a script tag in your
index.html
and set the src tomain.js
main.js
is the default name for the bundled and minified file produced by webpack
- Create an
index.js
file in yoursrc/
folder
The contents of your index.html
can resemble the following:
#
Exercise 2: Install WebpackConfigure Webpack to bundle your project
- Install webpack and webpack-cli
- Open your
package.json
file, and make sure to add"scripts": {"build": "webpack"}
- From the command line/terminal, run
npm run build
for webpack to bundle your project
The
webpack.config.js
file is provided for you, but it would be a good idea to inspect the contents of that file to see the basic configuration that this project has in regards to webpack bundling.
#
Exercise 3: Create a Car Class- Create a new file in your
src/
folder calledcar.js
- Inside of
car.js
, create and export aCar
class - Create a
constructor
for theCar
class that:- takes in
id
,make
,model
, andyear
parameters - sets each parameter to a property on the instance
- Example
this.id = id
- takes in
#
Exercise 4: Create a Wishlist Class- Create a new file in your
src/
folder calledwishlist.js
- Inside of
wishlist.js
, create and export aWishList
class - Import
Car
fromcar.js
- Create two properties on the
WishList
class:list
that is initialized as[]
nextId
that is initialized as0
- Create an
add
method that- Takes in
make
,model
, andyear
parameters - Uses the
Car
constructor to create a car instance from++this.nextId
,make
,model
, andyear
values - Adds the car instance to
this.list
- Takes in
- Create a
remove
method that:- Takes in
carId
as a parameter - Removes the car instance whose
id
matchescarId
fromthis.list
- Takes in
#
Exercise 5: Import WishList and Select ElementsOpen up index.js
and complete the wishlist functionality with the DOM manipulation.
- Import
WishList
fromwishlist.js
- Select the form
- Select the input for car make
- Select the input for car model
- Select the input for car year
- Select the paragraph element for car make
- Select the paragraph element for car model
- Select the paragraph element for car year
- Select the remove button
- Select the wishlist unordered list element
- Call the
WishList
constructor to create an instance from theWishList
class
For selecting elements, these instructions are for the html template code from exercise 1. If you used different html elements, make sure you are selecting the correct elements.
showCarDetails
#
Exercise 6: Create Create a function called showCarDetails
that will update the details card with the details from the selected car. It should:
- Take in a
car
parameter - Reset the content of the make display to
car.make
- Reset the content of the model display to
car.model
- Reset the content of the year display to
car.year
- Enable the remove button
- Call
setAttribute("data-carId", car.id)
on the remove button- This will set a custom
data-
attribute on the DOM element that corresponds with the selected element
- This will set a custom
updateDOMList
#
Exercise 7: Create Create a function called updateDOMList
that will update the ul with the latest cars in wishlist
. It should:
- Clear the contents of the
ul
- Iterate over each car in
wishlist.list
- For each car, it should create a
li
that displays the car's make and model - Add a click event listener to the
li
that passes in an inline callback function that- calls
showCarDetails
(which will be created later) and passes it thecar
object - Syntax example:
ele.addEventListener("click", () => func(obj))
- calls
- Append each
li
to theul
addCar
#
Exercise 8: Create Create a function called addCar
that will add a car to wishlist
. It should:
- Take in an
event
parameter - Prevent the default for the submission event
- Call
wishlist.add
with the values from the make, model and year inputs passed in as parameters - Call
updateDOMList
removeCar
#
Exercise 9: Create Create a function called removeCar
that will remove a car from wishlist
. It should:
- Assign the return of
Number(removeBtn.getAttribute("data-carId"))
to a variable calledcarId
- This will grab the value of a custom
data-
attribute that will correspond with the shown car in the details card
- This will grab the value of a custom
- Call
wishlist.remove
withcarId
passed in as a parameter - Call
updateDOMList
- Reset the content of the make display to
""
- Reset the content of the model display to
""
- Reset the content of the year display to
""
- Disable the remove button
#
Helpful LinksIf you feel stuck, or would like to see the finished code for this exercise to check your work, check out: