It’s a task management tool.
Basically, I want to pick several categories, and assign a ratio or proportion of effort to each category. Then, I want to add tasks. Each task will have a title, description, time estimate, and a category. Based on my configurable free time (24 hrs - 8 hrs sleep - 4 hrs logistics), the tool should show me what tasks I will complete when, based on the order, the category ratios, and time estimates.
Does that make sense? For example, I’ll have “Work” and “Chores” for categories, and I’ll give 6 hours for work and 2 hours for chores. So, if I have a work task that will take 2 hours, it’ll be done in one day, but if I have a chore that takes 4, it’ll take two days (plus maybe some fuzz time) to complete.
I’d like to see waterlines (aka, what I’ll have finished by tomorrow, by the end of the week, and by the end of the month) on a list of these items, and I’d like to be able to drag items up and down within their categories to order them by priority, and to insert items at the end of the list, or mid-list, with a click.
ChatGPT tried:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Management Tool</title>
<style>
body { font-family: Arial, sans-serif; }
.container { width: 80%; margin: 0 auto; }
input, select, button { margin: 10px 0; }
#tasks { margin-top: 20px; }
</style>
</head>
<body>
<div class="container">
<h2>Task Management Tool</h2>
<div>
<h4>Define Categories and Time Allocations</h4>
<input type="text" id="categoryName" placeholder="Category Name">
<input type="number" id="categoryTime" placeholder="Hours (e.g., 6)">
<button onclick="addCategory()">Add Category</button>
<div id="categories"></div>
</div>
<div>
<h4>Add a Task</h4>
<input type="text" id="taskTitle" placeholder="Task Title">
<textarea id="taskDescription" placeholder="Task Description"></textarea>
<input type="number" id="taskTime" placeholder="Time Estimate (hours)">
<select id="taskCategory">
<option value="">Select Category</option>
</select>
<button onclick="addTask()">Add Task</button>
</div>
<div id="tasks">
<h4>Tasks and Completion Schedule</h4>
<ul id="taskList"></ul>
</div>
</div>
<script>
let categories = {};
let tasks = [];
function addCategory() {
const name = document.getElementById('categoryName').value;
const time = parseInt(document.getElementById('categoryTime').value);
if(name && time) {
categories[name] = time;
updateCategoryList();
}
}
function updateCategoryList() {
const categoryList = document.getElementById('taskCategory');
categoryList.innerHTML = '<option value="">Select Category</option>';
for (const name in categories) {
const option = document.createElement('option');
option.value = name;
option.textContent = name;
categoryList.appendChild(option);
}
const categoriesDiv = document.getElementById('categories');
categoriesDiv.innerHTML = '';
for (const name in categories) {
categoriesDiv.innerHTML += name + ': ' + categories[name] + ' hours<br>';
}
}
function addTask() {
const title = document.getElementById('taskTitle').value;
const description = document.getElementById('taskDescription').value;
const time = parseInt(document.getElementById('taskTime').value);
const category = document.getElementById('taskCategory').value;
if(title && description && time && category) {
tasks.push({ title, description, time, category });
updateTaskList();
}
}
function updateTaskList() {
const taskList = document.getElementById('taskList');
taskList.innerHTML = '';
tasks.forEach(task => {
const li = document.createElement('li');
li.textContent = `Task: ${task.title}, Time: ${task.time} hours, Category: ${task.category}`;
taskList.appendChild(li);
});
}
</script>
</body>
</html>