Fun Counter App
About this app
A colorful and engaging counter app to keep track of your counts easily.
Colorful To-Do List App 📝 Colorful To-Do List 📝 ➕ Add Task
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
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>Colorful To-Do List App</title>
<meta name="description" content="A colorful and responsive To-Do list app to manage your tasks effortlessly.">
<meta name="keywords" content="to-do list, task manager, colorful app, user-friendly, productivity, fun tasks">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto:wght@400&display=swap" rel="stylesheet">
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
const tasks = [];
const taskInput = document.getElementById("taskInput");
const addTaskBtn = document.getElementById("addTaskBtn");
const taskList = document.getElementById("taskList");
addTaskBtn.addEventListener("click", function() {
const taskText = taskInput.value.trim();
if (taskText) {
addTask(taskText);
taskInput.value = '';
}
});
function addTask(task) {
tasks.push(task);
renderTasks();
}
function renderTasks() {
taskList.innerHTML = '';
tasks.forEach((task, index) => {
const li = document.createElement('li');
li.textContent = task;
li.appendChild(createDeleteButton(index));
taskList.appendChild(li);
});
saveLocal();
}
function createDeleteButton(index) {
const btn = document.createElement('button');
btn.textContent = '🗑️';
btn.className = 'deleteBtn';
btn.onclick = function() {
tasks.splice(index, 1);
renderTasks();
}
return btn;
}
function saveLocal() {
localStorage.setItem('todoTasks', JSON.stringify(tasks));
}
function loadLocal() {
const savedTasks = localStorage.getItem('todoTasks');
if (savedTasks) {
tasks.push(...JSON.parse(savedTasks));
renderTasks();
}
}
loadLocal();
});
</script>
<style>
body {
background: linear-gradient(to bottom right, #ff7e5f, #feb47b);
color: #333;
font-family: 'Roboto', sans-serif;
text-align: center;
padding: 40px;
overflow: hidden;
}
h1 {
font-family: 'Playfair Display', serif;
color: #fff;
margin-bottom: 20px;
}
input[type="text"] {
padding: 12px;
font-size: 1.2rem;
border-radius: 5px;
border: none;
width: 300px;
margin-right: 10px;
transition: border 0.3s;
}
input[type="text"]:focus {
border: 2px solid #feb47b;
}
button {
padding: 12px 20px;
font-size: 1.2rem;
border: none;
border-radius: 5px;
background-color: #ff6a88;
color: white;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: transform 0.2s, background-color 0.2s;
}
button:hover {
transform: translateY(-2px);
background-color: #ff4c68;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background: rgba(255, 255, 255, 0.8);
margin: 10px 0;
padding: 15px;
border-radius: 5px;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.deleteBtn {
background: transparent;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #ff6a88;
transition: color 0.3s;
}
.deleteBtn:hover {
color: #ff4c68;
}
</style>
</head>
<body>
<div id="main-container">
<h1>📝 Colorful To-Do List 📝</h1>
<input type="text" id="taskInput" placeholder="Enter your task...">
<button id="addTaskBtn">➕ Add Task</button>
<ul id="taskList"></ul>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!