Python Flask Basics Character Builder Starting the Builder

Johnny Austen
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Johnny Austen
Python Development Techdegree Graduate 16,101 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
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Staff

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: