Prompt Title: Button submit without form.

Created 1 year ago
Votes 0
Views 208 times
0

Prompt Detail:

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:

html
<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:

javascript
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.

avatar
sachin
Shared 2 prompts
Created 1 year ago

Leave a Comment

Related Tag Prompts

72
0
JavaScript Jedi
1 year ago 2023-02-14 06:35:19 AIPRM
0
0
Learning Programming Basics.
1 year ago 2023-03-08 15:06:52 pawan
0
0
first class function
1 year ago 2023-03-08 16:15:57 Dilshod
0
0
props drilling
1 year ago 2023-03-09 03:28:27 anik
0
0
react query
1 year ago 2023-03-09 10:07:32 rakib
0
0
Java GUI quadratic solver
1 year ago 2023-03-10 18:43:18 Xa3ap
0
0
0
0
Javascript to-do list app
1 year ago 2023-03-13 03:18:54 Simon
0
0
javascript滑块
1 year ago 2023-03-21 08:41:21 QingTool
0
0
This in odoo
1 year ago 2023-03-22 18:11:34 nqvinh
0
0
GatsbyJS Image Swap.
1 year ago 2023-03-30 12:59:59 Ilyas Gosling
0
0
Google Sheets SMS Script
1 year ago 2023-04-03 16:53:35 ben
0
0
webview print problem
1 year ago 2023-04-10 09:28:07 aa
0
0
对象转换的优化
1 year ago 2023-04-18 02:11:47 k