Skip to content

Commit

Permalink
Add Bootstrap; format name information and error handling; add comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@lk101101
lk101101 committed Jul 1, 2024
1 parent 28ec1f5 commit 92aa2b5
Show file tree
Hide file tree
Showing 8 changed files with 192 additions and 115 deletions.
4 changes: 2 additions & 2 deletions names.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -321,8 +321,6 @@ def spotify_track(name):

return track_data

# TODO: handle error output from nationalize()


def name_information(name, gender):
"""
Expand All @@ -341,7 +339,9 @@ def name_information(name, gender):
nationalize_predictions = nationalize(name)
nationalize_formatted = []

# check if string (error)
if not isinstance(nationalize_predictions, list):
# format as list to unpack in return statement
nationalize_formatted = [nationalize_predictions]
else:
for entry in nationalize_predictions:
Expand Down
Binary file added static/favicon.ico
View file
Binary file not shown.
23 changes: 20 additions & 3 deletions templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,37 @@
<head>
<meta charset="UTF-8">
<title>Names</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<!-- Load Vega, Vega-Lite, and Vega-Embed -->
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
<!-- Load Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
</head>

<body>
<header>
<div id="nav">
<a href="{{ url_for('home') }}" class="button">Home</a>
</div>
<!-- only show home button when not on index.html -->
{% if request.endpoint != 'home' %}
<div id="nav" class="p-2">
<a href="/" class="btn btn-light" role="button" aria-pressed="true" title="Home">
<i class="bi bi-house-door-fill"></i>
</a>
</div>

{% endif %}

</header>
{% block content %}{% endblock %}

<!-- Load Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>

{% block scripts %}{% endblock %}
</body>

Expand Down
75 changes: 44 additions & 31 deletions templates/data_visualizations.html
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,60 @@
{% extends "base.html" %}

{% block content %}
<form action="/data_visualizations" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter Name" required>

<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="">Please select</option>
<option value="m">Boy</option>
<option value="f">Girl</option>
</select>

<label for="start_year">Start Year:</label>
<input type="number" id="start_year" name="start_year" min="1880" max="2022" placeholder="1880" required>

<label for="end_year">End Year:</label>
<input type="number" id="end_year" name="end_year" min="1880" max="2022" placeholder="2022" required>

<input type="submit" value="Generate Chart">
<div class="container my-5">
<form action="/data_visualizations" method="post" class="row g-3">
<div class="col-md-6">
<label for="name" class="form-label">Name:</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Enter name" required>
</div>

<div class="col-md-6">
<label for="gender" class="form-label">Gender:</label>
<select class="form-select" id="gender" name="gender" required>
<option value="">Select a gender</option>
<option value="m">Boy</option>
<option value="f">Girl</option>
</select>
</div>

<div class="col-md-6">
<label for="start_year" class="form-label">Start year</label>
<input type="number" class="form-control" id="start_year" name="start_year" min="1880" max="2022"
placeholder="1880" required>
</div>

<div class="col-md-6">
<label for="end_year" class="form-label">End year</label>
<input type="number" class="form-control" id="end_year" name="end_year" min="1880" max="2022"
placeholder="2022" required>
</div>

<div class="col-12">
<button type="submit" class="btn btn-primary">Generate chart</button>
</div>

</form>

{% if chart_json != '{}' and chart_json2 != '{}' %}
<h2>Displaying visualizations for {{ request.form['name'].capitalize() }} between {{ request.form['start_year'] }}-{{ request.form['end_year'] }}</h2>
<div id="viz1"></div>
<div id="viz2"></div>
<h2 class="mt-4">Displaying visualizations for {{ request.form['name'].capitalize() }} between {{
request.form['start_year'] }}-{{ request.form['end_year'] }}</h2>
<div id="viz1" class="mb-4"></div>
<div id="viz2" class="mb-4"></div>

{% block scripts %}
<script type="text/javascript">
{% block scripts %}
<script type="text/javascript">
var chartSpecJson = {{ chart_json | safe }};
var chartSpec2Json = {{ chart_json2 | safe }};

// check if chart jsons are empty
if (chartSpecJson && JSON.stringify(chartSpecJson) !== '{}') {
var chart_spec = chartSpecJson;
vegaEmbed('#viz1', chart_spec);
vegaEmbed('#viz1', chartSpecJson);
}

if (chartSpec2Json && JSON.stringify(chartSpec2Json) !== '{}') {
var chart_spec2 = chartSpec2Json;
vegaEmbed('#viz2', chart_spec2);
vegaEmbed('#viz2', chartSpec2Json);
}
</script>
{% endblock %}
{% endif %}
</script>
{% endblock %}
{% endif %}
</div>
{% endblock %}
63 changes: 46 additions & 17 deletions templates/generate_form.html
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,57 @@
{% extends "base.html" %}

{% block content %}
<h2>Generate a Random Name</h2>
<form method="post" action="/random_name">
<select name="gender">
<option value="">Any</option>
<option value="m">Male</option>
<option value="f">Female</option>
</select>
<input type="number" name="num_names" placeholder="Number of names to generate" min="1" required>
<select name="surname">
<option value="">No surname</option>
<option value="yes">Surname</option>
</select>
<input type="submit" value="Generate">
<div class="container my-5">
<h1 class="display-5">Generate a Random Name</h1>
<form method="post" action="/random_name" class="my-3">
<div class="mb-3">
<select name="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">
<input type="number" class="form-control" name="num_names" placeholder="Number of names to generate" min="1" max="100"
required>
</div>
<div class="mb-3">
<select name="surname" class="form-select">
<option value="">No surname</option>
<option value="yes">Surname</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Generate names</button>
</form>

<!-- Check if names have been passed to the template -->
{% if names %}
<h2>Generated Names</h2>
<ul>
<!-- Format query -->
{% if request.form['gender'] == 'm' %}
{% set gender_text = 'male' %}
{% elif request.form['gender'] == 'f' %}
{% set gender_text = 'female' %}
{% else %}
{% set gender_text = '' %}
{% endif %}
{% set surname_text = 'with surnames' if request.form['surname'] == 'yes' else '' %}
{% set name_count = request.form['num_names'] %}

<h2 class="mt-4">Generated
<span style="color: blue;">{{ name_count }}</span>
{% if gender_text %}
<span style="color: blue;">{{ gender_text }}</span>
{% endif %}
{{ 'name' if name_count|int == 1 else 'names' }}
<span style="color: blue;">{{ surname_text }}</span>
</h2>

<!-- List generated names -->
<ul class="list-group">
{% for name in names %}
<li>{{ name }}</li>
<li class="list-group-item">{{ name }}</li>
{% endfor %}
</ul>
{% endif %}
{% endblock %}
</div>
{% endblock %}
61 changes: 37 additions & 24 deletions templates/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,44 @@
<!DOCTYPE html>
<html lang="en">
{% extends "base.html" %}

<head>
<meta charset="UTF-8">
<title>Name App</title>
</head>

<body>
<h1>Welcome to the Name App!</h1>
{% block content %}
<div class="container text-center mt-5">
<h1 class="display-4">The Name App</h1>

<!-- Random Name Generator -->
<h2>Generate a Random Name</h2>
<form action="/random_name">
<input type="submit" value="Generate">
</form>
<div class="mt-4">
<h2><button type="button" class="btn btn-primary" onclick="location.href='/random_name'">Generate a Random
Name</button></h2>
<p>Generate random first and last names!</p>
</div>

<!-- Name Information -->
<h2>Get Name Information</h2>
<form action="/name_information">
<input type="submit" value="Get Information">
</form>
<div class="mt-4">
<h2><button type="button" class="btn btn-primary" onclick="location.href='/name_information'">Get Name
Information</button></h2>
<p>Retrieve information about a name's meaning, origin, and more!</p>
</div>

<!-- Visualizations -->
<div class="mt-4">
<h2><button type="button" class="btn btn-primary" onclick="location.href='/data_visualizations'">Create
Visualizations</button></h2>
<p>Learn more about the popularity of a name of your choice!</p>
</div>

<!-- TO DO -->
<h2>Create Visualizations</h2>
<form action="/data_visualizations">
<input type="submit" value="Get Information">
</form>
</body>
<!-- <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<span class="mb-3 mb-md-0 text-body-secondary">Created by Lara</span>
</div>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3">
<a class="text-body-secondary">
<svg class="bi" width="24" height="24">
<use xlink:href="https://github.com/lk101101/Names"></use>
</svg>
</a>
</li>
</ul>
</footer> -->

</html>
</div>
{% endblock %}
75 changes: 40 additions & 35 deletions templates/name_info.html
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,52 @@
{% extends "base.html" %}

{% block content %}
<h2>Get Information for a Name</h2>
<form action="/name_information" method="post">
<input type="text" name="name" placeholder="Name" required />
<select name="gender" required>
<option value="">Please select</option>
<div class="container my-5">
<h1 class="display-5">Get Information for a Name</h1>
<form action="/name_information" method="post" class="my-3">
<div class="mb-3">
<input type="text" class="form-control" name="name" placeholder="Name" required />
</div>
<div class="mb-3">
<select name="gender" class="form-select" required>
<option value="">Select a gender</option>
<option value="boy">Boy</option>
<option value="girl">Girl</option>
</select>
<input type="submit" value="Get Information" />
</form>
</div>
<button type="submit" class="btn btn-primary">Get Information</button>
</form>

<!-- Check if inputs have been passed to the template -->

{% if texts %}
<h2>Name Information for '{{ request.form['name'].capitalize() }}'</h2>
<ul>
{% for text in texts %}
<li>{{ text }}</li>
{% endfor %}
</ul>

{# TODO: uncomment for Spotify integration
{% for key, value in spotify_data.items() %}
<div> {{ key }}: {{ value }} </div>
<!-- Check if inputs have been passed to the template -->
{% if texts %}
<h2 class="mt-4"">Name Information for '{{ request.form['name'].capitalize() }}'</h2>
<ul class="list-group mb-4">
{% for text in texts %}
<li class="list-group-item">{{ text }}</li>
{% endfor %}
#}
</ul>

{# TODO: uncomment for Spotify integration
{% for key, value in spotify_data.items() %}
<div> {{ key }}: {{ value }} </div>
{% endfor %}
#}

<!-- Container for the visualization -->
{% if world_map_json != '{}' %}
<div id="world_map"></div>
{% if world_map_json != '{}' %}
<!-- Container for the visualization -->
<div id="world_map"></div>

{% block scripts %}
<script type="text/javascript">
var worldMapJson = {{ world_map_json | safe }};
{% block scripts %}
<script type="text/javascript">
var worldMapJson = {{ world_map_json | safe }};

if (worldMapJson && JSON.stringify(worldMapJson) !== '{}') {
var chart_spec = worldMapJson;
vegaEmbed('#world_map', chart_spec);
}
</script>
{% endblock %}
{% endif %}
{% endif %}
if (worldMapJson && JSON.stringify(worldMapJson) !== '{}') {
var chart_spec = worldMapJson;
vegaEmbed('#world_map', chart_spec);
}
</script>
{% endblock %}
{% endif %}
{% endif %}
</div>
{% endblock %}
Loading

0 comments on commit 92aa2b5

Please sign in to comment.