Add cards to name information feature to distinguish meaning, nationa…

…lize, genderize, and agify results; update wording on UI

app.py

@@ -87,7 +87,10 @@ def name_information():
 
     """
     template_data = {
-        "texts": "",
+        "name_meaning": "",
+        "nationalize": [],
+        "genderize": (),
+        "agify": "",
         # ** Uncomment for Spotify API data
         # "spotify_data": {},
         "world_map_json": "{}",
@@ -100,18 +103,16 @@ def name_information():
         # get first and last names if provided
         first, last = names.split_full_name(name)
 
-        name_meaning = names.get_name_meaning(first, gender)
-        nationalize_results = names.get_formatted_nationality(last)
-        gender_predictions = names.genderize(first)
-        age_prediction = names.agify(first)
+        template_data["name_meaning"] = names.get_name_meaning(first, gender)
+        template_data["nationalize"] = names.get_formatted_nationality(last)
+        template_data["genderize"] = names.genderize(first)
+        template_data["agify"] = names.agify(first)
 
-        template_data["texts"] = [name_meaning, *
-                                  nationalize_results, gender_predictions, age_prediction]
         # ** Uncomment to display song matching name from Spotify API
         # template_data["spotify_data"] = names.spotify_track(name)
 
         # display map if no errors with nationalize
         if isinstance(names.nationalize(last), list):
             world_map = visualizations.create_nationalize_map(last)
             template_data["world_map_json"] = world_map.to_json()
-    return render_template('name_info.html', **template_data)
+    return render_template('name_info.html', **template_data)

names.py

@@ -221,25 +221,21 @@ def get_formatted_nationality(last_name):
     input:
         last_name: string
     output:
-        list containing formatted nationality predictions or  error message
+        list containing formatted nationality predictions or error message
     """
     nationalize_output = nationalize(last_name)
 
     # check if output is error
     if not isinstance(nationalize_output, list):
-        return [nationalize_output]
+        return [(nationalize_output,)]
 
     # reformat data to be readable strings
     nationalize_predictions = get_country_codes(nationalize_output)
-    nationalize_formatted = []
-    for entry in nationalize_predictions:
-        formatted_string = (
-            f"{entry['country_name']} - predicted likelihood: "
-            f"{entry['probability'] * 100:.2f}%"
-        )
-        nationalize_formatted.append(formatted_string)
+    nationalize_tuples = [
+        (entry['country_name'], round(entry['probability'] * 100, 2))
+        for entry in nationalize_predictions]
 
-    return nationalize_formatted
+    return nationalize_tuples
 
 
 def genderize(name):
@@ -264,11 +260,10 @@ def genderize(name):
         return f"An error occurred (Genderize API): {e}"
 
     data = response.json()
-    gender_info = (
-        f"Predicted gender: {data.get('gender', 'unknown')} - "
-        f"probability: {round(data.get('probability', 0) * 100, 2)}%"
-    )
-    return gender_info
+    gender = data.get('gender', 'unknown')
+    probability = data.get('probability', 0) * 100
+
+    return (gender, round(probability, 2))
 
 
 def agify(name):
@@ -293,8 +288,8 @@ def agify(name):
 
     data = response.json()
     age = data.get('age', 'unknown')
-    return (f"Predicted age: {age}" if age != "unknown"
-            else f"Error: No age prediction for name {name}.")
+
+    return age
 
 
 def spotify_track(name):

templates/generate_form.html

@@ -3,23 +3,23 @@
   <h1 class="display-5">Generate a Random Name</h1>
   <form method="post" action="/random_name" class="my-3">
     <div class="mb-3">
-      <label for="gender" class="form-label">Select gender</label>
+      <label for="gender" class="form-label">Gender</label>
       <select name="gender" id="gender" class="form-select">
         <option value="">Any gender</option>
         <option value="m">Male</option>
         <option value="f">Female</option>
       </select>
     </div>
     <div class="mb-3">
-      <label for="numberOfNames" class="form-label">Select number of names to generate</label>
+      <label for="numberOfNames" class="form-label">Number of names to generate</label>
       <input type="number" id="numberOfNames" class="form-control" name="num_names"
         placeholder="Number of names to generate" min="1" max="100" required />
     </div>
     <div class="mb-3">
-      <label for="surname" class="form-label">Generate surnames</label>
+      <label for="surname" class="form-label">Surnames</label>
       <select name="surname" id="surname" class="form-select">
-        <option value="">No surname</option>
-        <option value="yes">Surname</option>
+        <option value="">No surname(s)</option>
+        <option value="yes">Surname(s)</option>
       </select>
     </div>
     <button type="submit" class="btn btn-primary">Generate names</button>

templates/name_info.html

@@ -2,10 +2,11 @@
 <main class="container my-5">
   <h1 class="display-5">Get Information for a Name</h1>
   <form action="/name_information" method="post" class="mb-3">
-    <label for="name" class="form-label">Enter a first name (Emma) or a full name (Emma Smith)</label>
-    <input type="text" id="name" class="form-control" name="name" placeholder="Enter name" required />
-    </div>
     <div class="mb-3">
+      <label for="name" class="form-label">Enter a first name (Emma) or a full name (Emma Smith)</label>
+      <input type="text" id="name" class="form-control" name="name" placeholder="Enter name" required />
+    </div>
+    <div class="mb-3 mt-4">
       <label for="gender" class="form-label">Gender</label>
       <select name="gender" id="gender" class="form-select" required>
         <option value="" selected disabled hidden>Select a gender</option>
@@ -17,16 +18,66 @@ <h1 class="display-5">Get Information for a Name</h1>
   </form>
 
   <!-- Check if inputs have been passed to the template -->
-  {% if texts %}
+  {% if name_meaning and nationalize and genderize and agify %}
   <h2 class="mt-4">
     Name Information for
     <span style="color: blue">{{ request.form['name'].capitalize() }}</span>
   </h2>
-  <ul class="list-group mb-4">
-    {% for text in texts %}
-    <li class="list-group-item">{{ text }}</li>
-    {% endfor %}
-  </ul>
+  <div class="card mb-4">
+    <div class="card-header">
+      Name Meaning
+    </div>
+    <div class="card-body">
+      <p>{{ name_meaning }}</p>
+    </div>
+  </div>
+
+  <div class="card mb-4">
+    <div class="card-header">
+      Predicted Nationalities
+    </div>
+    <ul class="list-group list-group-flush">
+      {% if nationalize[1] is none %}
+      <p class="list-group-item d-flex justify-content-between align-items-center">{{ nationalize[0][0] }}</p>
+      {% else %}
+      {% for result in nationalize %}
+      <li class="list-group-item d-flex justify-content-between align-items-center">
+        <p>Country: <strong>{{ result[0] }}</strong>
+          | Probability: <strong>{{ result[1] }}%</strong></p>
+      </li>
+      {% endfor %}
+      {% endif %}
+    </ul>
+  </div>
+
+  <!-- Predicted Gender -->
+  <div class="card mb-4">
+    <div class="card-header">
+      Predicted Gender
+    </div>
+    <div class="card-body">
+      {% if genderize is string %}
+      <p>{{ genderize }}</p>
+      {% else %}
+      <p>Gender: <strong>{{ genderize[0] }}</strong></p>
+      <p>Probability: <strong>{{ genderize[1] }}%</strong></p>
+      {% endif %}
+    </div>
+  </div>
+
+  <!-- Predicted Age -->
+  <div class="card mb-4">
+    <div class="card-header">
+      Predicted Age
+    </div>
+    <div class="card-body">
+      {% if agify is string %}
+      <p>{{ agify }}</p>
+      {% else %}
+      <p><strong>{{ agify }} years old</strong></p>
+      {% endif %}
+    </div>
+  </div>
 
   {# TODO: uncomment for Spotify integration {% for key, value in
   spotify_data.items() %}