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