Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Agenda telefonică</title>

    <style type="text/css">

        body {
            font-family: tahoma;
            font-size: 11pt;
            line-height: 1.2em;
            margin: 0;
            padding: 12px;
        }

        h1 {
            background-color: Navy;
            color: White;
            margin: 0;
            padding: 16px;
            margin: -12px -12px 20px -12px;
        }

        table {
            border: 1px solid Gray;
            border-collapse: collapse;
            text-align: left;
        }

        td, th {
            padding: 8px 12px;
            border-bottom: 1px solid Gray;
        }

        th {
            background-color: #EEEEEE;
        }


        caption {
            padding: 8px 12px;
            border: 1px solid Gray;
            border-bottom: none;
            background-color: #E0E0E0;
            font-weight: bold;
        }

        tfoot {
            background-color: #EEEEEE;
            font-weight: bold;
        }


        form {
            border: 1px solid Gray;
            border-radius: 5px;
            background-color: #EEEEEE;
            padding: 16px;
            float:right;
        }

        label {
        }

        input {
            font-size: 11pt;
        }

            input[type="button"] {
                font-weight: bold;
                padding: 5px;
            }

            table{
                float:left;
                width:60%;
            }

            form{
                float: right;
                width:30%;
            }

            label{
                display:block;
                float:left;
                clear:both;
                width:30%

            }

            input{
                display:block;
                float:right;
                width:60%;
                margin:4px;
            }

            h1{
              /* position: relative; */
              /* arata exact ca pana acum doar ca
                daca noi ii spunem top 100 se duce de la ultimul punct vede unde
                sunt 100px si il deseneaza aici, dar spatiul lui ramane insemnat
                acolo unde era initial
                si la fel pe orizontala*/

                /*position:absolute;*/

                position:fixed; /*el nu mai e pozitionat fata de parinte
                ca la relativ, este poz fata de fereastra*/

                top:50px;
                left:-60px;
                /*daca avem poz abs el o sa caute mereu primul parinte*/

            }
    </style>
    <script type="text/javascript">

        /*vrem sa ne apeleze functia cand a term de incarcat pagina*/

        document.addEventListener('DOMContentLoaded', appStart);

        function appStart(){
            document.querySelector('#btnAdauga').addEventListener('click',adauga);


        }

        function adauga(){
            var nume= document.querySelector('#nume').value;
            var prenume= document.querySelector('#prenume').value;
            var telefon = document.querySelector('#telefon').value;

            var tbody = document.querySelector('tbody');

            var rand = document.createElement('tr');
            tbody.append(rand);

            let adaugaCelula= text => {


            var celula = document.createElement('td');
            celula.innerText = text;
            rand.append(celula);
            };

            adaugaCelula(nume);
            adaugaCelula(prenume);
            adaugaCelula(telefon);
        }
    </script>
</head>
<body>
    <h1>Agenda telefonică</h1>
    <table>
        <caption>
            Lista persoane
        </caption>
        <thead>
            <tr>
                <th>Nume</th>
                <th>Prenume</th>
                <th>Telefon</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Popescu</td>
                <td>Ion</td>
                <td>023423222</td>
            </tr>
            <tr>
                <td>Vasilescu</td>
                <td>Maria</td>
                <td>073423222</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">Număr persoane: 2</td>
            </tr>
        </tfoot>
    </table>
    <form action="#" class="controls">
        <label for="nume">Nume:</label>
        <input name="nume" id="nume">

        <label for="prenume">Prenume:</label>
        <input name="prenume" id="prenume">

        <label for="Telefon">Telefon:</label>
        <input name="telefon" id="telefon">

        <input type="button" id="btnAdauga" name="btnAdauga" value="Adaugă">
    </form>
</body>
</html>