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!

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

Python Flask Basics Character Builder Starting the Builder

Johnny Austen
.a{fill-rule:evenodd;}techdegree seal-36
Johnny Austen
Front End Web Development Techdegree Graduate 35,494 Points

Bit 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
Jennifer Nordell
Treehouse Teacher

Hi 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! :smiley:

Hope this helps! :sparkles: