Please assist me to complete my To Do App:
Add click on occasion on button “Take away” – In order that by click on on button “REMOVE” created merchandise could be faraway from localstorage as nicely.
Add click on occasion on button “Edit” – In order that created merchandise may very well be edited in localstorage as nicely.
Thank you numerous in your effort and time.
See my codepen
I dont know find out how to do it. Its not an project its simply my pet venture for myself. I began to study js 2 month in the past and its actually powerful for me. I used to be pondering that on this discussion board somebody might assist me by exhibiting how i could make them buttons work.
I’m certain somebody will likely be ready that will help you @dimerdelit however you solely posted an hour in the past.
Everybody on the boards is a volunteer, serving to others of their spare time, so please be affected person. 
1 Like
I’m taking a look at this. WIll greater than seemingly be again to it within the morning my time as it’s a bit late right here.
On your info, you want a singular id for every todo. That approach once you click on on say ‘delete’ it is aware of which merchandise to take away from the todoList.
For delete you should use Array.filter to attain that e.g.
// will filter out the chosen merchandise based mostly on id
const updatedTodos = todoList.filter((todo) => todo.id !== idToDelete);
Okay I’ll attempt it and can let if i made it or not
Just a few concepts @dimerdelit,
I used to be having a play final night time, and it appears to me that making your add todo part right into a type is perhaps a greater method to go.
Right here is only a tough
<header>
<div class="add-todo">
<h1>ToDo checklist</h1>
<type class="create_new_todo">
<enter
sort="textual content"
id='input-task'
identify="input-task"
placeholder="Subsequent activity to do"
required
>
<button sort="submit">Add</button>
</type>
</div>
</header>
<major>
<part class="todo-list-container">
<ul class="todo-list">
<li id='task-abcd1234'>
<enter
sort="textual content"
class="activity"
identify="activity"
worth="dummy activity 2"
disabled
>
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</li>
<li id='task-dcbf3251'>
<enter
sort="textual content"
class="activity"
identify="activity"
worth="dummy activity 2"
disabled
>
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</li>
</ul>
</part>
</major>
You possibly can see that every activity is created as an enter that has been set to disabled. I’m pondering clicking on edit would take away that disabled property letting you edit the prevailing activity.
There’s additionally an id on the guardian checklist component, with the intention to edit or delete the proper activity from storage.
As I say simply concepts at this level.
Okay, however i’m extra frightened about js 
I up to date my code by the way in which.
Now I’m able to delete component, however not from localstorage and I add random id.
Thats all what i can. Different methods i simply dont perceive.
The html is vital to the way you implement the JS. Should you get the html aspect of issues proper, it’s going to make the javascript that a lot less complicated.
As an illustration in your code you will have
addMessage.worth="";
addName.worth="";
Had these inputs been inside a type component, you possibly can simply reset the form.
addTodoForm.reset()
It’s your venture although, so simply meals for thought
sure, I perceive and its true.
I simply need to end it in a approach I began.
Might you please assist me to delete component from localstorage utilizing my randon id quantity?
1 Like
Do you will have an updated instance of your code?
Hello @dimerdelit, nicely I’ve tried to stay roughly to your code.
const addMessage = doc.querySelector('.message');
const addName = doc.querySelector('.identify');
const addButton = doc.querySelector('.add');
const todo = doc.querySelector('.todo');
const take away = doc.querySelector('.take away');
let todoList = [];
perform uniqueId()
return Math.random().toString(16).slice(2);
// a perform to replace the storage
// and replace the displayed checklist
perform updateTodoList (todoList)
localStorage.setItem('todo-list', JSON.stringify(todoList));
displayMessages(todoList);
if (localStorage.getItem('todo-list'))
todoList = JSON.parse(localStorage.getItem('todo-list'));
displayMessages(todoList);
addButton.addEventListener('click on', perform () );
// onClick="removeMessage('$todo.id')"
// passes the id to removeMessage
perform removeMessage (id)
// iterate by way of the prevailing todoList
// and utilizing filter take away the todo that has an id
// matching the todo we clicked delete on
todoList = todoList.filter(
perform(todo)
// solely return those that do not match
return todo.id !== id;
)
updateTodoList(todoList);
perform displayMessages(todoList = [])
// Iterate by way of every todo with map.
// For every todo return the checklist merchandise HTML
const messages = todoList.map(
perform(todo)
return `
<li id="$todo.id">
Identify:$todo.identify
Message:$todo.message
<button class="take away" onClick="removeMessage('$todo.id')">DELETE</button>
<button class="edit">EDIT</button>
</li>
`;
);
// be a part of the array gadgets into one large string
// utilizing a newline as a separator.
todo.innerHTML = messages.be a part of('n');
Here’s a codepen. You’ll clearly have to work in your css/html.
Features that I’ve used, that are price .
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join
Word: Personally I’d make additional adjustments to this, however didn’t need to veer too far off out of your authentic code.
Edit: Simply made a change to your inline onClick handler. Now passes the id to removeMessage as an alternative. I’d personally go for addEventListener, however this can be a less complicated resolution to passing the button component.
