Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
gael blanchemain
Full Stack JavaScript Techdegree Student 8,843 Pointscheckboxes
Hi everyone, I am trying to finish module 3 project but I've been stuck on the activity/checkbox part for about two days now.
My objective is to disable checkboxes which timeline conflicts with the ones that have been checked. My code does part of that, but there are many issues (checkbox won't return to normal if I reclick them for instance). Any hint would help! Thank you!
The following is the html I'm dealing with in my code
<fieldset id="activities" class="activities">
<legend>Register for Activities <span class="asterisk">*</span></legend>
<div id="activities-box" class="activities-box error-border">
<label>
<input type="checkbox" name="all" data-cost="200">
<span>Main Conference</span>
<span class="activity-cost">$200</span>
<img class="activity-img js-img" src="img/js.svg" alt="">
</label>
<label>
<input type="checkbox" name="js-libs" data-day-and-time="Tuesday 9am-12pm" data-cost="100">
<span>JavaScript Libraries Workshop</span>
<span>Tuesday 9am-12pm</span>
<span class="activity-cost">$100</span>
<img class="activity-img react-img" src="img/react.svg" alt="">
</label>
<label>
<input type="checkbox" name="node" data-day-and-time="Tuesday 1pm-4pm" data-cost="100">
<span>Node.js Workshop</span>
<span>Tuesday 1pm-4pm</span>
<span class="activity-cost">$100</span>
<img class="activity-img node-img" src="img/node.svg" alt="">
</label>
<label>
<input type="checkbox" name="js-frameworks" data-day-and-time="Tuesday 9am-12pm" data-cost="100">
<span>JavaScript Frameworks Workshop</span>
<span>Tuesday 9am-12pm</span>
<span class="activity-cost">$100</span>
<img class="activity-img angular-img" src="img/angular.svg" alt="">
</label>
<label>
<input type="checkbox" name="build-tools" data-day-and-time="Tuesday 1pm-4pm" data-cost="100">
<span>Build tools Workshop</span>
<span>Tuesday 1pm-4pm</span>
<span class="activity-cost">$100</span>
<img class="activity-img build-img" src="img/build.svg" alt="">
</label>
<label>
<input type="checkbox" name="npm" data-day-and-time="Wednesday 9am-12pm" data-cost="100">
<span>npm Workshop</span>
<span>Wednesday 9am-12pm</span>
<span class="activity-cost">$100</span>
<img class="activity-img npm-img" src="img/npm.svg" alt="">
</label>
<label>
<input type="checkbox" name="express" data-day-and-time="Wednesday 1pm-4pm" data-cost="100">
<span>Express Workshop</span>
<span>Wednesday 1pm-4pm</span>
<span class="activity-cost">$100</span>
<img class="activity-img express-img" src="img/express.svg" alt="">
</label>
</div>
<p id="activities-cost" class="activities-cost">Total: $0</p>
<p id="activities-hint" class="activities-hint hint">Choose at least one activity</p>
</fieldset>
The below is my code
const activitiesR = document.querySelector("#activities");
const total = document.querySelector("#activities-cost");
let totalCost = 0;
activitiesR.addEventListener("change", (e) => {
const clicked = e.target;
let clickedCost = clicked.getAttribute("data-cost");
clickedCost = Number(clickedCost);
if (clicked.checked) {
totalCost += clickedCost;
} else {
totalCost -= clickedCost;
}
total.textContent = `Total: $${totalCost}`;
const activities = activitiesR.children;
})
1 Answer
Robert Manolis
Treehouse Guest TeacherHey gael blanchemain, For help with Techdegree related material, what you want to do is reach out in your Slack team. You can find a link to that Slack team on the right hand side of your Techdegree home page. It's a friendly community of students and moderators and it's a very safe place for newcomers. If you have trouble getting in there, be sure to reach out to help@teamtreehouse.com.
Once in Slack, you can post your question in the #unit-03 channel. If you have difficulty locating that channel, feel free to reach out in the #Techdegree-questinos channel for some help. And when you post your question, you'll want to share a link to your GitHub repo and details about the issue you're having.
gael blanchemain
Full Stack JavaScript Techdegree Student 8,843 Pointsgael blanchemain
Full Stack JavaScript Techdegree Student 8,843 PointsNoted, thank you Robert