diff options
| author | Adrián Oliva <adrian.oliva@cimat.mx> | 2023-05-19 15:34:07 -0600 |
|---|---|---|
| committer | Adrián Oliva <adrian.oliva@cimat.mx> | 2023-05-19 15:34:07 -0600 |
| commit | af3932c16b487e1f9b4975dacb8fc63d43f0d571 (patch) | |
| tree | f5fc430a190200edccfc9e399976a9e45354be2f | |
| parent | ff4cc46041251972634a28c1f780541fd105aadc (diff) | |
| download | ToDo-App-FE-af3932c16b487e1f9b4975dacb8fc63d43f0d571.tar.gz ToDo-App-FE-af3932c16b487e1f9b4975dacb8fc63d43f0d571.zip | |
Renamed multiple HTML elements.
ID collision problem.
| -rw-r--r-- | src/ToDo.jsx | 37 |
1 files changed, 16 insertions, 21 deletions
diff --git a/src/ToDo.jsx b/src/ToDo.jsx index f502689..ecc074b 100644 --- a/src/ToDo.jsx +++ b/src/ToDo.jsx @@ -54,10 +54,7 @@ export function NewToDo() { > <div className="modal-content"> <div className="modal-header"> - <h5 - className="modal-title" - id="exampleModalLongTitle" - > + <h5 className="modal-title" id="new-modal-title"> Add a new to do </h5> <button @@ -79,7 +76,7 @@ export function NewToDo() { value={my_last_idx + 1} disabled /> - <label htmlFor="floatingInput">ID</label> + <label htmlFor="new-todo-id">ID</label> </div> <div className="form-floating mb-3"> <input @@ -90,7 +87,7 @@ export function NewToDo() { set_new_text(e.target.value) } /> - <label htmlFor="floatingInput">Text</label> + <label htmlFor="new-todo-text">Text</label> </div> <div className="input-group mb-3"> <span className="input-group-text"> @@ -103,7 +100,7 @@ export function NewToDo() { name="new-todo-due-date" placeholder="Due date" /> - <label htmlFor="floatingInput"> + <label htmlFor="new-todo-due-date"> Due Date </label> </div> @@ -112,15 +109,14 @@ export function NewToDo() { <input className="form-check-input" type="checkbox" - value="" - id="flexCheckDefault" + id="new-todo-done" onChange={(e) => set_new_done(e.target.checked) } /> <label className="form-check-label" - htmlFor="flexCheckDefault" + htmlFor="new-todo-done" > Done </label> @@ -128,7 +124,7 @@ export function NewToDo() { <div className="form-floating mb-3"> <select className="form-select" - id="floatingSelect" + id="new-todo-priority" aria-label="Floating label select example" onChange={(e) => set_new_priority(e.target.value) @@ -140,7 +136,7 @@ export function NewToDo() { <option value="Medium">Medium</option> <option value="High">High</option> </select> - <label htmlFor="floatingSelect"> + <label htmlFor="new-todo-priority"> Priority </label> </div> @@ -236,7 +232,7 @@ export function ListToDos() { className="form-check-input" type="checkbox" checked={item.done} - id="flexCheckChecked" + id={"list-todo-done-" + item.id} onChange={(e) => dispatch( change_done({ @@ -325,7 +321,7 @@ export function ListToDos() { value={edit_id} disabled /> - <label htmlFor="floatingInput">ID</label> + <label htmlFor="edit-todo-id">ID</label> </div> <div className="form-floating mb-3"> <input @@ -337,7 +333,7 @@ export function ListToDos() { set_edit_text(e.target.value) } /> - <label htmlFor="floatingInput">Text</label> + <label htmlFor="edit-todo-text">Text</label> </div> <div className="input-group mb-3"> <span className="input-group-text"> @@ -351,7 +347,7 @@ export function ListToDos() { placeholder="Due date" value={edit_due_date} /> - <label htmlFor="floatingInput"> + <label htmlFor="edit-todo-due-date"> Due Date </label> </div> @@ -360,8 +356,7 @@ export function ListToDos() { <input className="form-check-input" type="checkbox" - value="" - id="flexCheckDefault" + id="edit-todo-done" onChange={(e) => set_edit_done(e.target.checked) } @@ -369,7 +364,7 @@ export function ListToDos() { /> <label className="form-check-label" - htmlFor="flexCheckDefault" + htmlFor="edit-todo-done" > Done </label> @@ -377,7 +372,7 @@ export function ListToDos() { <div className="form-floating mb-3"> <select className="form-select" - id="floatingSelect" + id="edit-todo-priority" aria-label="Floating label select example" value={edit_priority} onChange={(e) => @@ -388,7 +383,7 @@ export function ListToDos() { <option value="Medium">Medium</option> <option value="High">High</option> </select> - <label htmlFor="floatingSelect"> + <label htmlFor="edit-todo-priority"> Priority </label> </div> |