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
Johnny Austen
Front End Web Development Techdegree Graduate 35,494 PointsBit lost on how we're getting the background set. (Starting the Builder)
So we are pulling the list of colours from options, looping through it, and displaying these options as radio buttons. But what are the id, name and value doing specifically?
Beyond that, I'm a bit confused as to how we're checking/setting the background colour. If anyone can advise that would be greatly appeciated.
(<div class="colors">
{% for color in options['colors'] %}
<input type="radio" id="{{ color }}" name="colors" value="{{ color }}"
{% if saves.get('colors') == color %}checked{% endif %}>
<label for="{{ color }}"></label>
{% endfor %}
<button class="btn">Update</button>
</div>
</div>
<div id="bear" class="grid-100 bg-{{ saves.get('colors') }}">)
1 Answer
Jennifer Nordell
Treehouse TeacherHi there, Johnny Austen ! The id is typically used for styling and/or targeting an element with JavaScript. The "name" attribute is what is sent along in the POST request. And the value, is the value that is sent along and attached to that "name".
The answer to how the background color is being set isn't really in the Python. It's in the the CSS. Check out the CSS rules in main.css. Assuming we checked "yellow", then this:
<div id="bear" class="grid-100 bg-{{ saves.get('colors') }}">
Would render the HTML:
<div id="bear" class="grid-100 bg-yellow">
On line 320 of main.css we find this rule:
.bg-yellow { background: rgb(249, 199, 30); }
So the background turns yellow!
Hope this helps!
