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
Karl Russell Sumando Menil
Full Stack JavaScript Techdegree Student 4,004 PointsAccessibility, Any hints, suggestions and comments are welcome thank you in advance for your help!!!
When the checkboxes in the "Register for Activities" section are in focus, there’s little to no indication. So to improve accessibility, the checkboxes’ parent label elements should receive additional styles when their respective checkboxes are in focus.
Create a variable to reference the activities’ <input type=”checkbox”> elements, and log out the variable to ensure it is what you think it is. Use the variable that was just created to loop over the activities’ checkboxes. Inside the loop, program each activity to listen for the focus event and the blur event. These are two separate events and will need to be added and defined separately, but within the same loop. When an activity checkbox triggers the focus event, that checkboxes’ parent element should have the "focus" className added to it. The classList property will be helpful here. When an activity checkbox triggers the blur event, that checkboxes’ parent element should have the "focus" className removed from it. The classList property will be helpful here. When an invalid form field or section prevents the form from submitting, there’s little to no indication. So to improve accessibility, add form input validation error indications that can be perceived by all users.
When validating a required form field, like the "Name" filed, and checking whether the field is valid or not, you’ll need to perform three tasks; If the form field element is invalid: Add the "not-valid" className to the element’s parent element. Remove the "valid" className from the element’s parent element. Display the last child of the element’s parent element. The lastElementChild property will be helpful here. If the form field element is valid: Add the "valid" className to the element’s parent element. Remove the "not-valid" className from the element’s parent element. Hide the last child of the element’s parent element. The lastElementChild property will be helpful here. Now save and refresh the page, and when the submit button is clicked without all the required fields being correctly filled out, the user should be notified with clear form input validation error indications.
1 Answer
Jennifer Nordell
Treehouse TeacherHi there, Karl Russell Sumando Menil! I received two "Ask to Answer" from your questions but see that there are actually seven questions posted here within just minutes of each other. First, please refrain from posting project instructions given in the Techdegree in their entirety. The projects are special to the Techdegree and not meant to be publicly available to all.
Secondly, the Slack workspace is the absolute best place to get help with your projects if you run into issues. I would highly suggest posting any and all questions there in the appropriate channel.
Third, there is an artform to asking questions. Broad, generic questions like this are really hard to answer.
You're asking for the best tips and hints, but trust me when I tell you that the best tips and hints are in the instructions that you posted here. They even include instructions for testing your code. If you get a job as a developer, and get assigned a new feature you will not get these hints. You will likely be asking a senior dev for help along the way but only when you get stuck. To get stuck, you first have to have attempted something. In all of your questions, I see no code that you wrote.
Finally, please remember that when you post to the Treehouse Community Forums, you are posting to other students. Most students are not Techdegree students so they will have no context for your Techdegree questions. And only some Techdegree students are FSJS Techdegree students.
Posting long blocks of text like this with no code is not the best way to get an answer to a question. That being said, if you have a specific question about a specific piece of code, then I am always willing to help.
Hope this helps!
Karl Russell Sumando Menil
Full Stack JavaScript Techdegree Student 4,004 PointsKarl Russell Sumando Menil
Full Stack JavaScript Techdegree Student 4,004 PointsJennifer Nordell hello ma'am i completely understand thank you for your reply, but i have been struggling to code since this project has no code comments or pseudo-codes, and the instruction or the walkthrough for this project is a little vivid and also i emailed tech degree already and they told me that they would be updating them, but they also told me that in the future there would be a lot less instructions and walkthrough for the future projects to prepare us in the wild, and frankly im just scared of the fact that i my not be able to make it pass project 3 without any guide questions to start with also the html file for this project is externally linked to another script.js file, which i understand that i should make one for myself, but when i try to test my code its not showing bugs or errors and i could not debug them in the console because as i said before its linked somewhere else and i could not unlink the default script.js that comes with the zip file of the project itself which i have no idea if i should just make my own html and css to start with but the instruction say not to edit them, please advise on what to do moving forward, any hints, suggestions and comments are very much welcome and appreciated, thank you in advance for your help. please see link to my first attempt snapshot: https://w.trhou.se/b4qxbya8vy.
Jennifer Nordell
Treehouse TeacherJennifer Nordell
Treehouse TeacherKarl Russell Sumando Menil My advice still stands. The #1 best way to get help is to show your code and ask on Slack. Ask something specific. If you want to show your code on the forums, you'd probably be best off posting a link to a GitHub repository. Given that you've already completed the first two projects, we know you know how to make a GitHub repo.
Part of the process of becoming a developer is learning to solve a problem. Your problem-solving skills are mission-critical here. Learning to use your resources to the best of your ability is a huge skill.
That slack workspace is the best resource you have at your disposal right now. Not the forums and not email. Go to slack and have a conversation about what the problem is. Show your work. Tell them what you've tried. Tell them what you're expecting to happen vs what is actually happening.
Jennifer Nordell
Treehouse TeacherJennifer Nordell
Treehouse TeacherHi there, Karl Russell Sumando Menil! I took a look at the snapshot you posted.. Your JS script is called
app.jsand there is noscript.jsfile. So you can safely remove the line in yourindex.html(line 248) that says:<script src="script.js"></script>That file doesn't exist. After that, there is an error in the console. The error is:
Uncaught SyntaxError: missing ) after argument listAnd if you go into
app.jsand look on line 101 you'll see this:validateData($('#mail'), /^[a-z0-9_-]{3,16}$/;But that has two open parentheses and one closing parentheses. It should have 2, which is what the error is trying to tell you. Make sure you are looking for errors in your browser console and not the workspace console.
You meant:
validateData($('#mail'), /^[a-z0-9_-]{3,16}$/); // see the ) before the semicolon?After you fix this, you will still have errors because you've done this same type of typo with the missing ending parentheses a few times.
Hope this helps until you can get involved in the Slack group!