Python Flask Basics Character Builder Starting the Builder

Yosef Fastow
Yosef Fastow
18,526 Points

Trouble making the bear background change color!

I'm following along the lesson in workspace in making builder but I can't get the background to change color. I did everything like Kennith Love did in the lesson but it still doesn't work. I checked and found nothing missing bur I might of missed something.

{% extends "layout.html" %}

{% block content %}
<!--Build Area -->
<form action="{{ url_for('save') }}" method="POST" class="wrap no-top">
    <div class="grid-100 row">
        <div class="grid-30">
            <div class="title">
                <input type="text" name="name" value="{{ saves.get('name', '') }}">
            </div>
        </div>
        <div class="grid-70">
            <div class="colors">
                {% for color in options['colors'] %}
                    <input type="radio" id="{{ color }}" name="colors" values"{{ 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') }}">
            <div class="bear-body"><img src="/static/img/bear_body.svg" /></div>
            <div class="head"><img src="/static/img/bear_face.svg" /></div>
            <div class="nose"><img src="/static/img/bear_nose.svg" /></div>
        </div>
        <div class="items">
        </div>
    </div>
</form>

{% endblock %}

[MOD: added jinja to markdown formatting -cf]

3 Answers

Chris Freeman
MOD
Chris Freeman
Treehouse Moderator 65,180 Points

Hi Yosef, it looks like you have typos in the use of saves.get('colors'). It should be the non-plural 'color'. Changing the two uses to:

saves.get('color')

should fix it. It is easily confused, since the options references the plural colors.

Post back if that wasn't the issue.

Yosef Fastow
Yosef Fastow
18,526 Points

Thanks! I tried that but it didn't help so I decided to delete all of the script that I added and start again and after that it worked. I still don't know what was wrong before. I had a similar problem earlier in the lesson on the my_app project that when I changed the css and javascript and pressed refresh it loaded the web without those changes. I sew in the community forum that others had that same problem and someone said just to refresh a few times and that worked. So maybe it was some type of bug or something like that.

Dylan Thunn
Dylan Thunn
22,657 Points

I'm having this same problem, but Kenneth literally says change it saves.get('colors') from saves.get('color')

I am also having issues with my code. Even if I add in saves.get('color') or saves.get('colors'), I'm always getting a window that says my workspace is unavailable.

{% extends "layout.html" %}

{% block content %}
<!--Build Area -->
<form action="{{ url_for('save') }}" method="POST" class="wrap no-top">
    <div class="grid-100 row">
        <div class="grid-30">
            <div class="title">
                <input type="text" name="name" value="{{ saves.get('name', '') }}">
            </div>
        </div>
        <div class="grid-70">
            <div class="colors">
                {% for color in options['colors'] %}
                    <input type="radio" id="{{ color }}" name="colors" values"{{ 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') }}">
            <div class="bear-body"><img src="/static/img/bear_body.svg" /></div>
            <div class="head"><img src="/static/img/bear_face.svg" /></div>
            <div class="nose"><img src="/static/img/bear_nose.svg" /></div>
        </div>
        <div class="items">
        </div>
    </div>
</form>

{% endblock %}
Kortney Field
Kortney Field
14,081 Points

I am having similar problem. Can you see anything wrong with my code?

{% extends "layout.html" %}

{% block content %}
<!--Build Area -->
<form action="{{ url_for('save') }}" method="POST" class="wrap no-top">
    <div class="grid-100 row">
        <div class="grid-30">
            <div class="title">
                <input type="text" name="name" value="{{ saves.get('name', '') }}">
            </div>
        </div>
        <div class="grid-70">
            <div class="colors">
              {% for color in options['colors'] %}
                <input type='radio' id="{{ color }}" name="colors" value'{{color}}'
                  {% if saves.get('color') == color %} checked {% endif%}>
                <label for="{{ color }}"></label>
              {% endfor %}
                  <button class="btn">Update</button>

            </div> 
        </div>
        <div id="bear" class="grid-100 bg-{{ saves.get('color') }}">
            <div class="bear-body"><img src="/static/img/bear_body.svg" /></div>
            <div class="head"><img src="/static/img/bear_face.svg" /></div>
            <div class="nose"><img src="/static/img/bear_nose.svg" /></div>
        </div>
        <div class="items">
        </div>
    </div>
</form>

{% endblock %}

Yosef Fastow Kortney Field you have a typo in your codes value'{{ color }}' should be value='{{ color }}' Hope this helps!