Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,455 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: