<!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>