CS50_Labs/Lab9/birthdays/templates/index.html

51 lines
1.7 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
<link href="/static/styles.css" rel="stylesheet">
<title>Birthdays</title>
</head>
<body>
<div class="jumbotron">
<h1>Birthdays</h1>
</div>
<div class="container">
<div class="section">
<h2>Add a Birthday</h2>
<!-- TODO: Create a form for users to submit a name, a month, and a day -->
<form action = "/" method ="post">
<input type=text name="name" placeholder="Name">
<input type=number name="month" placeholder="Month" min="1" max="12">
<input type=number name="day" placeholder="Day" min="1" max="31">
<input type=submit value="Add birthday">
</form>
</div>
<div class="section">
<h2>All Birthdays</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Birthday</th>
</tr>
</thead>
<tbody>
<!-- TODO: Loop through the database entries to display them in this table -->
{% for birthday in birthdays%}
<tr>
<td>{{birthday.name}}</td>
<td>{{birthday.day}}/{{birthday.month}}</td>
</tr>
{% endfor%}
</tbody>
</table>
</div>
</div>
</body>
</html>