Browser ready or not lessonercise form calorie counter

JavaScript
1

My model was not suited to the browser when completed and passed. This worried me as so much webucation does not work and the poor person has no idea if the whole project is ancient code, unsupported, badly edited or impossible syntax. How many people actually took this project and launched it not in the freecodecamp space accepting it was not running under the hood as they say in order to please?

2

I don’t understand, can you explain what issues you have encountered in a different way?

3

I have the js file and the css and the html. They don’t launch. The console is unhappy with things, For instance the add entry function will not work. breakfast does not add or lunch etc in a real browser.

4

what are the names of the files? what is the code in the html file?

5

the files are the ones in make a form validator and calorie counter. It is part of the Javascript course.
I am exaggerating to say I cannot make it work but since I have to go such a long way around to make anything I try work when guided I am not putting that success down to more than extreme luck and random fortune.

6

What names have you given to the files? Please respond so that you can get more help.

Also are the files in the same folder?

7

The files are in the same folder. The js and css are then pointed to as js/file.js and css/file.css.

8

what do you mean with this? Because js/file.js means that the file.js is inside a js folder. Is file.js the name fo your js file? is it inside a js folder?

Did you change the file names in the html file?

Would you be so kind to precisely share the content of your html file and the names of your files?

9 
<!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="css/forminputter.css" />
    <title>Calorie Counter</title>
    <script src="js/forminputter.js"></script>
  </head>
  <body>
<main>
    <h1>Calorie Counter</h1>
    <div class="container">
        <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>
        <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 id="add-entry" type="button">Add Entry</button>
            </span>
        </div> 
        <div><button type="submit">Calculate Remaining Calories</button>
            <button id="clear" type="button">Clear</button>
        </div>
        </form>
        <div id="output" class="output hide"></div>   
    </div>
10

if the js file is in the same folder as the html file this will not work. If they are in the same folder you can write "./forminputter.js" or "forminputter.js". The name must match.
Also, having the script in the head means the scritp executes before the html is loaded. You can add the defer attribute or move the script to right before </body>.

The link for the stylesheet is in the right place, but the path issue is the same.

11

I just write defer in the script like <script type="text/javascript" scr="js/forminputter.js" defer></script>?

12

yes, that’s how you use the defer attribute. Also careful, there you have the src attribute spelled wrong

1 Like
13

I needed this conversation. It was helpful you are ahead like that.

14

Did you fix the file paths? that is also important for the app to work

15

The paths were okay. I did actually have the files in other folders inside the same parent folder.

16

Ok, then it was a misunderstanding! It works now? That’s great!