Project todo

[romanshrestha20]

No description provided.

[vikashyadav021]

Project Base Learning ToDo Project.

Step 1: Set Up the HTML Structure
`

<title>To-Do App</title>

To-Do List

Add

<script src="app.js"></script> `

Step 2: Style the App with CSS
`body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

.container {
max-width: 400px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
margin-bottom: 20px;
}

input[type="text"] {
width: 80%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
margin-right: 10px;
}

button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}

ul {
list-style-type: none;
padding: 0;
}

li {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 3px;
margin-top: 5px;
padding: 5px 10px;
}
`
Step 3: Implement JavaScript Functionality

// Get DOM elements
const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTaskBtn');
const taskList = document.getElementById('taskList');

// Add task function
function addTask() {
const taskText = taskInput.value.trim();

if (taskText === '') {
    alert('Please enter a task!');
    return;
}

// Create a new task item
const taskItem = document.createElement('li');
taskItem.innerHTML = `
    ${taskText}
    <button class="delete-btn">Delete</button>
`;

// Add task to the list
taskList.appendChild(taskItem);

// Clear input field
taskInput.value = '';

// Attach event listener to the delete button
const deleteBtn = taskItem.querySelector('.delete-btn');
deleteBtn.addEventListener('click', () => {
    taskItem.remove();
});

}

// Event listener for adding a task
addTaskBtn.addEventListener('click', addTask);

// Event listener for adding a task using Enter key
taskInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
addTask();
}
});

Step 4: Testing the App

Open your index.html file in a web browser to test your to-do app. You should be able to add tasks, mark them as completed, and delete them.

Happy haking

[GingerPants]

No description provided.

Thank you!