Hello,
I tried following along with the calorie counter in vscode and tried to change it a bit to fit a current project and it wasn’t working and I don’t know why. I even tried copy and pasting the exact code and it doesn’t work, like the add entry button doesn’t do anything. I have no clue how to get java script to affect a button and this is confusing me. Also coding is hard.
Thank you for advice.
hi and welcome to the forum!
Please show us the code that is currently copied and being tested in vs code so we can see what is happening or what is different about it, if anything.
from the very sparse details you have given, double check the linked files and their names
Hi there, yeah I didn’t realize I could post code, Im trying to update it and will hopefully help
<!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>
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" />
<label for="${entryDropdown.value}-${entryNumber}-calories">Entry ${entryNumber} Calories</label>
<input
type="number"
min="0"
id="${entryDropdown.value}-${entryNumber}-calories"
placeholder="Calories"
/>`;
targetInputContainer.innerHTML += HTMLString;
}
so just to confirm, where did you place each of these files and what did you call them?
index.html for the first and script.js for the second
and where did you place those files?
looks like you forgot the styles.css file?
Also your js file seems to be missing a lot of lines?
(the one you pasted above is only 32 lines but the real one from fCC is over 100 lines)
Yeah I didn’t care if it looked good, I was just confused because my javascript file doesn’t seem to do anything in my html page. I am on step 53 and in the code on freeCodeCamp, it works as intended but not in my code and I’m just confused why.
Sorry if this is not a good question, I just spent like 3 hours trying to figure out why it doesn’t work and I couldn’t find anything
Hey there, a general advice. To copy all the js code (for windows press [Ctrl + A] then paste it using [Ctrl +V]). I think after that your code will work in VSCode too. Let me know, if it helps you. Thanks.
