title: How can I add items and buttons as numbered list
body: <p>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.</p>
  <p>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?</p>
  <p>My code so far:</p>
  <p>HTML</p>
  <pre><code>&lt;div&gt;
    &lt;input type=&quot;text&quot; placeholder=&quot;Add an item!&quot; id=&quot;text1&quot; class=&quot;text1&quot; /&gt;
    &lt;input type=&quot;button&quot; value=&quot;Submit&quot; id=&quot;button1&quot; /&gt;
    &lt;input type=&quot;button&quot; value=&quot;Clear List&quot; id=&quot;button2&quot; /&gt;
    &lt;p id=&quot;write&quot;&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p>JS</p>
  <pre class="lang-js prettyprint-override"><code>var input2 = document.getElementById(&quot;button1&quot;);
  
  input2.addEventListener(&quot;click&quot;, addStuff);
  
  function addStuff() {
    todo = text1.value;
    add.innerHTML += todo + &quot;&lt;br /&gt;&quot;;
  }
  
  </code></pre>