Hugging Face's logo

Spaces:
akhaliq
/
anycoder-48487f3d
Running

App Files Community
anycoder-48487f3d
File size: 5,953 Bytes
fd877bb
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Todo App</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
    <style>
        :root { --primary: #6c5ce7; --bg: #a29bfe; --glass: rgba(255, 255, 255, 0.9); --text: #2d3436; }
        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; outline: none; }
        body { background: linear-gradient(135deg, #6c5ce7, #a29bfe); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; }
        .app { background: var(--glass); width: 100%; max-width: 400px; border-radius: 20px; padding: 30px; box-shadow: 0 15px 35px rgba(0,0,0,0.2); backdrop-filter: blur(10px); }
        header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        h1 { color: var(--primary); font-size: 24px; font-weight: 600; }
        .brand { font-size: 10px; color: #636e72; text-decoration: none; font-weight: 600; transition: 0.3s; }
        .brand:hover { color: var(--primary); }
        .input-group { position: relative; display: flex; margin-bottom: 20px; }
        input { width: 100%; padding: 15px 50px 15px 20px; border: none; background: #f1f2f6; border-radius: 50px; font-size: 14px; color: var(--text); transition: 0.3s; }
        input:focus { box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2); }
        #addBtn { position: absolute; right: 5px; top: 5px; width: 40px; height: 40px; border: none; background: var(--primary); color: white; border-radius: 50%; cursor: pointer; transition: 0.3s; }
        #addBtn:hover { transform: rotate(90deg); background: #5649c0; }
        .filters { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; }
        .filter-btn { font-size: 12px; color: #b2bec3; cursor: pointer; font-weight: 600; transition: 0.3s; }
        .filter-btn.active { color: var(--primary); }
        ul { list-style: none; max-height: 300px; overflow-y: auto; padding-right: 5px; }
        ul::-webkit-scrollbar { width: 5px; }
        ul::-webkit-scrollbar-thumb { background: #dfe6e9; border-radius: 10px; }
        li { background: white; padding: 12px 15px; border-radius: 10px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; animation: fadeIn 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: 0.3s; }
        li:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        li.completed { opacity: 0.6; text-decoration: line-through; background: #f1f2f6; }
        li span { flex: 1; margin: 0 10px; font-size: 14px; cursor: pointer; }
        .check { color: #dfe6e9; cursor: pointer; font-size: 18px; transition: 0.3s; }
        li.completed .check { color: var(--primary); }
        .del { color: #ff7675; cursor: pointer; opacity: 0; transition: 0.3s; font-size: 14px; }
        li:hover .del { opacity: 1; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    </style>
</head>
<body>
    <div class="app">
        <header>
            <h1>My Tasks</h1>
            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="brand">Built with anycoder</a>
        </header>
        <div class="input-group">
            <input type="text" id="input" placeholder="What needs to be done?">
            <button id="addBtn"><i class="fas fa-plus"></i></button>
        </div>
        <div class="filters">
            <span class="filter-btn active" onclick="filter('all')">All</span>
            <span class="filter-btn" onclick="filter('active')">Active</span>
            <span class="filter-btn" onclick="filter('completed')">Completed</span>
        </div>
        <ul id="list"></ul>
    </div>

    <script>
        const input = document.getElementById('input');
        const list = document.getElementById('list');
        let todos = JSON.parse(localStorage.getItem('todos')) || [];
        let currentFilter = 'all';

        const save = () => localStorage.setItem('todos', JSON.stringify(todos));
        
        const render = () => {
            list.innerHTML = '';
            const filtered = todos.filter(t => currentFilter === 'all' ? true : currentFilter === 'completed' ? t.done : !t.done);
            filtered.forEach(t => {
                const li = document.createElement('li');
                li.className = t.done ? 'completed' : '';
                li.innerHTML = `<i class="fas fa-circle-check check" onclick="toggle(${t.id})"></i>
                                <span onclick="toggle(${t.id})">${t.text}</span>
                                <i class="fas fa-trash-alt del" onclick="remove(${t.id})"></i>`;
                list.appendChild(li);
            });
            document.querySelectorAll('.filter-btn').forEach(b => b.classList.toggle('active', b.innerText.toLowerCase() === currentFilter || (b.innerText === 'All' && currentFilter === 'all')));
        };

        const add = () => {
            if (!input.value.trim()) return;
            todos.unshift({ id: Date.now(), text: input.value.trim(), done: false });
            input.value = ''; save(); render();
        };

        const toggle = (id) => { todos = todos.map(t => t.id === id ? { ...t, done: !t.done } : t); save(); render(); };
        const remove = (id) => { todos = todos.filter(t => t.id !== id); save(); render(); };
        const filter = (type) => { currentFilter = type; render(); };

        document.getElementById('addBtn').onclick = add;
        input.addEventListener('keypress', e => e.key === 'Enter' && add());
        render();
    </script>
</body>
</html>