javascripthtmlbuttontextinputnumbered-list

How can I add items and buttons as numbered list

This is my first project ever. I'm trying to make a simple to-do list for practice. One writes something, anything, on an input type text and it's supposed to show up below as a numbered list. Right next to the item in the list, there's supposed another button that eliminates the item.

How do I make it be a numbered list as I add items through the input text and how, at the same time, do I add input buttons along with the item? How do I stop it from adding items when the input text is still empty?

My code so far:

HTML

<div>
  <input type="text" placeholder="Add an item!" id="text1" class="text1" />
  <input type="button" value="Submit" id="button1" />
  <input type="button" value="Clear List" id="button2" />
  <p id="write"></p>
</div>

JS

var input2 = document.getElementById("button1");

input2.addEventListener("click", addStuff);

function addStuff() {
  todo = text1.value;
  add.innerHTML += todo + "<br />";
}
Solution

  • I encourage you to create it on your own with the help of the following list. But if you get stuck you can use ready-made code.

    1. You have to add the <ol> tag to which notes will be added.
    2. Add a method that removes content from a list using the innerHTML method.
    3. Create a method that removes a single note. Inside using event object you can get a parent of a clicked button and remove it from the DOM using the remove() method.
    4. Within the addStuff method, take the value of the text field. Then create a button and li with the createElement method, add the required attributes to each of them, and append button to li and li to the ol list.

    Usefull links