Learn Form Validation by Building a Calorie Counter - Step 5

JavaScript
1

Tell us what’s happening:

Hello. There are some errors in my code because it doesn’t pass through. Please help me find and correct all of them. The developer console writes the following:
Sorry, your code does not pass. Hang in there.

Your second fieldset element should be positioned after your first fieldset element. What is the best way for me to fix the problem? However, in my current code, the structure is already correct: the first comes before the second . If the error does occur, it may be related to some other requirements that were not explicitly mentioned in the developer console. This confuses me and I would like to find out the true cause of the problem.

<form id="calorie-counter">
    <label for="budget">Budget</label>
    <input id="budget" type="number" min="0" placeholder="Daily calorie budget" required />    
    
    <fieldset id="breakfast">
        <legend>Breakfast</legend>
        <div class="input-container"></div>
    </fieldset>   
    
    <fieldset id="lunch">
        <legend>Lunch</legend>
        <div class="input-container"></div>
    </fieldset>
</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">
        <form id="calorie-counter">
          <label for="budget">Budget</label>
          <input
            type="number"
            min="0"
            id="budget"
            placeholder="Daily calorie budget"
            required
          />
          <fieldset id="breakfast">
            <legend>Breakfast</legend>
            <div class="input-container"></div>
          </fieldset>

<!-- User Editable Region -->

<form id="calorie-counter">
    <label for="budget">Budget</label>
    <input id="budget" type="number" min="0" placeholder="Daily calorie budget" required />    
    
    <fieldset id="breakfast">
        <legend>Breakfast</legend>
        <div class="input-container"></div>
    </fieldset>   
    
    <fieldset id="lunch">
        <legend>Lunch</legend>
        <div class="input-container"></div>
    </fieldset>
</form>

<!-- User Editable Region -->

        </form>
      </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 5

2

You duplicated form calorie-counter and fieldset breakfast. You just need one of each of them.

1 Like
3

Thank you very much.

1 Like
4

This is a good start on talking about your code! You are doing great, keep doing it and you will get better at it!

1 Like
5

You write: “This is a good start to discuss your code! You’re doing great, keep up the good work and you’ll do even better!” Yes, I understand you. Now you are teaching me, then, when I complete the training and receive the necessary certificates, I will have to give the necessary advice to other students together with you. Anyway, I’ll try my best.