AV5 Zadaca2

<!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>
    <div><label>Avtor </label><input type="text" id="avtor"></div>
    <div><label>Proekt </label><input type="text" id="proekt"></div>
    <div><label>Cena </label><input type="text" id="cena"></div>
<div>
    <input type="button" id="btn" onclick="dodadiRed()" value="Add">
</div>


<h2>Proekti</h2>
<table id="proekti">
    <thead>
        <th>Avtori</th>
        <th>Proekti</th>
        <th>Ceni</th>
    </thead>
    <tbody>

    </tbody>
</table>
</body>
</html>

//JS

function dodadiRed() {
    var tableRef = document.getElementById('proekti').getElementsByTagName('tbody')[0];
    var project = document.getElementById('proekt');
    var author = document.getElementById('avtor');
    var cost = document.getElementById('cena');


    if(proekt.value == "" || avtor.value == "" || cena.value == "") {
    alert("Ne se vneseni site polinja.");
    return;
    }


    var newRow = tableRef.insertRow(tableRef.rows.length);
    var newCell0 = newRow.insertCell(0);
    var newCell1 = newRow.insertCell(1);
    var newCell2 = newRow.insertCell(2);


    newCell0.innerHTML = avtor.value;
    newCell1.innerHTML = proekt.value;
    newCell2.innerHTML = cena.value;

    avtor.value = "";
    proekt.value = "";
    cena.value = "";
    }

    label{
    display: inline-block;
    width: 100px;
}

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