AV5 Zadaca3

//HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
    <script src='script.js'></script>
</head>


<body>
    <h2>Projects details</h2>
    <div><label>Author</label><input id="author" type="text"></div>
    <div><label>Project</label><input id="project" type="text"></div>
    <div><label>Cost</label><input id="cost" type="text"></div>
    <div><input type="button" name="add" value="Add" onclick="addRow();"></div>
    <h2>Project list - Total cost: <span id="total">0</span></h2>
    <table id="projects">
    <thead><th>Author</th><th>Project</th><th
    colspan="2">Cost</th></thead>
    <tbody>
    </tbody>
    </table>
</body>
</html>

//CSS
label{
    display: inline-block;
    width: 100px;
}
div{
    margin-bottom: 5px;
}
input[type=button]
{
    width:265px;
}
table , td , th{
    border: 1px solid black;
    border-collapse: collapse;
    padding:10px;
}


//JS
function addRow() {
    var tableRef = document.getElementById('projects').getElementsByTagName('tbody')[0];
    var project = document.getElementById('project');
    var author = document.getElementById('author');
    var cost = document.getElementById('cost');

    if(project.value == "" || author.value == "" || cost.value == "") {
    alert("All values are not entered.");
    return;
    }
    var newRow = tableRef.insertRow(tableRef.rows.length);
    var newCell0 = newRow.insertCell(0);
    var newCell1 = newRow.insertCell(1);
    var newCell2 = newRow.insertCell(2);
    var newCell3 = newRow.insertCell(3);

    newCell0.innerHTML = author.value;
    newCell1.innerHTML = project.value;
    newCell2.innerHTML = cost.value;
    newCell2.setAttribute('class', 'cost');

var btn = document.createElement("BUTTON");

var t = document.createTextNode("Remove");
btn.appendChild(t);
btn.setAttribute('onclick','removeRow(this);');
newCell3.appendChild(btn);

author.value = "";
project.value = "";
cost.value = "";
sumProjects();
function removeRow(ref) {

    tr = ref.parentNode.parentNode;
    tr.parentNode.removeChild(tr);
    sumProjects();
    }
    function sumProjects() {
    var costCells = document.getElementsByClassName('cost');
    var sum = 0;
    for(var i=0; i<costCells.length; i++) {
    sum += parseInt(costCells[i].innerHTML);
    }
    document.getElementById('total').innerHTML = sum;
    }
}