Upload folder using huggingface_hub

assets/css/styles.css

@@ -0,0 +1,229 @@
+/* Base Reset and Typography */
+:root {
+    --primary-color: #007bff;
+    --secondary-color: #6c757d;
+    --success-color: #28a745;
+    --danger-color: #dc3545;
+    --bg-color: #f8f9fa;
+    --card-bg: #ffffff;
+    --border-color: #e9ecef;
+    --text-color: #343a40;
+    --font-family: 'Roboto', sans-serif;
+}
+
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: var(--font-family);
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    line-height: 1.6;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Header */
+.site-header {
+    background-color: var(--primary-color);
+    color: white;
+    padding: 1rem 0;
+    text-align: center;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.site-header h1 {
+    margin-bottom: 0.25rem;
+    font-size: 1.8rem;
+}
+
+.branding {
+    font-size: 0.9rem;
+    margin-top: 0.5rem;
+}
+
+.branding a {
+    color: #ffd700; /* Gold color for contrast */
+    text-decoration: none;
+    font-weight: bold;
+}
+
+.branding a:hover {
+    text-decoration: underline;
+}
+
+/* Main Container (Mobile-first) */
+.container {
+    max-width: 90%;
+    margin: 20px auto;
+    padding: 15px;
+    flex-grow: 1;
+}
+
+/* Input Form Styling */
+.todo-input {
+    margin-bottom: 30px;
+    background: var(--card-bg);
+    padding: 15px;
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+#todo-form {
+    display: flex;
+    gap: 10px;
+}
+
+#todo-input {
+    flex-grow: 1;
+    padding: 10px;
+    border: 2px solid var(--border-color);
+    border-radius: 4px;
+    font-size: 1rem;
+    transition: border-color 0.2s;
+}
+
+#todo-input:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
+}
+
+#add-button {
+    /* Ensure the button doesn't shrink too much on mobile */
+    min-width: 90px;
+    padding: 10px 15px;
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1rem;
+    font-weight: 700;
+    transition: background-color 0.2s;
+}
+
+#add-button:hover {
+    background-color: #0056b3;
+}
+
+/* Todo List Styling */
+.todo-list-container h2 {
+    font-size: 1.5rem;
+    margin-bottom: 10px;
+    border-bottom: 2px solid var(--border-color);
+    padding-bottom: 5px;
+}
+
+#todo-list {
+    list-style: none;
+    padding: 0;
+}
+
+.todo-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 15px;
+    margin-bottom: 8px;
+    background-color: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+    transition: background-color 0.3s, opacity 0.3s;
+}
+
+.todo-item .task-text {
+    flex-grow: 1;
+    margin-right: 15px;
+    word-break: break-word;
+    cursor: pointer;
+}
+
+/* Completed State */
+.todo-item.completed {
+    background-color: #e9ffed; /* Light green background */
+    border-left: 5px solid var(--success-color);
+    opacity: 0.7;
+}
+
+.todo-item.completed .task-text {
+    text-decoration: line-through;
+    color: var(--secondary-color);
+}
+
+/* Actions (Buttons) */
+.todo-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.todo-actions button {
+    padding: 8px 12px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: opacity 0.2s;
+}
+
+.todo-actions button:hover {
+    opacity: 0.8;
+}
+
+.delete-btn {
+    background-color: var(--danger-color);
+    color: white;
+}
+
+/* Empty State Styling */
+.empty-state {
+    text-align: center;
+    color: var(--secondary-color);
+    font-style: italic;
+    border: none;
+    box-shadow: none;
+    padding: 20px;
+}
+
+/* Footer */
+.site-footer {
+    padding: 10px;
+    text-align: center;
+    font-size: 0.8rem;
+    color: var(--secondary-color);
+    border-top: 1px solid var(--border-color);
+    margin-top: auto; /* Push footer to the bottom */
+}
+
+/* Responsive adjustments for larger screens */
+@media (min-width: 600px) {
+    .container {
+        max-width: 600px;
+    }
+    
+    .site-header h1 {
+        font-size: 2.5rem;
+    }
+
+    #todo-form {
+        flex-direction: row;
+    }
+    
+    #todo-input {
+        padding: 12px;
+        font-size: 1.1rem;
+    }
+
+    #add-button {
+        padding: 12px 20px;
+    }
+    
+    .todo-item {
+        padding: 15px 20px;
+    }
+}

assets/js/script.js

@@ -0,0 +1,111 @@
+const todoForm = document.getElementById('todo-form');
+const todoInput = document.getElementById('todo-input');
+const todoList = document.getElementById('todo-list');
+
+// Initialize todos from Local Storage, defaulting to an empty array
+let todos = JSON.parse(localStorage.getItem('todos')) || [];
+
+// Function to save todos to Local Storage
+const saveTodos = () => {
+    localStorage.setItem('todos', JSON.stringify(todos));
+};
+
+// Function to render the entire list
+const renderTodos = () => {
+    todoList.innerHTML = ''; // Clear existing list items
+
+    if (todos.length === 0) {
+        const emptyMessage = document.createElement('li');
+        emptyMessage.textContent = "Great job! No tasks currently pending.";
+        emptyMessage.className = "todo-item empty-state";
+        todoList.appendChild(emptyMessage);
+        return;
+    }
+
+    todos.forEach((todo, index) => {
+        const listItem = document.createElement('li');
+        listItem.className = `todo-item ${todo.completed ? 'completed' : ''}`;
+        listItem.setAttribute('role', 'listitem');
+        listItem.setAttribute('aria-checked', todo.completed);
+
+        // Task Text (Clickable to toggle completion)
+        const taskText = document.createElement('span');
+        taskText.className = 'task-text';
+        taskText.textContent = todo.text;
+        taskText.setAttribute('tabindex', '0'); // Make text focusable for keyboard users
+        taskText.addEventListener('click', () => toggleComplete(index));
+        taskText.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                toggleComplete(index);
+            }
+        });
+        
+        // Actions container
+        const actions = document.createElement('div');
+        actions.className = 'todo-actions';
+
+        // Delete Button
+        const deleteBtn = document.createElement('button');
+        deleteBtn.textContent = 'Delete';
+        deleteBtn.className = 'delete-btn';
+        deleteBtn.setAttribute('aria-label', `Delete task: ${todo.text}`);
+        deleteBtn.addEventListener('click', () => deleteTodo(index));
+
+        listItem.appendChild(taskText);
+        actions.appendChild(deleteBtn);
+        listItem.appendChild(actions);
+
+        todoList.appendChild(listItem);
+    });
+};
+
+// 1. Add Functionality
+const addTodo = (e) => {
+    e.preventDefault();
+    
+    const taskText = todoInput.value.trim();
+    
+    if (taskText === "") {
+        // Use standard constraint validation feedback if input is required, 
+        // but since we prevent default and trim, a simple focus is enough
+        alert("Please enter a task.");
+        todoInput.focus();
+        return;
+    }
+
+    const newTodo = {
+        text: taskText,
+        completed: false,
+        id: Date.now() // Simple unique ID for future scalability if needed
+    };
+
+    todos.push(newTodo);
+    saveTodos();
+    renderTodos();
+
+    todoInput.value = ''; // Clear input
+    todoInput.focus();
+};
+
+// 2. Delete Functionality
+const deleteTodo = (index) => {
+    // Optional: add a visual confirmation dialog
+    if (confirm(`Are you sure you want to delete "${todos[index].text}"?`)) {
+        // Remove 1 element starting at the given index
+        todos.splice(index, 1);
+        saveTodos();
+        renderTodos();
+    }
+};
+
+// 3. Mark as Complete Functionality (Toggle)
+const toggleComplete = (index) => {
+    todos[index].completed = !todos[index].completed;
+    saveTodos();
+    renderTodos(); // Re-render to apply the completed class and ARIA state
+};
+
+// Event Listeners
+document.addEventListener('DOMContentLoaded', renderTodos);
+todoForm.addEventListener('submit', addTodo);

index.html

@@ -1,19 +1,50 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="A simple, fast, and responsive To-Do application built with vanilla JavaScript.">
+    <meta name="keywords" content="todo, list, vanilla js, productivity, front-end">
+    <title>Vanilla JS To-Do App</title>
+    <link rel="stylesheet" href="assets/css/styles.css">
+    <!-- Using Google Fonts for better typography -->
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <header class="site-header">
+        <h1>Vanilla To-Do List</h1>
+        <p class="branding">
+            Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer">anycoder</a>
+        </p>
+    </header>
+
+    <main class="container">
+        <section class="todo-input">
+            <form id="todo-form">
+                <input 
+                    type="text" 
+                    id="todo-input" 
+                    placeholder="What needs to be done?" 
+                    aria-label="New To-Do Item"
+                    required
+                    maxlength="100"
+                >
+                <button type="submit" id="add-button">Add Task</button>
+            </form>
+        </section>
+
+        <section class="todo-list-container">
+            <h2>Tasks</h2>
+            <ul id="todo-list" aria-live="polite">
+                <!-- To-Do items will be injected here by JavaScript -->
+            </ul>
+        </section>
+    </main>
+
+    <footer class="site-footer">
+        <p>&copy; 2024 Simple To-Do App | All Rights Reserved.</p>
+    </footer>
+
+    <script src="assets/js/script.js"></script>
+</body>
+</html>