demo9.html

<html>
    <head>
        <title>
            Add HTML elements
        </title>
    </head>
    <style>
        section{
            text-align: center;
        }
        ul{
            list-style: none;
            font-size: 24px;
            border: none;
        }
        body{
           background-color: aquamarine;
        }
        button{
            border: none;
            font-size: 16px;
            padding:10px;
            background-color: #4CAF50;
        }
        li{
            background-color: beige;
            margin-top: 10px;
            padding:10px;
            margin-right: 20%;
            margin-left:20%
        }
        #b{
            padding:10px;
        }
    </style>
    <body>
        <header>
            <section>
                <input type="text" id="b" placeholder="Enter items here" onkeypress="return event.charCode != 32">
                <input type="submit" id="add-item" value="add item" >

                <ul id="todo-list">
                    <li>ListItem1</li>
                    <li>ListItem2</li>
                    <li>ListItem3</li> 
                </ul>
            </section>
        </header>
    </body>
    <script type="text/javascript" src="demo9.js"></script>
</html>