To-Do-App Starter Code

AtEchoOff

Jul 19th, 2024 (edited)

Never

Add comment

Not a member of Pastebin yet? Sign Up, it unlocks many cool features!

text 4.13 KB | None | 0 0

raw download clone embed print report

-------------------------------------------------------------------------------------
style.css
.form-control {
display: inline-block;
width: 30%;
margin-bottom: 15px;
}
.btn {
padding: .35rem .75rem;
margin-top: -4.5px;
}
.text-center {
text-align: center;
margin-top: 20px;
}
.navbar {
padding: 1rem 1rem;
background-color: #33a09a;
}
.nav-header > a {
color: white;
font-weight: bolder;
font-family: "Arial Black", Gadget, sans-serif;
text-decoration: none;
background-color: transparent;
}
-------------------------------------------------------------------------------------
home.html
{% extends "layout.html" %}
{% block content %}
<h3 class="text-center">List of Todos</h3>
<hr>
<div class="container text-left">
<div class="inputbox-add-task" id="add-task">
<form method="POST" action="/add">
<div class="form-group">
<input class="form-control item" name="name" placeholder="e.g. Play Basketball" required>
<input class="form-control item" name="duedate" placeholder="e.g. Sunday at 11am" required>
<button class="btn btn-primary" id="todo-submit" type="submit" >Add Todo </button>
</div>
</form>
</div>
</div>
<br>
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Due Date</th>
<th>Todo Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% if list != "" %}
{% for task in list %}
<tr>
<td>{{task[1]}}</td>
<td>{{task[2]}}</td>
<td>{{task[3]}}</td>
<td>
<a href="/update/{{task[0]}}" class="btn btn-info">Edit</a>
<a href="/delete/{{task[0]}}" class="btn btn-danger">Delete</a>
</td>
</tr>
{% endfor %}
{% endif %}
</tbody>
</table>
{% endblock content %}
-------------------------------------------------------------------------------------
layout.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/static/style.css">
<title>Todo App</title>
</head>
<body>
<div class="container">
<nav class="navbar">
<div class="nav-center">
<div class="nav-header">
<a href="/">
{% if user !='' %}
{{user}}'s ToDo Lists
{% else %}
ToDo List App
{% endif %}
</a>
</div>
</div>
</nav>
<div class="content-section">
{% block content %}{% endblock %}
</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------
edit.html
{% extends "layout.html" %}
{% block content %}
<h3 class="text-center">Editing a Todo task...</h3>
<hr>
<div class="container text-left">
<div class="inputbox-add-task" id="add-task">
<form method="POST" action="/update/{{task[0]}}">
<div class="form-group">
<input class="form-control item" name="name" required value="{{task[1]}}"}> <br />
<input class="form-control item" name="duedate" required value="{{task[2] }}"> <br />
<input class="form-control item" name="status" required value="{{task[3]}}"> <br />
<button class="btn btn-primary" id="todo-submit" type="submit">Update Todo </button>
</div>
</form>
</div>
</div>
{% endblock content %}

Add Comment

Please, Sign In to add comment