Core JavaScript Review

The Hairy Potter

In this exercise, your task to build a workflow for making, and firing pottery, and then determining if it should be sold at a craft show. Then you will display the pottery to be sold in the DOM.

Setup

1. Open your terminal and cd to your workspace directory.
2. Clone this project.
3. Once the project is cloned, cd the-hairy-potter and then run npm install.
4. Once the installations are complete, run the npm run test command (see animation below). You will see all of the tests for your code - which ones pass, and which ones fail. As soon as you make changes to your code, the tests will run automatically, so keep this terminal window open while you are working on this project. When you need to stop working on it, use the Ctrl+C keyboard shortcut to stop the tests from running.

Note: All of the code for this project will be created the src directory of the project. Open a new terminal session, and cd to the project directory. Then you can cd src to change to that directory in your terminal. To check what's already in the src directory, use the ls command to see its contents.

Making Pottery at the Wheel

1. Create a scripts/PotteryWheel.js module.
2. Define a variable in the module to have the value of the primary key for each piece of pottery. It should have an initial value of 1.
3. Define and export a function named makePottery.
4. The makePottery function must accept the following values as input (i.e. it needs parameters), in the following order.
   1. Shape of the piece of pottery (e.g. "Mug", "Platter")
   2. Weight of the piece (e.g. 1, 5)
   3. Height of the piece (e.g. 3, 7)
5. The makePottery function must return an object with the following properties on it.
   1. shape
   2. weight
   3. height
   4. id (increment this value each time the function is invoked)

Checking Your Work

In the main.js module, invoke the makePottery function and provide the required values as arguments. Store the object that gets returned into a variable, and then use console.log() to view the object.

Also look at your terminal window that is running the tests and make sure that the Pottery object is created with correct properties test is passing.

Once you have it working, make 5 pieces of pottery in main.js.

THEN PUSH YOUR CODE TO GITHUB

Firing the Pottery in the Kiln

1. Define a scripts/Kiln.js module.
2. Define and export a function named firePottery that is responsible for acting as a kiln.
3. The function must accept the following values as input (i.e. it needs parameters), in the following order. If you don't remember, you can easily add new properties to objects in JavaScript.
   1. An object representing a piece of pottery that was made at the wheel in the makePottery function.
   2. A number specifying the firing temperature of the kiln.
4. The function must add a new property of fired with the value of true to the object.
5. The function must add a new property of cracked to the object.
   1. If the temperature of the kiln is above 2200 degrees then cracked property must have a value of true.
   2. If the temperature of the kiln is at, or below, 2200 degrees then cracked property must have a value of false.
6. After both of the new properties have been added, return the augmented object.

Checking Your Work

In the main.js module, invoke the firePottery function for each of the 5 pieces of pottery you created. Ensure you provide the required values as arguments. Store the object that gets returned into a variable, and then use console.log() to view the objects and make sure it has the right properties on each.

To check your work, make sure that at least one of your pieces of pottery is fired at a temperature that is too high.

Also look at your terminal window that is running the tests and make sure that the following tests pass.

• Pottery marked as fired after going in the kiln
• Pottery object is cracked when temperature is above 2200
• Pottery object is uncracked when temperature is below 2200

THEN PUSH YOUR CODE TO GITHUB

Pricing Uncracked Pottery

1. Create a scripts/PotteryCatalog.js module.
2. Define a variable in the module with a value of an empty array. This array will store pottery that will be sold. Do not export this array.
3. Define and export a function named toSellOrNotToSell that is responsible for determining if a piece of pottery should be sold.
4. The toSellOrNotToSell function must accept a pottery object as input.
5. If the weight of the piece of pottery is greater than, or equal to, 6 then the function must add a price property with a value of 40.
6. If the weight of the piece of pottery is less than 6 then the function must add a price property with a value of 20.
7. If the pottery is not cracked, add the object to the module-level array of items to be sold.
8. Define and export a function named usePottery returns a copy of the array of items to be sold. Recall which array method creates a copy of the array.

Checking Your Work

In the main.js module, invoke the toSellOrNotToSell function for each of the 5 pieces of pottery you created. Ensure you provide the required value as an argument.

Also look at your terminal window that is running the tests and make sure that the following tests pass.

• Piece is not priced when cracked
• Not in array of items to sell when cracked
• Piece is priced when not cracked
• In array of items to sell when uncracked
• Piece has correct price

THEN PUSH YOUR CODE TO GITHUB

Display the Catalog

Your next task is to create HTML representations of the pottery you want to sell at the craft fair and display them on the DOM. Then you will track which ones you sell.

Define DOM Target

1. Create an <article> element in the index.html file.
2. The article element must have a class of potteryList.

Create Pottery HTML

1. Create a scripts/PotteryList.js module.
2. Define and export a PotteryList function.
3. The PotteryList function must get the items to be sold from the PotteryCatalog.js module.
4. The PotteryList function must convert each object in the array to an HTML representation string. Use the following template to generate the representations.

   <section class="pottery" id="pottery--1">
       <h2 class="pottery__shape">Mug</h2>
       <div class="pottery__properties">
           Item weighs 3 grams and is 6 cm in height
       </div>
       <div class="pottery__price">
           Price is $20
       </div>
   </section>

5. The PotteryList function must then return a single string that contains ALL of the pottery HTML representation.

Checking Your Work

In the main.js module, invoke the PotteryList component function. Take its return value and update the inner HTML of the article element you created above. When you start your web server, you should see your non-cracked pottery list appear (example below).

Then look at your terminal window that is running the tests and make sure that the following tests pass.

• Pottery is rendered to DOM

THEN PUSH YOUR CODE TO GITHUB

Final Results

Once all of your tests pass, this will be the output of the terminal that is running the tests.