On-screen text
File Edit Selection View Go
App.tsx > src > App.tsx > index.html
tiktok-videos > src > App.tsx
index.html
index.css
site.config.js
export default function App() {
// ...
completed: boolean;
}
export default function App() {
const [tasks, setTasks] = useState<Task[]>([]);
const [input, setInput] = useState("");
useEffect(() => {
const stored = localStorage.getItem("tasks");
if (stored) {
setTasks(JSON.parse(stored));
}
}, []);
useEffect(() => {
localStorage.setItem("tasks", JSON.stringify(tasks));
}, [tasks]);
const addTask = () => {
if (!input.trim()) return;
setTasks([
...tasks,
{ id: Date.now(), text: input, completed: false },
]);
setInput("");
};
const toggleTask = (id: number) => {
setTasks(tasks.map(t => t.id === id ? { ...t, completed: !t.completed } : t));
};
const deleteTask = (id: number) => {
setTasks(tasks.filter(t => t.id !== id));
};
const clearAll = () => {
if (window.confirm("Are you sure you want to clear all tasks?")) {
setTasks([]);
}
};
const completedCount = tasks.filter(t => t.completed).length;
return (
<div className="min-h-screen w-full bg-gradient-to-r from-cyan-400 to-blue-500 flex items-center justify-center">
<div className="w-full max-w-md rounded-xl backdrop-blur-xl bg-white/5 border border-white/5 shadow-[0_0_60px_rgba(0,255,255,0.15)] p-4">
<h2 className="text-xl font-bold mb-4 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
Task Orbit
</h2>
<div className="flex gap-2 mb-6">
<input
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && addTask()}
type="text"
placeholder="Add task..."
className="flex-1 min-w-0 px-4 py-2 rounded-lg bg-white/5 border border-white/5 focus:border-cyan-400/50 transition text-sm outline-none"
/>
<button onClick={addTask} className="shrink-0 w-16 h-10 rounded-lg bg-gradient-to-r from-cyan-400 to-blue-500 hover:opacity-90 active:scale-95 transition shadow-[0_0_15px_rgba(0,255,255,0.4)] text-sm font-medium">
Add
</button>
</div>
<div className="space-y-3 max-h-[60vh] overflow-y-auto pr-1 scrollbar-hide">
{tasks.length === 0 && (
<p className="text-center text-white/30 text-sm py-10">No tasks yet. Start orbits!</p>
)}
<motion.div>
{tasks.map((task) => (
<div key={task.id} className="flex items-center gap-2 mb-2">
<div onClick={() => toggleTask(task.id)} className="flex-1 flex items-center gap-3 cursor-pointer">
<div className="shrink-0 w-6 h-6 rounded-full border-2 border-white/20 flex items-center justify-center transition-all duration-300 ">
{task.completed && (
<input type="checkbox" checked={task.completed} className="accent-cyan-400"/>
)}
</div>
<span className={`text-sm truncate ${task.completed && "line-through opacity-40"}`}>{task.text}</span>
</div>
<button onClick={() => deleteTask(task.id)} className="shrink-0 p-1 rounded-lg hover:bg-red-500/20 hover:text-red-400 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-trash2" viewBox="0 0 16 16">
<path d="M14 2H6.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1zM7 1.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v1.072L9.5 1.5V2h-2v-.428L7 1.5zM8 0a.5.5 0 0 1 .5.5V2h-1V.5a.5.5 0 0 1 .5-.5z"/>
<path d="M10.5 0a.5.5 0 0 1 .5.5V1h4.5a.5.5 0 0 1 0 1H10v4.5a.5.5 0 0 1-1 0V2h-.5a.5.5 0 0 1-.5-.5V1.5a.5.5 0 0 1 .5-.5H10z"/>
<path d="M11 1.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V2h-3V1.5z"/>
<path d="M14 3H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3zM6 11.5a.5.5 0 0 1 1 0V12h.5a.5.5 0 0 1 0 1h-1a.5.5 0 0 1 0-1H6v-.5zM8 11.5a.5.5 0 0 1 1 0V12h.5a.5.5 0 0 1 0 1h-1a.5.5 0 0 1 0-1H8v-.5zM4.5 11h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1 0-1z"/>
</svg>
</button>
</div>
))}
</motion.div>
</div>
<div className="mt-4 pt-4 border-t border-white/10 flex items-center justify-between text-xs">
<span className="text-white/50">Total: <span className="text-white">{tasks.length}</span></span>
<span className="text-cyan-400">Done: <span className="text-white">{completedCount}</span></span>
</div>
<button onClick={clearAll} className="mt-4 w-full py-2 rounded-lg hover:bg-red-500/20 hover:text-red-400 transition-colors">Clear All</button>
</div>
</div>
);
}
// "This isn't a real app... it's just React & Tailwind 🤯"
// "Everything you see is built from scratch... no templates 👀"
// "And this is how real apps actually feel 🔥"
localhost:5173 says
Are you sure you want to clear all tasks?
OK
Cancel
Task Orbit
Add task...
Add
hello
TOTAL: 1 DONE: 0
Clear All
