Learn Form Validation by Building a Calorie Counter - Step 28

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.
Very new to coding. getting a few errors when I try different methods.

Your cleanInputString should call the replace method of str

but also

You should pass regex as the first argument to replace

if I change it to str.replace

and then having trouble returning the right string.

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>
          <fieldset id="lunch">
            <legend>Lunch</legend>
            <div class="input-container"></div>
          </fieldset>
          <fieldset id="dinner">
            <legend>Dinner</legend>
            <div class="input-container"></div>
          </fieldset>
          <fieldset id="snacks">
            <legend>Snacks</legend>
            <div class="input-container"></div>
          </fieldset>
          <fieldset id="exercise">
            <legend>Exercise</legend>
            <div class="input-container"></div>
          </fieldset>
          <div class="controls">
            <span>
              <label for="entry-dropdown">Add food or exercise:</label>
              <select id="entry-dropdown" name="options">
                <option value="breakfast" selected>Breakfast</option>
                <option value="lunch">Lunch</option>
                <option value="dinner">Dinner</option>
                <option value="snacks">Snacks</option>
                <option value="exercise">Exercise</option>
              </select>
              <button type="button" id="add-entry">Add Entry</button>
            </span>
          </div>
          <div>
            <button type="submit">
              Calculate Remaining Calories
            </button>
            <button type="button" id="clear">Clear</button>
          </div>
        </form>
        <div id="output" class="output hide"></div>
      </div>
    </main>
    <script src="./script.js"></script>
  </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 */
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;


// User Editable Region

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

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:123.0) Gecko/20100101 Firefox/123.0

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 28

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

3

Welcome Michael! I’m not sure what error you are getting, but you indeed need to append the method replace directly on your string variable. But instead of rewriting you regex, just use the variable you already defined.

4

Thank you for the reply Daniel,

Very new to coding. getting a few errors when I try different methods.

Your cleanInputString should call the replace method of str

but also

You should pass regex as the first argument to replace

if I change it to str.replace

and then having trouble returning the right string.

These are my errors I’ve run into so far. After reading your directions I changed it to
‘str.replace(regex, “”)’
but I still don’t know what I’m supposed to be returning. the string, regex, cleanInputString?

5

Hi Michael, no worries!
We wouldn’t want to return the name of this new function, because that would call the function in an infinite loop. And we don’t really have a reason to return the regex code, because that’s not very helpful to our end goal. So we want to return the string once it’s been cleaned up. Now, you could do that on one line such above the return and then return it again:

function cleanUp(string){
  string.replace("goofed", "goofy");
  return string
}

But! We can simply combine this into one line:

return string.replace("goofed", "goofy")

This code will replace the first instance of the string “goofed” with “goofy”.

1 Like
6

Daniel you’re amazing, thank you so much for helping me. I love/hate how simple things are after you’ve solved them.

1 Like
7

Thanks for helping! It was so simple, after looking at it with another point of view…I even went to the harder thinking to put return str in the last line of code, when it was just to add it before of the line I was already writing hehe thanks again for the help :slight_smile:

8

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