Calculator Tools Calculator Tools
Create

Error Tracker App

Aug 17, 2025

About this app

A fun and interactive app that tracks errors and exceptions for developers in a visually appealing dashboard. Track, categorize, and visualize errors effectively with colorful charts!

NY Personal Planner New York Personal Planner 🗽 Add Task

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>NY Personal Planner</title>
<meta name="description" content="A colorful and interactive personal planner app to organize your daily tasks, events, and notes in New York city style!">
<meta name="keywords" content="personal planner, daily tasks, event organizer, notes, New York, colorful app, organizer dashboard">

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

<style>
body {
background: linear-gradient(to right, #64B3F4, #C2E9FB);
color: #2C3E50;
font-family: 'Poppins', sans-serif;
}
#main-container {
margin-top: 50px;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.btn {
background-color: #3498DB;
color: white;
}
.btn:hover {
background-color: #2980B9;
}
.task-list {
margin-top: 20px;
}
.task-item {
display: flex;
justify-content: space-between;
padding: 10px;
border: 1px solid #e1e1e1;
border-radius: 5px;
margin-bottom: 8px;
background-color: #F9F9F9;
}
.task-item:hover {
background-color: #E3F2FD;
}
h3 {
font-weight: 600;
}
</style>

<script type="text/javascript">
try {
document.addEventListener("DOMContentLoaded", function() {
const taskList = document.getElementById('taskList');
const taskInput = document.getElementById('taskInput');

function addTask(task) {
const item = document.createElement('div');
item.className = 'task-item';
item.innerHTML = `${task} <button class="btn btn-danger btn-sm" onclick="removeTask(this)">Remove</button>`;
taskList.appendChild(item);
}

document.getElementById('addTaskButton').addEventListener('click', function() {
const task = taskInput.value;
if (task) {
addTask(task);
taskInput.value = '';
}
});

window.removeTask = function(button) {
taskList.removeChild(button.parentElement);
}
});
} catch (error) {
throw error;
}
</script>
</head>
<body>
<div id="main-container" class="container">
<h3>New York Personal Planner 🗽</h3>
<div class="input-group mb-3">
<input type="text" id="taskInput" class="form-control" placeholder="Enter your task" aria-label="Task Input">
<button class="btn" type="button" id="addTaskButton">Add Task</button>
</div>
<div class="task-list" id="taskList"></div>
</div>
</body>
</html>