Learn Form Validation by Building a Calorie Counter - Step 2

JavaScript
1

Tell us what’s happening:

Hello. There is a problem in my code. Please help me to find and correct the error if there are any or some in it.

<form id="calorie-counter">
    <label for="budget">Budget:</label>
    <input type="number" id="budget" name="budget" required>
</form>

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Calorie Counter</title>
  </head>
  <body>
    <main>
      <h1>Calorie Counter</h1>
      <div class="container">

<!-- User Editable Region -->

        <form id="calorie-counter">
    <label for="budget">Budget:</label>
    <input type="number" id="budget" name="budget" required>
</form>

<!-- User Editable Region -->

      </div>
    </main>
  </body>
</html>

/* file: styles.css */
:root {
  --light-grey: #f5f6f7;
  --dark-blue: #0a0a23;
  --fcc-blue: #1b1b32;
  --light-yellow: #fecc4c;
  --dark-yellow: #feac32;
  --light-pink: #ffadad;
  --dark-red: #850000;
  --light-green: #acd157;
}

body {
  font-family: "Lato", Helvetica, Arial, sans-serif;
  font-size: 18px;
  background-color: var(--fcc-blue);
  color: var(--light-grey);
}

h1 {
  text-align: center;
}

.container {
  width: 90%;
  max-width: 680px;
}

h1,
.container,
.output {
  margin: 20px auto;
}

label,
legend {
  font-weight: bold;
}

.input-container {
  display: flex;
  flex-direction: column;
}

button {
  cursor: pointer;
  text-decoration: none;
  background-color: var(--light-yellow);
  border: 2px solid var(--dark-yellow);
}

button,
input,
select {
  min-height: 24px;
  color: var(--dark-blue);
}

fieldset,
label,
button,
input,
select {
  margin-bottom: 10px;
}

.output {
  border: 2px solid var(--light-grey);
  padding: 10px;
  text-align: center;
}

.hide {
  display: none;
}

.output span {
  font-weight: bold;
  font-size: 1.2em;
}

.surplus {
  color: var(--light-pink);
}

.deficit {
  color: var(--light-green);
}

/* file: script.js */

Your browser information:

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

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 2

2

Hi. The text for your label element should be exactly as it sets out in the instructions, no extra characters. For the input element only add the attributes they asked for in the instructions.

1 Like
3

what error are you getting? what are you confused about?

if you don’t even try you are not going to improve

4

Thank you very much for help.

5

As for the issue I encountered, I experienced an error while trying to generate the code for the form:



> <form id="calorie-counter">
> 
> <label for="budget">Budget:</label>
> 
> <input type="number" id="budget" name="budget" required>
> 
> </form>

. The specific error message states that there is a bug in my code. I have attempted to troubleshoot by modifying the code, but this has not resolved the issue yet.

I am mostly perplexed by the fact that the code does not pass validation.

Thank you for your assistance, and I look forward to discussing the situation with you.

Best regards,

Dennis-code153

6

what is the specific assertion message? what does it say exactly?

7

The specific approval message looks like this:

Approval error: was expected to be equal to , but was received.This indicates a mismatch between the expected value and the actual value returned by the function/operation.

I looked through the code to determine where this discrepancy might come from. So far, I’ve checked [mentioned specific parts of the code that you’ve reviewed or debugging steps that you’ve taken], but I haven’t found the exact reason yet.

If you have any suggestions for further action or areas to focus on, I would greatly appreciate your input.

Thanks again for your help!

With best wishes

9

you are still not sharing the error message, please share it all to get the best help

what parts of the code have you checked?

please talk about your code

10

The whole difficulty is that the problem has already been solved and the console no longer displays an error. Therefore, in this case there is nothing to share yet. You can share it before solving the problem, as long as the console contains an error, and now it is no longer there.

11

Asking GPT or similar to explain what you don’t understand doesn’t really work

12

GPT can’t solve these problems, so it is useless them to ask. I ask you for help, not GPT. Please show me that GPT which will solve all these problems and I’ll ask it. I don’t know such GPT.

13

I don’t understand why you typed this. It looks exactly like something GPT would type.

14

These are my personal reflections on the topic. Some users give me samples of how to do this, I’m trying to improve these samples. AI has nothing to do with it.

15

Anyone knows PHP here?

16

You say : "Does anyone here know PHP? " What is PHP?

17

Please open a new thread in another section. Don’t hijack this thread with a different topic, thanks.

18

It is probably a good idea for you to practice talking about your code and where you’re stuck before trying to write templates and drop them into conversation. Its hard to follow what you mean.

19

Of course, I’ll be trying to do it.