JavaScript ES6 Modules Exercise

Objective

Your 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 Started

Fork and Close the Exercise Repo to get started: JavaScript ES6 Modules

Steps

The 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 your dist/ folder
Add a script tag in your index.html and set the src to main.js
- main.js is the default name for the bundled and minified file produced by webpack
Create an index.js file in your src/ folder

The contents of your index.html can resemble the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>ES6 Modules</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <main class="container">
      <section class="container">
        <form id="submitForm">
          <div class="form-group">
            <label for="makeInput">Make:</label>
            <input type="text" id="makeInput" class="form-control" />
          </div>
          <div class="form-group">
            <label for="modelInput">Model:</label>
            <input type="text" id="modelInput" class="form-control" />
          </div>
          <div class="form-group">
            <label for="yearInput">Year:</label>
            <input
              type="number"
              max="2021"
              min="1900"
              id="yearInput"
              class="form-control"
            />
          </div>
          <div class="form-group">
            <button id="submitBtn" class="btn btn-primary">Add</button>
          </div>
        </form>
      </section>
      <hr />
      <section class="container">
        <div class="row">
          <div id="wishListContainer" class="col-md-6">
            <h3 id="wishlist-title">Wish List</h3>
            <ul></ul>
          </div>
          <div class="col-md-6">
            <div class="card">
              <div id="car-card" class="card-body">
                <h3 id="carDisplay">Vehicle</h3>
                <p id="car-make"></p>
                <p id="car-model"></p>
                <p id="car-year"></p>
                <button class="btn btn-warning removeBtn" disabled>
                  Remove
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
    <script src="main.js"></script>
  </body>
</html>

Exercise 2: Install Webpack

Configure 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 called car.js
Inside of car.js, create and export a Car class
Create a constructor for the Car class that:
- takes in id, make, model, and year parameters
- sets each parameter to a property on the instance
- Example this.id = id

Exercise 4: Create a Wishlist Class

Create a new file in your src/ folder called wishlist.js
Inside of wishlist.js, create and export a WishList class
Import Car from car.js
Create two properties on the WishList class:
- list that is initialized as []
- nextId that is initialized as 0
Create an add method that
- Takes in make, model, and year parameters
- Uses the Car constructor to create a car instance from ++this.nextId, make, model, and year values
- Adds the car instance to this.list
Create a remove method that:
- Takes in carId as a parameter
- Removes the car instance whose id matches carId from this.list

Exercise 5: Import WishList and Select Elements

Open up index.js and complete the wishlist functionality with the DOM manipulation.

Import WishList from wishlist.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 the WishList 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.

Exercise 6: Create `showCarDetails`

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

Exercise 7: Create `updateDOMList`

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 the car object
- Syntax example: ele.addEventListener("click", () => func(obj))
Append each li to the ul

Exercise 8: Create `addCar`

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

Exercise 9: Create `removeCar`

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 called carId
- This will grab the value of a custom data- attribute that will correspond with the shown car in the details card
Call wishlist.remove with carId 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 Links

If you feel stuck, or would like to see the finished code for this exercise to check your work, check out:

JavaScript ES6 Modules Exercise Repo on Github

bryantellius / es6_modules Goto Github PK

es6_modules's Introduction

JavaScript ES6 Modules Exercise

Objective

Getting Started

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 showCarDetails

Exercise 7: Create updateDOMList

Exercise 8: Create addCar

Exercise 9: Create removeCar

Helpful Links

es6_modules's People

Contributors

Stargazers

Watchers

Forkers

Recommend Projects

Recommend Topics

Recommend Org

Exercise 6: Create `showCarDetails`

Exercise 7: Create `updateDOMList`

Exercise 8: Create `addCar`

Exercise 9: Create `removeCar`