Untitled

<html>

<script type="text/javascript" src="scripts.js">
</script>

<body>
<div id="add-task">
    <p>Text</p>
    <input/>
    <button onclick="onButtonClick()">Button</button>
</div>

<br>
<button onclick="ClearAllTasks()">Clear all</button>
<br>
<strong>All Tasks:</strong>

<div id="tasks-list-empty" style="display:none">
    <br/>
    you have no tasks
</div>
<div id="task-list">
    <ul>
        <li>Hi!</li>
        <li>Hello!)</li>
    </ul>
</div>


</body>

</html>

//---------------------------------------------------------------------------------------------------------------------------------
                                                     // scripts.js

var data = []; //massiv

//peremalovka
var redrow = function () {
    var taskel = getULList();
    taskel.innerHTML = '';
    var li = [];
    for (k in data) {
        var task = data[k];
        taskel.innerHTML += '<li>' + task + '</li>';
    }
    hideEmpty();

}

function getULList() {
    var taskslistelem = document
        .getElementById('task-list')
        .getElementsByTagName('ul')[0];
    return taskslistelem;
}

function onButtonClick() {
    var input = document
        .getElementById('add-task')
        .getElementsByTagName('input')[0];

    var value = input.value;
    data.push(value);
    redrow();

}

function ClearAllTasks() {

    var taskslistelem = getULList();
    taskslistelem.innerHTML = ' ';
    showEmpty();
    data = [];
}

function showEmpty() {
    var taskListEmptyEl = document.getElementById('tasks-list-empty');
    taskListEmptyEl.style.display = '';
}

function hideEmpty() {
    var taskListEmptyEl = document.getElementById('tasks-list-empty');
    taskListEmptyEl.style.display = 'none';
}