To Do list made using HTML, CSS and JS
+A modern, feature-rich Todo List application with a sleek black theme, built with HTML, CSS, and JavaScript. This app uses localStorage to persist tasks between sessions and is perfect for Hacktoberfest contributions. -### To Do List : + -This app allows you to make a list of events you want to do and you can delete it if you want.
+## Features -the screenshots are in the img folder
\ No newline at end of file +- HTML5 +- CSS3 (Flexbox, Animations, Responsive Design) +- JavaScript (ES6+) +- Font Awesome Icons +- LocalStorage API + +## How to Use + +1. Clone or download this repository +2. Open `index.html` in your web browser +3. Start adding tasks to your todo list + +### Adding Tasks +- Type your task in the input field +- Select a priority level (Low, Medium, High) +- Optionally set a due date +- Click the "Add" button or press Enter + +### Managing Tasks +- **Complete/Uncomplete**: Click the checkmark/undo button +- **Edit**: Click the edit button (pencil icon) to open the edit modal +- **Delete**: Click the trash button +- **Filter**: Use the filter buttons to show All/Active/Completed tasks +- **Search**: Use the search box to find specific tasks +- **Clear All**: Click the "Clear All" button to remove all tasks +- **Export**: Click the "Export" button to download your tasks as a JSON file +- **Import**: Click the "Import" button to load tasks from a JSON file + +### Task Indicators +- **Priority Flags**: + - 🔴 Red flag for High priority + - 🟠 Orange flag for Medium priority + - 🟢 Green flag for Low priority +- **Due Dates**: + - ⚠️ Exclamation icon for overdue tasks + - 📅 Calendar icon for future dates + - 📆 "Today" label for tasks due today + +## Screenshots + + + +## Contributing to Hacktoberfest + +This project is part of Hacktoberfest! We welcome contributions from the community. Here's how you can contribute: + +### Getting Started +1. Fork this repository +2. Clone your forked repository to your local machine +3. Create a new branch for your feature or bug fix +4. Make your changes +5. Commit your changes with a descriptive commit message +6. Push your changes to your forked repository +7. Create a Pull Request to the main repository + +### Ideas for Contributions + +We're looking for contributions in the following areas: + +1. **New Features** + - Add task categories/tags + - Implement drag and drop reordering + - Add recurring tasks + - Add task notes/descriptions + - Implement dark/light mode toggle + - Add task sharing capabilities + - Implement undo/redo functionality + +2. **UI/UX Improvements** + - Improve animations and transitions + - Add more visual feedback + - Enhance mobile responsiveness + - Add keyboard shortcuts + - Improve accessibility (ARIA labels, screen reader support) + +3. **Functionality Enhancements** + - Add export/import functionality in different formats (CSV, PDF) + - Add notifications/reminders + - Add sorting options (by date, priority, etc.) + - Add bulk actions (complete all, delete completed, etc.) + +4. **Code Quality** + - Refactor existing code for better performance + - Add more comprehensive error handling + - Improve code documentation + - Add unit tests + - Implement design patterns (MVC, Observer, etc.) + +5. **Documentation** + - Improve this README file + - Add user guides + - Create setup instructions + - Add contribution guidelines + - Create API documentation + +### Contribution Guidelines + +1. Ensure your code follows the existing style and conventions +2. Write clear, descriptive commit messages +3. Test your changes thoroughly +4. Update documentation if needed +5. Be respectful and constructive in all interactions + +### Pull Request Process + +1. Ensure any install or build dependencies are removed before the end of the layer when doing a build +2. Update the README.md with details of changes to the interface, if applicable +3. Increase the version numbers in any examples files and the README.md to the new version that this Pull Request would represent +4. Your Pull Request will be reviewed by maintainers, who may request changes before merging + +## Project Structure + +``` +todo-list-app/ +├── index.html +├── style.css +├── app.js +├── README.md +├── LICENSE +└── img/ + └── screenshot.png +``` + +## License + +This project is open source and available under the [MIT License](LICENSE). + +## Author + +[Kshitiz Maurya](https://github.com/kshitiz79) + +## Acknowledgements + +- [Font Awesome](https://fontawesome.com/) for icons +- All contributors to this project + +## Support + +If you like this project, please give it a ⭐️ on GitHub! + +--- + +Made with ❤️ for Hacktoberfest 2025 \ No newline at end of file diff --git a/Todo list app/app.js b/Todo list app/app.js index 46fa06ff6..a9e59b8dc 100644 --- a/Todo list app/app.js +++ b/Todo list app/app.js @@ -1,60 +1,352 @@ -// prendre tout les elements necessaires -const inputBox=document.querySelector('.inputField input'); -const addBtn=document.querySelector('.inputField button'); -const deleteAll=document.querySelector('.footer button'); -const todoList=document.querySelector('.todoList'); - -inputBox.onkeyup=()=>{ - let userData=inputBox.value; //getting user value - if(userData.trim() !=0 ){ //if user values aren't only spaces - addBtn.classList.add('active'); - }else{ - addBtn.classList.remove('active'); - } -} -showTasks(); -// if user click on the add btn -addBtn.onclick = ()=>{ - let userData=inputBox.value; //getting user value - let getLocalStorage = localStorage.getItem('New todo'); //get the local storage - if (getLocalStorage == null){ - listArr=[]; //creating blanck array - }else{ - listArr=JSON.parse(getLocalStorage); //transform json string into js object - } - listArr.push(userData);// push or add user data - localStorage.setItem("New todo", JSON.stringify(listArr)) //transform js object into a json string +// DOM Elements +const taskInput = document.getElementById('taskInput'); +const addTaskBtn = document.getElementById('addTaskBtn'); +const todoList = document.getElementById('todoList'); +const clearAllBtn = document.getElementById('clearAllBtn'); +const pendingNumber = document.querySelector('.pendingNumber'); +const totalTasks = document.querySelector('.totalTasks'); +const completedTasks = document.querySelector('.completedTasks'); +const filters = document.querySelectorAll('.filter'); +const searchInput = document.getElementById('searchInput'); +const prioritySelect = document.getElementById('prioritySelect'); +const dueDateInput = document.getElementById('dueDateInput'); +const exportBtn = document.getElementById('exportBtn'); +const importInput = document.getElementById('importInput'); +const importBtn = document.getElementById('importBtn'); + +// Modal Elements +const taskModal = document.getElementById('taskModal'); +const editTaskForm = document.getElementById('editTaskForm'); +const editTaskInput = document.getElementById('editTaskInput'); +const editPrioritySelect = document.getElementById('editPrioritySelect'); +const editDueDateInput = document.getElementById('editDueDateInput'); +const closeBtn = document.querySelector('.close'); + +// Global variables +let tasks = JSON.parse(localStorage.getItem('tasks')) || []; +let currentFilter = 'all'; +let editMode = false; +let editTaskId = null; + +// Initialize the app +document.addEventListener('DOMContentLoaded', () => { + showTasks(); + updateStats(); + + // Set focus on input field + taskInput.focus(); + + // Set min date for due date input to today + const today = new Date().toISOString().split('T')[0]; + dueDateInput.min = today; + editDueDateInput.min = today; +}); + +// Event Listeners +taskInput.addEventListener('keyup', () => { + const userTask = taskInput.value.trim(); + if(userTask) { + addTaskBtn.classList.add('active'); + } else { + addTaskBtn.classList.remove('active'); + } +}); + +addTaskBtn.addEventListener('click', addTask); +taskInput.addEventListener('keypress', (e) => { + if(e.key === 'Enter' && addTaskBtn.classList.contains('active')) { + addTask(); + } +}); + +clearAllBtn.addEventListener('click', clearAllTasks); +exportBtn.addEventListener('click', exportTasks); +importBtn.addEventListener('click', () => importInput.click()); +importInput.addEventListener('change', importTasks); + +filters.forEach(filter => { + filter.addEventListener('click', () => { + document.querySelector('.filter.active').classList.remove('active'); + filter.classList.add('active'); + currentFilter = filter.dataset.filter; + showTasks(); + }); +}); + +searchInput.addEventListener('input', showTasks); + +// Modal event listeners +closeBtn.addEventListener('click', () => { + taskModal.style.display = 'none'; +}); + +window.addEventListener('click', (e) => { + if (e.target === taskModal) { + taskModal.style.display = 'none'; + } +}); + +editTaskForm.addEventListener('submit', updateTask); + +// Functions +function addTask() { + const userTask = taskInput.value.trim(); + const priority = prioritySelect.value; + const dueDate = dueDateInput.value; + + if(!userTask) return; + + if(editMode) { + // Update existing task + tasks = tasks.map(task => + task.id === editTaskId ? {...task, text: userTask} : task + ); + editMode = false; + editTaskId = null; + addTaskBtn.innerHTML = ' Add'; + } else { + // Add new task + const task = { + id: Date.now(), + text: userTask, + completed: false, + timestamp: new Date().toISOString(), + priority: priority, + dueDate: dueDate || null, + category: 'general' + }; + tasks.push(task); + } + + saveTasks(); showTasks(); + updateStats(); + + // Reset input fields + taskInput.value = ''; + prioritySelect.value = 'medium'; + dueDateInput.value = ''; + addTaskBtn.classList.remove('active'); + taskInput.focus(); } -// this function add list inside ul -function showTasks(){ - let getLocalStorage = localStorage.getItem('New todo'); - if (getLocalStorage == null){ - listArr=[]; //creating blanck array - }else{ - listArr=JSON.parse(getLocalStorage); //transform json string into js object - } - const pendingNumb=document.querySelector('.pendingNumber'); - pendingNumb.textContent=listArr.length; - let newLiTag=''; - listArr.forEach((element, index) => { - newLiTag +=`${searchTerm ? 'No matching tasks found' : 'No tasks found. Add a new task!'}
+