Building a To-Do List App lecture 1.pptx
- 1. Building a To-Do List App BY GEVITA CHINNAIAH
- 2. Project Setup and Basic Structure • Introduction to XAMPP – What is XAMPP? – XAMPP is a free, open-source cross-platform web server solution stack package developed by Apache Friends. It provides a simple way to set up a local server environment on your computer.
- 3. Overview of the Project: To-Do List App • What is the To-Do List App? – A simple web application that helps users manage tasks by allowing them to add, mark as completed, and delete tasks. • Key Features of the To-Do List App – Task Input – Add Task – Task List – Delete Task – Mark as Completed
- 4. Setting Up XAMPP • Install XAMPP • Configure XAMPP • Access the htdocs Folder – http://localhost
- 5. Creating the Project Folder • Create the todo-app Folder – http://localhost/todo_app/
- 7. Styling and Basic JavaScript Functionality body { font-family: Arial, sans-serif; background-color: #f4f4f4; text-align: center; margin: 0; padding: 0; } .container { margin-top: 50px; } input { width: 300px; padding: 10px; font-size: 16px; margin-bottom: 10px; } button { padding: 10px 20px; font-size: 16px; cursor: pointer; } ul { list-style-type: none; padding: 0; } li { background: #fff; margin: 5px 0; padding: 10px; border: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; }
- 8. Adding Basic JavaScript document.getElementById('addTaskBtn').a ddEventListener('click', addTask); function addTask() { const taskInput = document.getElementById('taskInput'); const taskText = taskInput.value.trim(); if (taskText === '') { alert('Please enter a task.'); return; } const taskList = document.getElementById('taskList'); const taskItem = document.createElement('li'); taskItem.textContent = taskText; const deleteBtn = document.createElement('button'); deleteBtn.textContent = 'Delete'; deleteBtn.addEventListener('click', () => taskItem.remove()); taskItem.appendChild(deleteBtn); taskList.appendChild(taskItem); taskInput.value = ''; }
- 9. Enhancing Functionality and Testing • Implement marking tasks as completed • JAVASCRIPT. taskItem.addEventLi stener('click', () => { taskItem.classList.to ggle('completed'); }); • Add CSS for completed tasks .completed { text-decoration: line-through; color: gray; }
- 10. THANK YOU