Learn Form Validation by Building a Calorie Counter - Step 46

JavaScript
1

Hi there

I just keep getting this outcome and I’m not sure what changes I need to make, or where

SyntaxError: unknown: Support for the experimental syntax ‘jsx’ isn’t currently enabled (24:3): 22 | const HTMLString = 23 | <label for="${entryDropdown.value}-${entryNumber}-name">Entry ${entryNumber} Name</label>; > 24 | ; | ^ 25 | } 26 | yarn add @babel/preset-react --dev Add @babel/preset-react (babel/packages/babel-preset-react at main · babel/babel · GitHub) to the ‘presets’ section of your Babel config to enable transformation. If you want to leave it as-is, add @babel/plugin-syntax-jsx (babel/packages/babel-plugin-syntax-jsx at main · babel/babel · GitHub) to the ‘plugins’ section to enable parsing.

After your label element, and on a new line in your template string, create an input element. Give it a type attribute set to text, a placeholder attribute set to Name, and an id attribute that matches the for attribute of your label element.

const calorieCounter = document.getElementById('calorie-counter');
const budgetNumberInput = document.getElementById('budget');
const entryDropdown = document.getElementById('entry-dropdown');
const addEntryButton = document.getElementById('add-entry');
const clearButton = document.getElementById('clear');
const output = document.getElementById('output');
let isError = false;

function cleanInputString(str) {
  const regex = /[+-\s]/g;
  return str.replace(regex, '');
}

function isInvalidInput(str) {
  const regex = /\d+e\d+/i;
  return str.match(regex);
}

function addEntry() {
  const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
  const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
  const HTMLString = `
  <label for="${entryDropdown.value}-${entryNumber}-name">Entry ${entryNumber} Name</label>`;
  <input type="text" id="${entryDropdown.value}-${entryNumber}-name" placeholder="Name" />;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 46

2
  • delete the backtick after the ‘label’ line, as well as the semi-colon,
  • delete the semi-colon at the end of the ‘input’ line
  • add the backtick after the closing angle bracket > of the ‘input’ element.
1 Like
3

Thank you for the indication on how to apply the backticks. It took some to understand what “new line” means. This was most helpful.

1 Like
4

This lesson really confused me for quite awhile. While the information is provided is accurate, and helped me understand, and solve the problem, I don’t feel that it is presented in a way that is clear to the WHY of what the problem is, or what the instructions are explicitly asking of you.

The reason , at least as I currently seem to understand it, that it is asking you to do so in a “new line” while “inside the template literal” is the important distinction, and what makes this step kind’ve pernicious (troublesome and tricky) to deal with, because the backtick and semi-colon are provided for you as part of the “solution” but they’re actually no longer part of the correct solution in their current position, because you’re now adding TO the template literal statement, so the new code you’re adding needs to be inside of the backtick.

When the line of code ends with

`;

the backtick and semi-colon are closing the template literal, so anything you add after that won’t be part of the template literal, in the way that the machine comprehends your code. So by deleting the backtick and semi-colon, and instead replacing them at the end of your input label, you are including that code to be part of the template literal as a cohesive whole.

const HTMLString = backtick
</label for=“${entryDropdown.value}-${entryNumber}-name”>Entry ${entryNumber} Name< /label >
</input type=“text” placeholder=“Name” id=“${entryDropdown.value}-${entryNumber}-name”>backtick;
}

now the input element is contained within the template literal of the variable, HTMLString, and is included, instead of separately defined.

Cheers,
jer

edit: So adding the backticks made the forum try to actually use my code, so instead I wrote out backtick. You should use the backtick character, not write out backtick, lol.

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.