ToDoList

by Filip Kolev

HTML

<body>
    <label for="todolist-name">Enter TODO List name:</label><br />
    <input type="text" name="todolist-name" id="todolist-name" />
    <input type="button" value="Create TODO List" id="createTODO" onclick="createTODO()" />

</body>

CSS

div.wrapper {
    border: 1px solid black;
    margin: 0 auto;
    width: 600px;
    padding: 10px;
}

div.wrapper h1 {
        text-align: center;
        margin: 0px;
}

div.container {
    border: 1px solid black;
    padding: 10px;
}

section {
    border: 1px solid black;
    padding: 10px;
}

section h4 {
   text-align: right;
   margin: 0px;
}

ul {
    list-style-type: none;
    padding: 0px;
}

ul li {
    margin-bottom: 10px;
    border-bottom: 1px solid black;
}

input[type=text], button {
    margin-left: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

JavaScript

var ToDoList = (function () {
    var Wrapper = function (name) {
        this._name = name;
    }
    Wrapper.prototype.createElements = function () {
        var div = document.createElement('div');
        div.setAttribute('class', 'wrapper');
        var h1 = document.createElement('h1');
        h1.innerText = this._name;
        div.appendChild(h1);
        var container = document.createElement('div');
        container.setAttribute('class', 'container');
        div.appendChild(container);;
        var input = document.createElement('input');
        input.setAttribute('type', 'text');
        div.appendChild(input);
        var btn = document.createElement('button');
        btn.innerText = 'new section';
        btn.addEventListener('click', function () {
            var a = new ToDoList.Section(btn.previousSibling.value);
            a.createElements();
            container.appendChild(a.domElement);
        })
        div.appendChild(btn);
        document.getElementsByTagName('body')[0].appendChild(div);
    }
    var Section = function (name) {
        this._name = name;
        this.domElement = document.createElement('section');
    }
    Section.prototype.createElements = function () {        
        var h4 = document.createElement('h4');
        h4.innerText = this._name;
        this.domElement.appendChild(h4);
        var ul = document.createElement('ul');
        this.domElement.appendChild(ul);
    }
    return {
        Wrapper: Wrapper,
        Section: Section
    }
})();
function createTODO() {
    var h1name = document.getElementById('createTODO').previousElementSibling.value;
    if (h1name === '') {
        throw new Error('nemmash ime baca error')
    } else {
        var a = new ToDoList.Wrapper(h1name);
        a.createElements();
    }
}