add styles and values and clean up presentation in UI

main.py

@@ -128,8 +128,8 @@ def post_job(request: Request, bt: BackgroundTasks, jobtitle: str = Form(enum=[x
         knowledge = get_onet_knowledge(onetCode)
         abilities = get_onet_abilities(onetCode)
         interests = get_onet_interests(onetCode)
-        #values = get_onet_values(onetCode)
-        #styles = get_onet_styles(onetCode)
+        values = get_onet_values(onetCode)
+        styles = get_onet_styles(onetCode)
 
         bt.add_task(neighborhoods, jobtitle)
         return templates.TemplateResponse('job_list.html', context={
@@ -143,9 +143,9 @@ def post_job(request: Request, bt: BackgroundTasks, jobtitle: str = Form(enum=[x
             'knowledge': knowledge,
             'abilities': abilities,
             'skills': skills,
-            'interests': interests #,
-            #'values': values, 
-            #'styles': styles
+            'interests': interests,
+            'values': values, 
+            'styles': styles
             })
 
 ### JOB NEIGHBORHOODS ###

scrape_onet.py

@@ -29,12 +29,15 @@ def get_onet_tasks(onetCode):
     soup = BeautifulSoup(response.text, 'html.parser')
     tasks = str(soup.get_text('reportsubdesc')).replace("reportsubdesc", " ").replace("ImportanceCategoryTask ", "")
     tasks = clean(tasks)
-    tasks = tasks.split('show all show top 10')[1]
-    tasks = tasks.split('occupations related to multiple tasks')[0]
-    tasks = remove_new_line(tasks).replace("related occupations", " ").replace("core", " - ").replace(" )importance category task", "").replace(" find ", "")
-    tasks = tasks.split(". ")
-    tasks = [''.join(map(lambda c: '' if c in '0123456789-' else c, task)) for task in tasks]
-    return tasks
+    if len(tasks.split('show all show top 10')) > 1:
+        tasks = tasks.split('show all show top 10')[1]
+        tasks = tasks.split('occupations related to multiple tasks')[0]
+        tasks = remove_new_line(tasks).replace("related occupations", " ").replace("core", " - ").replace("supplemental", "").replace("not available", "").replace(" )importance category task", "").replace(" find ", "")
+        tasks = tasks.split(". ")
+        tasks = [''.join(map(lambda c: '' if c in '0123456789-' else c, task)) for task in tasks]
+        return tasks
+    else: 
+        return pd.DataFrame([("We're sorry."), ("This occupation is currently undergoing updates."), ("Please try again later.")])
 
 def get_onet_activities(onetCode):
     headers = {'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.2 Safari/605.1.15'}
@@ -45,19 +48,23 @@ def get_onet_activities(onetCode):
     soup = BeautifulSoup(response.text, 'html.parser')
     tasks = str(soup.get_text('reportsubdesc')).replace("reportsubdesc", " ").replace("ImportanceCategoryTask ", "")
     tasks = clean(tasks)
-    tasks = tasks.split('show all show top 10')[1]
-    tasks = tasks.split('back to top')[0]
-    tasks = remove_new_line(tasks).replace("related occupations", " ").replace("importance work activity", " ")
-    tasks = tasks.split(". ")
-    split_data = [item.split(" -- ")[0] for item in tasks]
-    num_desc = []
-    for i in range(len(tasks)):
-        temp = [','.join(item) for item in split_data][i].split(',')
-        num_desc.append([''.join([c for c in temp if c in '0123456789']), ''.join([c for c in temp if c not in '0123456789']).replace(' ) ', '')])
-    df = pd.DataFrame(num_desc, columns = ['Importance', 'Work Characteristic'])
-    df = df[df['Importance'] != '']
-    activities = df
-    return activities
+    if len(tasks.split('show all show top 10')) > 1:
+        tasks = tasks.split('show all show top 10')[1]
+        tasks = tasks.split('back to top')[0]
+        tasks = remove_new_line(tasks).replace("related occupations", " ").replace("importance work activity", " ")
+        tasks = tasks.split(". ")
+        split_data = [item.split(" -- ")[0] for item in tasks]
+        num_desc = []
+        for i in range(len(tasks)):
+            temp = [','.join(item) for item in split_data][i].split(',')
+            num_desc.append([''.join([c for c in temp if c in '0123456789']), ''.join([c for c in temp if c not in '0123456789']).replace(' ) ', '')])
+        df = pd.DataFrame(num_desc, columns = ['Importance', 'Activity'])
+        df = df[df['Importance'] != '']
+        activities = df
+        return activities
+    else: 
+        return pd.DataFrame([("We're sorry."), ("This occupation is currently undergoing updates."), ("Please try again later.")])
+
     
 def get_onet_context(onetCode):
     headers = {'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.2 Safari/605.1.15'}
@@ -68,19 +75,23 @@ def get_onet_context(onetCode):
     soup = BeautifulSoup(response.text, 'html.parser')
     tasks = str(soup.get_text('reportsubdesc')).replace("reportsubdesc", " ").replace("ImportanceCategoryTask ", "")
     tasks = clean(tasks)
-    tasks = tasks.split('show all show top 10')[1]
-    tasks = tasks.split('back to top')[0]
-    tasks = remove_new_line(tasks).replace("related occupations", " ").replace("importance work activity", " ")
-    tasks = tasks.split("? ")
-    split_data = [item.split(" -- ")[0] for item in tasks]
-    num_desc = []
-    for i in range(len(tasks)):
-        temp = [','.join(item) for item in split_data][i].split(',')
-        num_desc.append([''.join([c for c in temp if c in '0123456789']), ''.join([c for c in temp if c not in '0123456789']).replace(')context work context', '')])
-    df2 = pd.DataFrame(num_desc, columns = ['Importance', 'Work Characteristic'])
-    df2 = df2[df2['Importance'] != '']
-    context = df2
-    return context
+    if len(tasks.split('show all show top 10')) > 1:
+        tasks = tasks.split('show all show top 10')[1]
+        tasks = tasks.split('back to top')[0]
+        tasks = remove_new_line(tasks).replace("related occupations", " ").replace("importance work activity", " ")
+        tasks = tasks.split("? ")
+        split_data = [item.split(" -- ")[0] for item in tasks]
+        num_desc = []
+        for i in range(len(tasks)):
+            temp = [','.join(item) for item in split_data][i].split(',')
+            num_desc.append([''.join([c for c in temp if c in '0123456789']), ''.join([c for c in temp if c not in '0123456789']).replace(')context work context', '')])
+        df2 = pd.DataFrame(num_desc, columns = ['Importance', 'Condition'])
+        df2 = df2[df2['Importance'] != '']
+        context = df2
+        return context
+    else: 
+        return pd.DataFrame([("We're sorry."), ("This occupation is currently undergoing updates."), ("Please try again later.")])
+
 
 def get_onet_skills(onetCode):
     headers = {'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.2 Safari/605.1.15'}
@@ -91,19 +102,23 @@ def get_onet_skills(onetCode):
     soup = BeautifulSoup(response.text, 'html.parser')
     tasks = str(soup.get_text('reportsubdesc')).replace("reportsubdesc", " ").replace("ImportanceCategoryTask ", "")
     tasks = clean(tasks)
-    tasks = tasks.split('show all show top 10')[1]
-    tasks = tasks.split('back to top')[0]
-    tasks = remove_new_line(tasks).replace("related occupations", " ").replace(")importance skill", " ")
-    tasks = tasks.split(". ")
-    split_data = [item.split(" -- ")[0] for item in tasks]
-    num_desc = []
-    for i in range(len(tasks)):
-        temp = [','.join(item) for item in split_data][i].split(',')
-        num_desc.append([''.join([c for c in temp if c in '0123456789']), ''.join([c for c in temp if c not in '0123456789']).replace(')context work context', '')])
-    df3 = pd.DataFrame(num_desc, columns = ['Importance', 'Candidate Characteristic'])
-    df3 = df3[df3['Importance'] != '']
-    skills = df3
-    return skills
+    if len(tasks.split('show all show top 10')) > 1:
+        tasks = tasks.split('show all show top 10')[1]
+        tasks = tasks.split('back to top')[0]
+        tasks = remove_new_line(tasks).replace("related occupations", " ").replace(")importance skill", " ")
+        tasks = tasks.split(". ")
+        split_data = [item.split(" -- ")[0] for item in tasks]
+        num_desc = []
+        for i in range(len(tasks)):
+            temp = [','.join(item) for item in split_data][i].split(',')
+            num_desc.append([''.join([c for c in temp if c in '0123456789']), ''.join([c for c in temp if c not in '0123456789']).replace(')context work context', '')])
+        df3 = pd.DataFrame(num_desc, columns = ['Importance', 'Skill'])
+        df3 = df3[df3['Importance'] != '']
+        skills = df3
+        return skills
+    else: 
+        return pd.DataFrame([("We're sorry."), ("This occupation is currently undergoing updates."), ("Please try again later.")])
+
 
 def get_onet_knowledge(onetCode):
     headers = {'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.2 Safari/605.1.15'}
@@ -114,19 +129,23 @@ def get_onet_knowledge(onetCode):
     soup = BeautifulSoup(response.text, 'html.parser')
     tasks = str(soup.get_text('reportsubdesc')).replace("reportsubdesc", " ").replace("ImportanceCategoryTask ", "")
     tasks = clean(tasks)
-    tasks = tasks.split('show all show top 10')[1]
-    tasks = tasks.split('back to top')[0]
-    tasks = remove_new_line(tasks).replace("related occupations", " ").replace(")importance knowledge", " ")
-    tasks = tasks.split(". ")
-    split_data = [item.split(" -- ")[0] for item in tasks]
-    num_desc = []
-    for i in range(len(tasks)):
-        temp = [','.join(item) for item in split_data][i].split(',')
-        num_desc.append([''.join([c for c in temp if c in '0123456789']), ''.join([c for c in temp if c not in '0123456789']).replace(')context work context', '')])
-    df4 = pd.DataFrame(num_desc, columns = ['Importance', 'Candidate Characteristic'])
-    df4 = df4[df4['Importance'] != '']
-    knowledge = df4
-    return knowledge
+    if len(tasks.split('show all show top 10')) > 1:
+        tasks = tasks.split('show all show top 10')[1]
+        tasks = tasks.split('back to top')[0]
+        tasks = remove_new_line(tasks).replace("related occupations", " ").replace(")importance knowledge", " ")
+        tasks = tasks.split(". ")
+        split_data = [item.split(" -- ")[0] for item in tasks]
+        num_desc = []
+        for i in range(len(tasks)):
+            temp = [','.join(item) for item in split_data][i].split(',')
+            num_desc.append([''.join([c for c in temp if c in '0123456789']), ''.join([c for c in temp if c not in '0123456789']).replace(')context work context', '')])
+        df4 = pd.DataFrame(num_desc, columns = ['Importance', 'Knowledge'])
+        df4 = df4[df4['Importance'] != '']
+        knowledge = df4
+        return knowledge
+    else: 
+        return pd.DataFrame([("We're sorry."), ("This occupation is currently undergoing updates."), ("Please try again later.")])
+
 
 def get_onet_abilities(onetCode):
     headers = {'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.2 Safari/605.1.15'}
@@ -137,19 +156,24 @@ def get_onet_abilities(onetCode):
     soup = BeautifulSoup(response.text, 'html.parser')
     tasks = str(soup.get_text('reportsubdesc')).replace("reportsubdesc", " ").replace("ImportanceCategoryTask ", "")
     tasks = clean(tasks)
-    tasks = tasks.split('show all show top 10')[1]
-    tasks = tasks.split('back to top')[0]
-    tasks = remove_new_line(tasks).replace("related occupations", " ").replace(")importance ability", " ")
-    tasks = tasks.split(". ")
-    split_data = [item.split(" -- ")[0] for item in tasks]
-    num_desc = []
-    for i in range(len(tasks)):
-        temp = [','.join(item) for item in split_data][i].split(',')
-        num_desc.append([''.join([c for c in temp if c in '0123456789']), ''.join([c for c in temp if c not in '0123456789']).replace(')context work context', '')])
-    df5 = pd.DataFrame(num_desc, columns = ['Importance', 'Candidate Characteristic'])
-    df5 = df5[df5['Importance'] != '']
-    abilities = df5
-    return abilities
+    if len(tasks.split('show all show top 10')) > 1:
+        tasks = tasks.split('show all show top 10')[1]
+        tasks = tasks.split('back to top')[0]
+        tasks = remove_new_line(tasks).replace("related occupations", " ").replace(")importance ability", " ")
+        tasks = tasks.split(". ")
+        split_data = [item.split(" -- ")[0] for item in tasks]
+        num_desc = []
+        for i in range(len(tasks)):
+            temp = [','.join(item) for item in split_data][i].split(',')
+            num_desc.append([''.join([c for c in temp if c in '0123456789']), ''.join([c for c in temp if c not in '0123456789']).replace(')context work context', '')])
+        df5 = pd.DataFrame(num_desc, columns = ['Importance', 'Ability'])
+        df5 = df5[df5['Importance'] != '']
+        abilities = df5
+        return abilities
+    else:
+        return pd.DataFrame([("We're sorry."), ("This occupation is currently undergoing updates."), ("Please try again later.")])
+        
+    
 
 def get_onet_interests(onetCode):
     headers = {'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.2 Safari/605.1.15'}
@@ -161,18 +185,22 @@ def get_onet_interests(onetCode):
     tasks = str(soup.get_text('reportsubdesc')).replace("reportsubdesc", " ").replace("ImportanceCategoryTask ", "")
     tasks = clean(tasks)
     tasks = tasks.split("occupational interest interest")[1]#.replace('bright outlook', '').replace('updated 2023', '')
-    tasks = tasks.split('back to top')[0]
-    tasks = remove_new_line(tasks).replace("related occupations", " ").replace(")importance interest", " ")
-    tasks = tasks.split(". ")
-    split_data = [item.split(" -- ")[0] for item in tasks]
-    num_desc = []
-    for i in range(len(tasks)):
-        temp = [','.join(item) for item in split_data][i].split(',')
-        num_desc.append([''.join([c for c in temp if c in '0123456789']), ''.join([c for c in temp if c not in '0123456789']).replace(')context work context', '')])
-    df6 = pd.DataFrame(num_desc, columns = ['Importance', 'Candidate Characteristic'])
-    df6 = df6[df6['Importance'] != '']
-    interests = df6
-    return interests
+    if len(tasks.split('back to top')) > 1:
+        tasks = tasks.split('back to top')[0]
+        tasks = remove_new_line(tasks).replace("related occupations", " ").replace(")importance interest", " ")
+        tasks = tasks.split(". ")
+        split_data = [item.split(" -- ")[0] for item in tasks]
+        num_desc = []
+        for i in range(len(tasks)):
+            temp = [','.join(item) for item in split_data][i].split(',')
+            num_desc.append([''.join([c for c in temp if c in '0123456789']), ''.join([c for c in temp if c not in '0123456789']).replace(')context work context', '')])
+        df6 = pd.DataFrame(num_desc, columns = ['Importance', 'Interest'])
+        df6 = df6[df6['Importance'] != '']
+        interests = df6
+        return interests
+    else: 
+        return pd.DataFrame([("We're sorry."), ("This occupation is currently undergoing updates."), ("Please try again later.")])
+
 
 def get_onet_values(onetCode):
     headers = {'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.2 Safari/605.1.15'}
@@ -192,7 +220,7 @@ def get_onet_values(onetCode):
     for i in range(len(tasks)):
         temp = [','.join(item) for item in split_data][i].split(',')
         num_desc.append([''.join([c for c in temp if c in '0123456789']), ''.join([c for c in temp if c not in '0123456789']).replace(')context work context', '')])
-    df7 = pd.DataFrame(num_desc, columns = ['Importance', 'Candidate Characteristic'])
+    df7 = pd.DataFrame(num_desc, columns = ['Importance', 'Value'])
     df7 = df7[df7['Importance'] != '']
     values = df7
     return values
@@ -208,14 +236,14 @@ def get_onet_styles(onetCode):
     tasks = clean(tasks)
     tasks = tasks.split('show all show top 10')[1]
     tasks = tasks.split('back to top')[0]
-    tasks = remove_new_line(tasks).replace("related occupations", " ").replace(")importance style", " ")
+    tasks = remove_new_line(tasks).replace("related occupations", " ").replace(")importance work style", "").replace(")importance style", " ")
     tasks = tasks.split(". ")
     split_data = [item.split(" -- ")[0] for item in tasks]
     num_desc = []
     for i in range(len(tasks)):
         temp = [','.join(item) for item in split_data][i].split(',')
         num_desc.append([''.join([c for c in temp if c in '0123456789']), ''.join([c for c in temp if c not in '0123456789']).replace(')context work context', '')])
-    df8 = pd.DataFrame(num_desc, columns = ['Importance', 'Candidate Characteristic'])
+    df8 = pd.DataFrame(num_desc, columns = ['Importance', 'Style'])
     df8 = df8[df8['Importance'] != '']
     styles = df8
     return styles

templates/job_list.html

@@ -38,15 +38,12 @@
             </form>
         </section>
         <section>
-            <h1 class="sectiontitle">{{ jobtitle }}</h1>
+            <h1 class="pagesubtitle">{{ jobtitle }}</h1>
             <p class="sectiontext">{{ jobdescription }}</p>
         </section>
-        {% if jobtitle %}
-        <h1 class="pagesubtitle">About the Job</h1>
-        {% endif %}
         {% if tasks %}
         <section>
-            <h1 class="sectiontitle">Work Tasks:</h1>
+            <h1 class="sectiontitle">What {{jobtitle}} do:</h1>
             <ul class="sectionlist">
                 {% for task in tasks %}
                 <li class="sectionlist__item">{{ task }}</li>
@@ -55,15 +52,58 @@
         </section>
         {% endif %}
         {% if jobtitle %}
+        <h1 class="pagesubtitle">About the Job</h1>
+        {% endif %}
+        {% if jobtitle %}
         <section>
-            <h1 class="sectiontitle">Other Work Activities:</h1>
-            <p class="sectiontext">{{ activities }}</p>
+            <h1 class="sectiontitle">Work Activities:</h1>
+            <br>
+            <table>
+                <thead class="output__list">
+                    <tr>
+                        <th class="output__list-coloreditem">Activity</th>
+                        <th class="output__list-coloreditem" scope="col">Importance</th>
+                    </tr>
+                </thead>
+                <tbody class="output__list" style="text-align: left">
+                    {% for n in activities.index %}
+                        <tr>
+                            <th class="output__list-item" scope="row">
+                                {{ activities.loc[n, 'Activity'] }}
+                            </th>
+                            <td class="output__list-item" style="text-align: center">
+                                {{ activities.loc[n, 'Importance'] }}
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
         </section>
         {% endif %}
         {% if jobtitle %}
         <section>
             <h1 class="sectiontitle">Work Conditions:</h1>
-            <p class="sectiontext">{{ conditions }}</p>
+            <br>
+            <table>
+                <thead class="output__list">
+                    <tr>
+                        <th class="output__list-coloreditem">Condition</th>
+                        <th class="output__list-coloreditem" scope="col">Importance</th>
+                    </tr>
+                </thead>
+                <tbody class="output__list" style="text-align: left">
+                    {% for n in conditions.index %}
+                        <tr>
+                            <th class="output__list-item" scope="row">
+                                {{ conditions.loc[n, 'Condition'] }}
+                            </th>
+                            <td class="output__list-item" style="text-align: center">
+                                {{ conditions.loc[n, 'Importance'] }}
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
         </section>
         {% endif %}
         {% if compensation %}
@@ -83,28 +123,163 @@
         {% endif %}
         {% if jobtitle %}
         <section>
-            <h1 class="sectiontitle">Knows About:</h1>
-            <p class="sectiontext">{{ knowledge }}</p>
+            <h1 class="sectiontitle">Knowledge:</h1>
+            <br>
+            <table>
+                <thead class="output__list">
+                    <tr>
+                        <th class="output__list-coloreditem">Knowledge</th>
+                        <th class="output__list-coloreditem" scope="col">Importance</th>
+                    </tr>
+                </thead>
+                <tbody class="output__list" style="text-align: left">
+                    {% for n in knowledge.index %}
+                        <tr>
+                            <th class="output__list-item" scope="row">
+                                {{ knowledge.loc[n, 'Knowledge'] }}
+                            </th>
+                            <td class="output__list-item" style="text-align: center">
+                                {{ knowledge.loc[n, 'Importance'] }}
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </section>
+        {% endif %}
+        {% if jobtitle %}
+        <section>
+            <h1 class="sectiontitle">Skills:</h1>
+            <br>
+            <table>
+                <thead class="output__list">
+                    <tr>
+                        <th class="output__list-coloreditem">Skill</th>
+                        <th class="output__list-coloreditem" scope="col">Importance</th>
+                    </tr>
+                </thead>
+                <tbody class="output__list" style="text-align: left">
+                    {% for n in skills.index %}
+                        <tr>
+                            <th class="output__list-item" scope="row">
+                                {{ skills.loc[n, 'Skill'] }}
+                            </th>
+                            <td class="output__list-item" style="text-align: center">
+                                {{ skills.loc[n, 'Importance'] }}
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </section>
+        {% endif %}
+        {% if jobtitle %}
+        <section>
+            <h1 class="sectiontitle">Abilities:</h1>
+            <br>
+            <table>
+                <thead class="output__list">
+                    <tr>
+                        <th class="output__list-coloreditem">Ability</th>
+                        <th class="output__list-coloreditem" scope="col">Importance</th>
+                    </tr>
+                </thead>
+                <tbody class="output__list" style="text-align: left">
+                    {% for n in abilities.index %}
+                        <tr>
+                            <th class="output__list-item" scope="row">
+                                {{ abilities.loc[n, 'Ability'] }}
+                            </th>
+                            <td class="output__list-item" style="text-align: center">
+                                {{ abilities.loc[n, 'Importance'] }}
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
         </section>
         {% endif %}
         {% if jobtitle %}
         <section>
-            <h1 class="sectiontitle">Is Skilled at:</h1>
-            <p class="sectiontext">{{ skills }}</p>
+            <h1 class="sectiontitle">Interests:</h1>
+            <br>
+            <table>
+                <thead class="output__list">
+                    <tr>
+                        <th class="output__list-coloreditem">Interest</th>
+                        <th class="output__list-coloreditem" scope="col">Importance</th>
+                    </tr>
+                </thead>
+                <tbody class="output__list" style="text-align: left">
+                    {% for n in interests.index %}
+                        <tr>
+                            <th class="output__list-item" scope="row">
+                                {{ interests.loc[n, 'Interest'] }}
+                            </th>
+                            <td class="output__list-item" style="text-align: center">
+                                {{ interests.loc[n, 'Importance'] }}
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
         </section>
         {% endif %}
         {% if jobtitle %}
         <section>
-            <h1 class="sectiontitle">Is Able to:</h1>
-            <p class="sectiontext">{{ abilities }}</p>
+            <h1 class="sectiontitle">Values:</h1>
+            <br>
+            <table>
+                <thead class="output__list">
+                    <tr>
+                        <th class="output__list-coloreditem">Value</th>
+                        <th class="output__list-coloreditem" scope="col">Importance</th>
+                    </tr>
+                </thead>
+                <tbody class="output__list" style="text-align: left">
+                    {% for n in values.index %}
+                        <tr>
+                            <th class="output__list-item" scope="row">
+                                {{ values.loc[n, 'Value'] }}
+                            </th>
+                            <td class="output__list-item" style="text-align: center">
+                                {{ values.loc[n, 'Importance'] }}
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
         </section>
         {% endif %}
         {% if jobtitle %}
         <section>
-            <h1 class="sectiontitle">Is Interested in:</h1>
-            <p class="sectiontext">{{ interests }}</p>
+            <h1 class="sectiontitle">Styles:</h1>
+            <br>
+            <table>
+                <thead class="output__list">
+                    <tr>
+                        <th class="output__list-coloreditem">Style</th>
+                        <th class="output__list-coloreditem" scope="col">Importance</th>
+                    </tr>
+                </thead>
+                <tbody class="output__list" style="text-align: left">
+                    {% for n in styles.index %}
+                        <tr>
+                            <th class="output__list-item" scope="row">
+                                {{ styles.loc[n, 'Style'] }}
+                            </th>
+                            <td class="output__list-item" style="text-align: center">
+                                {{ styles.loc[n, 'Importance'] }}
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
         </section>
         {% endif %}
+        <br>
+        <br>
+        <br>
     </main>
     <footer class="footer">
         <ul class="footer__text">