Prompt Title: Button submit without form.

Bootstrap 5 is a front-end framework that provides a wide range of components and utilities for building responsive and mobile-first web applications. To create a todo list using Bootstrap 5, you can use its built-in components such as forms, buttons, and cards. Here's an example of how you can create a todo list using Bootstrap 5:

HTML:

htmlCopy code
<div class="container">
  <h1>Todo List</h1>
  <form id="todo-form">
    <div class="mb-3">
      <label for="todo-input" class="form-label">Add Todo</label>
      <input type="text" class="form-control" id="todo-input">
    </div>
    <button type="submit" class="btn btn-primary">Add</button>
  </form>
  <hr>
  <div id="todo-list"></div>
</div>

In this example, we have a container with a header, a form for adding new todos, and a div for displaying the list of todos.

JavaScript:

javascriptCopy code
const todoForm = document.getElementById('todo-form');
const todoInput = document.getElementById('todo-input');
const todoList = document.getElementById('todo-list');

let todos = [];

function renderTodos() {
  let todoItems = '';
  todos.forEach((todo, index) => {
    todoItems += `
      <div class="card mb-2">
        <div class="card-body">
          <h5 class="card-title">${todo}</h5>
          <button type="button" class="btn btn-danger" onclick="deleteTodo(${index})">Delete</button>
        </div>
      </div>
    `;
  });
  todoList.innerHTML = todoItems;
}

function addTodo() {
  const todo = todoInput.value.trim();
  if (todo !== '') {
    todos.push(todo);
    renderTodos();
    todoInput.value = '';
  }
}

function deleteTodo(index) {
  todos.splice(index, 1);
  renderTodos();
}

todoForm.addEventListener('submit', event => {
  event.preventDefault();
  addTodo();
});

In this example, we create references to the form, input field, and todo list using document.getElementById(). We also create an empty array to store the todos.

We then define a function renderTodos() that generates the HTML for each todo item and appends it to the todo list. This function is called each time a new todo is added or an existing todo is deleted.

We define a function addTodo() that retrieves the value of the input field, adds the todo to the todos array, and then calls renderTodos() to update the todo list. We also define a function deleteTodo() that removes a todo from the todos array by its index, and then calls renderTodos() to update the todo list.

Finally, we add an event listener to the form that prevents its default behavior, and calls the addTodo() function when the user submits the form.

By using Bootstrap 5 classes such as form-control, btn, and card, we can style the form and the todo list to make it look more visually appealing and user-friendly.