Page 316 - Web Applications (803) Class 12
P. 316

justify-content: space-between;

                      align-items: center;
                      padding: 10px 0;

                      border-bottom: 1px solid #ccc;
                  }

                  .delete-button {
                      background-color: #ff4b4b;

                      color: #fff;
                      border: none;
                      padding: 5px 10px;

                      border-radius: 5px;
                      cursor: pointer;

                  }
              File3: Pscript.js

                   const taskInput = document.getElementById(‘task’);
                  const addTaskButton = document.getElementById(‘add-task’);

                  const taskList = document.getElementById(‘task-list’);
                  addTaskButton.addEventListener(‘click’, function () {
                      const taskText = taskInput.value.trim();

                      if (taskText !== ‘’) {

                          const listItem = document.createElement(‘li’);
                          listItem.innerHTML = `
                              ${taskText}

                              <button class=”delete-button”>Delete</button>
                          `;

                          taskList.appendChild(listItem);
                          taskInput.value = ‘’;

                          const deleteButton = listItem.querySelector(‘.delete-button’);
                          deleteButton.addEventListener(‘click’, function () {

                              taskList.removeChild(listItem);
                          });

                      }
                  });








                314   Touchpad Web Applications-XII
   311   312   313   314   315   316   317   318   319   320   321