Improve the instructions

For the love of Code,
Please make the instructions in Javascript Algorithms and Data Structures (Beta) better than what they are. Some of us are beginners and are completely in the dark as to what some of these instructions mean. Like you get to a step and it just expects you to know how to format something that you’ve never seen before. I’m not really learning much when I have to look up the answer to every single step lol

If you have specific suggestions, that would be helpful. It’s hard to improve in a general sense without knowing what exactly about the instructions is confusing

1 Like

Here’s an example, step 49 makes absolutely no sense to a beginner. It refers to a new HTML string… what is that? Be more specific as to what exactly the HTML string is that it’s referring to. Also it says to add it to the targetInputContainer by using the innerHTML property… what is the innerHTML property and how do I use it?

Properties were covered in a previous step I thought like innerHTML?

Beginner’s aren’t going to remember it if you only mentioned it in one previous step… gotta re-iterate it in further steps with walk-through instructions so people can grasp the concept

I found the lesson you are referring to here

The lesson provides a code example for innerHTML and an explanation.

Can you explain more about what needs improving for the code example and explanation of innerHTML?

Right, repetition is a key part of the current design

Problem is, the example is kind of useless. What’s even going on in the example lol. The code in the previous steps doesn’t even have a div in it?

Maybe add hints or something to jog people’s memory since the concept is only explained once and then expected to remember exactly how to use it…

The example is showing you how you modify the exisiting HTML and add more elements using innerHTML.

Yes, the previous steps use labels and inputs but the same concept still applies with innerHTML.

Here is a codepen, showing you how you can add additional HTML elements using innerHTML.

Notice in my HTML, I have a form element, label and input.

But in my javascript, I am using innerHTML to add an additional label land input

hope that helps

Would it help you better understand the innerHTML property, if the example were updated to something using labels and inputs instead of divs?

Probably, cuz right now it just assumes the beginner knows that the same concept applies on not only div but also the labels & inputs as you mentioned

Personally, I think the instructions could be updated to say this instead

old instructions

Add your new HTMLString to the targetInputContainer by using the innerHTML property. Remember to use the += operator to add to the existing HTML instead of replacing it.

new instructions - updated

Use the addition assignment operator += to append your HTMLString variable to targetInputContainer .innerHTML

2 Likes

Yeah, that makes sense.

I can create an issue to update the code example. :+1:

I’m not quite sure about ‘assign’ since it’s an augmented assignment operator, so really it’s ‘append’?

Yeah, append is better

1 Like

I still have no idea what the new HTMLString is

And this is why I was looking for specifics! If you tell us what’s confusing and why, we can make fixes!

2 Likes

HTMLString is the variable here you created a few steps earlier

 const HTMLString = `
  <label for="${entryDropdown.value}-${entryNumber}-name">Entry ${entryNumber} Name</label>
  <input type="text" id="${entryDropdown.value}-${entryNumber}-name" placeholder="Name" />
  <label for="${entryDropdown.value}-${entryNumber}-calories">Entry ${entryNumber} Calories</label>
  <input
    type="number"
    min="0"
    id="${entryDropdown.value}-${entryNumber}-calories"
    placeholder="Calories"
  />`;
1 Like

I find the beta version of JavaScript complicated without first going through the Data structure and Algorithm version. I find the DSA one user and basics friendly.