Adding  items dynamically to a to-do list
I recommend putting the script at the end of the page, just before &lt;/body&gt; The reason is that you'll want to have scripts run when the DOM is ready (i.e. all the elements are present and ready for JS manipulation).

&lt;center&gt; is a deprecated stylistic element. To center an element, set left and right margins to auto. For text, use text-align: center:

.centered-element {
  display: block;
  width: 250px; /* Your desired width */
  margin-left: auto;
  margin-right: auto;
}

.element-with-centered-text {
  text-align: center;
}


This way, you have separation of concerns. HTML deals with describing the structure, CSS deals with styling your HTML.

* {
    font-family: "Times New Roman", Times, serif;
}


This is unnecessary. Applying font-family to body should be enough to apply it to all elements. Font style is inherited by all descendants until an element overrides it (and styles its own descendants).

fieldset {...}

input[type=text] {...}

button {...}

ul {..}

li {...}


I don't recommend styling elements directly because it breaks expectations. If I add a &lt;ul&gt; in your app for whatever purpose, I expect it to have bullets. But since your CSS removes them, my list won't have bullets. I'd have to add them back when, by default, they should have had bullets.

Instead, use classes to target app-specific styling and leave element defaults alone. The only time I would style an element directly is if it's part of a globally-applied theme or a normalizer.

As for your JavaScript, you could abstract away your element creation with a function like the following. This way, you don't have to repeat element creation scripts everywhere and you can easily describe dynamic HTML in a nested manner, like HTML.

const e = (name, properties = {}, children = []) =&gt; {
  // Create the element
  const element = document.createElement(name)

  // Apply properties
  Object.keys(properties).forEach(property =&gt; {
    element.setAttribute(property, propertyes[property])
  })

  // Append children
  children.forEach(c =&gt; {
    if(!c) return
    const node = (typeof c === 'string') ? document.createTextNode(c) : c
    element.appendChild(node)
  })

  return element
}

// Usage
const root = e('div', {}, [
  e('p', {}, [
    e('span', {}, [
      'Hello, World!',
      'Lorem Ipsum'
    ])
  ])
])

root.appendChild(e('span', {}, ['another piece of text']))


If the syntax looks familiar, it's because this is the basic premise of how most VDOM libraries work under the hood. They're just nested calls of functions that either return an actual element, or objects that represent elements (which are turned to elements later).

From there, you can describe and build your "components" like:

const LoadForm = () =&gt; {
  e('div', {}, [
    e('input', { type: 'text', name: 'user_input', placeholder: 'Enter here...' }),
    e('br'),
    e('button', { name: 'add_list' }, ['Add To List']),
    e('button', { name: 'remove_list' }, ['Remove From List']),
  ])

document.getElementById('in').appendChild(LoadForm())


You can even encapsulate this in a class if you want so that you can also add some helper methods.

class LoadForm {
  onAdd () {
    // Do something on add
  }
  onRemove () {
    // Do something on remove
  }
  render() {
    return (
      e('div', {}, [
        e('input', { type: 'text', name: 'user_input', placeholder: 'Enter here...' }),
        e('br'),
        e('button', { name: 'add_list', onclick: this.onAdd }, [
          'Add To List'
        ]),
        e('button', { name: 'remove_list', onclick: this.onRemove }, [
          'Remove From List'
        ]),
      ])
    )
  }
}

document.getElementById('in').appendChild((new LoadForm()).render())


Lastly, JavaScript is written in camelCase, not snake_case.