Untitled

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        ul li.fail {
            color: red;
        }
    </style>
</head>

<body>
    <select id="disciplina">
        <option value="Multimedia">Multimedia</option>
        <option value="Java">Java</option>
        <option value="POO">POO</option>
    </select>
    <input type="text" id="nota" placeholder="Introdu nota">
    <button id="btnAdauga">Adauga</button>
    <ul id="lista"></ul>

    <script type="text/javascript">
        function adaugaInLista(disciplina, nota) {
            let lista = document.getElementById('lista');
            let li = document.createElement('li');
            li.textContent = `${disciplina}: ${nota}`;

            if (parseInt(nota) < 5) {
                li.classList.add('fail');
            }

            lista.appendChild(li);
        }

        document.addEventListener('DOMContentLoaded', function () {
            let testObject = { disciplina: 'Java', nota: '8' };
            adaugaInLista(testObject.disciplina, testObject.nota);
        });

        document.getElementById('btnAdauga').addEventListener('click', function () {
            let disciplina = document.getElementById('disciplina').value;
            let nota = document.getElementById('nota').value;

            adaugaInLista(disciplina, nota);
        });
    </script>
</body>

</html>
Editor is loading...