Update lessons in number sorter project to better show how inputValues works

[jdwilkin4]

Describe the Issue

In step 7 of the project, campers create this inputValues array

 const inputValues = [
    ...document.getElementsByClassName("values-dropdown")
  ].map((dropdown) => Number(dropdown.value));

I think it would be more beneficial to show them the original string inputs and then walk them through converting it to numbers.

Here is my proposed plan:

updated step 7

This step should just focus on having campers use map to return dropdown.value

   const inputValues = [
    ...document.getElementsByClassName("values-dropdown")
  ].map((dropdown) => dropdown.value);

new step 8

This new step should have campers log out the inputValues so they can see for themselves that the values are strings and not numbers

 console.log(inputValues)

new step 9

For this new step, this is when they update the inputValues map method to use Number(). Have campers check the console again to see that we are no longer dealing with strings but now dealing with numbers

  const inputValues = [
    ...document.getElementsByClassName("values-dropdown")
  ].map((dropdown) => Number(dropdown.value));

new step 10

This step should be to just remove the console statement.

  console.log(inputValues)

Then the project resumes as normal with new step 10 which is just this step here

If you are new to adding steps, please read through the documentation here
https://contribute.freecodecamp.org/#/how-to-work-on-practice-projects?id=how-to-work-on-practice-projects

Affected Page

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/learn-basic-algorithmic-thinking-by-building-a-number-sorter/step-7

Your code

see explanation above

Expected behavior

see explanation above

Screenshots

No response

System

• Device: [e.g. iPhone 6, Laptop]
• OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04]
• Browser: [e.g. Chrome, Safari]
• Version: [e.g. 22]

Additional context

No response

[sanskriti2005]

When working on this, I realized that, adding the console.log(inputValues) inside the sortInputArray does not give me an output on the Console.

However, putting the inputValues out of the function seemed to give the desired output.

How should I approach this further?

[jdwilkin4]

@sanskriti2005

You don't need to move the inputValues and make it global. It can stay where it is at.

The sortArray is already being called when you click on the sort button

sortButton.addEventListener("click", sortInputArray);

In the directions for the new step 8, have them add the console and then have them test it by clicking on the sort button and opening the console. Then they will see the result.

Here is an example on what the directions could say

To see the result for the `inputValues` array, log out the `inputValues` array to the console. Then click on the sort button and open up the console. You should see an array of strings like this:

```js
[ '8', '2', '4', '1', '3' ]
```

In the next step, you will convert those strings into numbers.

[sanskriti2005]

Thank you for your help!!