Calculator Tools Calculator Tools
Create

Period Point Blank - The Ultimate Time Management App

May 5, 2025

About this app

Manage your tasks with Period Point Blank, a delightful and colorful time management app that helps you get your tasks done promptly.

Period Point Blank - The Ultimate Time Management App Period Point Blank 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>Period Point Blank - The Ultimate Time Management App</title>
<meta name="description" content="Manage your tasks with Period Point Blank, a delightful and colorful time management app that helps you get your tasks done promptly.">
<meta name="keywords" content="task management, time management, productivity, to-do list, fun app, colorful design">

<!-- Libraries -->
<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.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">

<script type="text/javascript">
try {
document.addEventListener("DOMContentLoaded", function() {
const taskInput = document.getElementById("task-input");
const taskButton = document.getElementById("task-button");
const taskList = document.getElementById("task-list");

taskButton.onclick = function() {
const taskText = taskInput.value;
if (taskText.trim()) {
const taskItem = document.createElement("li");
taskItem.className = "list-group-item list-group-item-primary d-flex justify-content-between align-items-center";
taskItem.innerHTML = `
<span>${taskText}</span>
<button class="btn btn-danger btn-sm" onclick="removeTask(this)">X</button>
`;
taskList.appendChild(taskItem);
taskInput.value = "";
}
};
});

function removeTask(button) {
const taskItem = button.parentElement;
taskItem.remove();
}

} catch (error) {
throw error;
}
</script>

<style>
body {
background: linear-gradient(to bottom right, #f0f4c3, #c5e1a5);
font-family: "Arial", sans-serif;
}
#main-container {
margin-top: 50px;
padding: 20px;
border-radius: 10px;
background: white;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
h1 {
color: #4caf50;
text-align: center;
margin-bottom: 30px;
}
.form-control {
border: 2px solid #4caf50;
border-radius: 5px;
}
.btn-primary {
background-color: #4caf50;
border: none;
}
.btn-danger {
background-color: #e57373;
border: none;
}
.list-group-item {
transition: background-color 0.3s;
}
.list-group-item:hover {
background-color: #81c784;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Period Point Blank</h1>
<div class="input-group mb-3">
<input type="text" id="task-input" class="form-control" placeholder="Enter your task here">
<button class="btn btn-primary" id="task-button">Add Task</button>
</div>
<ul id="task-list" class="list-group">
<!-- Task items will be added here -->
</ul>
</div>
</body>
</html>