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

JavaScript

Stan Shvaika
seal-mask
.a{fill-rule:evenodd;}techdegree
Stan Shvaika
Full Stack JavaScript Techdegree Student 9,689 Points
Posted by Stan Shvaika
.a{fill-rule:evenodd;}techdegree
Stan Shvaika
Full Stack JavaScript Techdegree Student 9,689 Points

Can I change HTML and CSS code when I work on the JS project?

Hello. Now I'm working on the "Build an Interactive Form" project (Full Stack JavaScript). I would change HTML code to make my JavaScript easier but can I do that? Or do I have to work only on JS files? I am not sure.

1 Answer

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

If you're talking about the course challenges, it's important to do only the tasks given in the instructions. Anything extra may prevent the checking mechanism from scoring you properly.

For the "follow along" projects, you can deviate, but be careful not to make it so different that you can no longer "follow along".

Stan Shvaika
seal-mask
.a{fill-rule:evenodd;}techdegree
Stan Shvaika
Full Stack JavaScript Techdegree Student 9,689 Points
Stan Shvaika
.a{fill-rule:evenodd;}techdegree
Stan Shvaika
Full Stack JavaScript Techdegree Student 9,689 Points

It is an example.

Task: T-Shirt Info” section of the form:

  • For the T-Shirt color menu, only display the color options that match the design selected in the "Design" menu.
  • If the user selects "Theme - JS Puns" then the color menu should only display "Cornflower Blue," "Dark Slate Grey," and "Gold."
  • If the user selects "Theme - I ♥ JS" then the color menu should only display "Tomato," "Steel Blue," and "Dim Grey."

Source HTML code:

<div>
          <label for="design">Design:</label>
          <select id="design" name="user_design">
            <option>Select Theme</option>
            <option value="js puns">Theme - JS Puns</option>
            <option value="heart js">Theme - I &#9829; JS</option>
          </select>
</div>
<div id="colors-js-puns" class="">
          <label for="color">Color:</label>
          <select id="color">
            <option value="cornflowerblue">Cornflower Blue (JS Puns shirt only)</option>
            <option value="darkslategrey">Dark Slate Grey (JS Puns shirt only)</option>
            <option value="gold">Gold (JS Puns shirt only)</option>
            <option value="tomato">Tomato (I &#9829; JS shirt only)</option>
            <option value="steelblue">Steel Blue (I &#9829; JS shirt only)</option>
            <option value="dimgrey">Dim Grey (I &#9829; JS shirt only)</option>
          </select>
</div>

My modified HTML code:

<div>
          <label for="design">Design:</label>
          <select id="design" name="user_design">
            <option>Select Theme</option>
            <option value="js puns" data-name="puns">Theme - JS Puns</option>
            <option value="heart js" data-name="heart">Theme - I &#9829; JS</option>
          </select>
</div>
<div id="colors-js-puns" class="">
          <label for="color">Color:</label>
          <select id="color">
            <option value="cornflowerblue" data-relation="puns">Cornflower Blue (JS Puns shirt only)</option>
            <option value="darkslategrey" data-relation="puns">Dark Slate Grey (JS Puns shirt only)</option>
            <option value="gold" data-relation="puns">Gold (JS Puns shirt only)</option>
            <option value="tomato" data-relation="heart">Tomato (I &#9829; JS shirt only)</option>
            <option value="steelblue" data-relation="heart">Steel Blue (I &#9829; JS shirt only)</option>
            <option value="dimgrey" data-relation="heart">Dim Grey (I &#9829; JS shirt only)</option>
          </select>
</div>

So, I've added data-relation and data-name attributes because it can make my JS code more understandable and universal.

Seth Kroger
Seth Kroger
56,413 Points
Seth Kroger
Seth Kroger
56,413 Points

Given this is a Techdegree project you should ask in your Slack channel for a definitive answer. We're just fellow community members and have no connection with the Techdegree side of things.