Learn localStorage by Building a Todo App - Step 19

Tell us what’s happening:

Your code so far

        <p><strong>Title:${title}</strong></p>;

Ok, so I’ve tried this lots of different ways. I’ve tried it this way, the…eh, most literal (heh) interpretation.

I’ve tried it with a space after the colon after Title.

I’ve tried it with backticks before the opening p tag, and after the closing p tag, like this

<p><strong>Title:${title}</strong></p>;

omg…I just figured it out, lmao. It wants the closing strong tag to be before the interpolated variable, like this.

<p><strong>Title:</strong>${title}</p>;

Ok, so what is different, in terms of the actual expression of the code, by having the closing strong tag be before as opposed to after the interpolated variable? Would that result in a syntax error? Is it more to do with the specific requirements of the lesson module itself and syntactically irrelevant, since the interpolated variable isn’t displayed and not part of the strong tag’s impact? Or IS IT impacted, even if it’s not visually represented? Would it like…modify the way that the machine comprehends the line and mess up the conversion process?

Also, why doesn’t this require backticks to be the correct solution? Is that again some sort of modified adjustment to make it user friendly? Is there something special or exempt about this particular scenario that makes backticks irrelevant or redundant?

thanks,
jer

Challenge Information:

Learn localStorage by Building a Todo App - Step 19

Ohhh, you know what I think it might be. Because the text is enclosed within the strong tags, it’s not combining a plain string with an interpolated variable, like it would be in most cases, without those tags. Because those tags are there, the text is already contained, so the backticks aren’t necessary. It’s kind of like a psuedo concatenation.

Hmm. Interesting. Any more input on this subject would be greatly appreciated.

ty,
jer

Ok, so I looked into this more. Here’s what changes based on where you do and don’t include the strong tag.
edit: I realized that since this is in reference to a specific lesson, this could be confusing, so I decided to define the variable here.

If I define my variable, title, to contain the plain string text of My Second Awesome Page, as below, this would be the result.

const title = "My Second Awesome Page";
Output 1 : <p><strong>Title:</strong>${title}</p>
Title: My Second Awesome Page
Output 2: <p><strong>Title:${title}</strong></p>
Title: My Second Awesome Page
Output 3: <p>Title: <strong>${title}</strong></p>
Title: My Second Awesome Page

It’s not going to disrupt the process of the machine translation, it’s just going to differentiate the interpretation and output of WHAT gets bolded, based on the location and syntax of where the tags are in relation to the text.

Haha, learned a lot on this step.
jer

I am new to coding, but the quotation marks around “Title:”
as stated in the question throw and error in the solution. I found this misleading and frustrating.

1 Like

Me tooooo bruh. So I think that what probably happened is a more seasoned developer was writing out the code, and overlooked the fact that the quotes aren’t needed here, since it’s technically a temporal literal. Plain strings do wrap string values in quotation marks in JS, so I think it just was overlooked.

But the fact that the instructions explicitly had quotations around “This:” when the actual code needed was This: made me suuuuper frustrated, lol.

Ultimately, I decided to look at it as a learning opportunity, and a chance to really solidify my understanding of what the syntax needed and why.