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

HTML

T-Shirt Info" section, Any hints, suggestions and comments are welcome thank you in advance for your help!!!

The "T-Shirt Info" section has conditional options. The "Design" or "Theme" menu has two options, and the "Color" menu has six. But only three of the colors are available for each of the "Design" options. To prevent users from selecting an invalid color for a particular theme, the "Color" menu should be disabled by default. Once a theme is selected, the "Color" menu should be enabled, and the color options need to be displayed/hidden based on which theme the user has selected.

Programming the "T-Shirt Info" section requires working with the following elements:

The "Design" <select> element The "Color" <select> element The option element children of the the "Color" <select> element Create variables to reference the "Design" <select> element and the "Color" <select> element. The color option elements can be referenced by targeting the .children property of the "Color" <select> element. Log the variables out to the console to ensure the correct elements are being referenced. Use the color variable and dot notation to set the disabled property of the element to true. Use the variable for the "Design" or "Theme" menu to listen for the change event on this element. In the event listener, enable the “Color” <select> element that was previously disabled. Also in the event listener, loop over the option element children of the "Color" <select> element. The children property will be helpful here. In the loop, create variables to reference the following two items: The value of the event.target The "data-theme" attribute of the loop’s current option element. The getAttribute method will be helpful here. Log out the two variables that were just created to inspect them. You’ll have to make a selection in the "Design" menu to print those log statements to the console. Still in the loop, create a conditional that checks if the two variables that were just created are equal to one another. If they are, set the hidden property of the loop’s current option element to false, and set the selected attribute of the loop’s current option element to true. And if the two variables are not equal to one another, set the hidden property of the loop’s current option element to true, and set the selected attribute of the loop’s current option element to false.