[Projeto] Desafio PET - alterações no código , operador ternário, vale olhar | Lógica de programação: praticando com desafios

Fiz algumas mudanças no código o destaque é para o operador Ternario, em vez de dois casos, fiz para três

function calcularProbabilidadeAdocao() {
    let peso = document.getElementById('peso').value;
    let idade = document.getElementById('idade').value;

    let nota = 10;

    if (peso > 20) {
        nota = nota-4;
    } else {    
     if (peso > 10 && peso < 20) 
        nota = nota-2;
    }
    console.log(`${nota}`)
    if (idade >= 14) {
       nota = nota-4;
    } else {
    if (idade >= 8 && idade < 14) 
      nota = nota-2;
    }
    document.getElementById("nota").innerHTML= nota > 7 ? `Chance de adoção Alta:${nota}` : nota < 5 ? `Chance de adoção Baixa:${nota}`: `Chance de adoção Media: ${nota}`;
    console.log(`${nota}`);
    return nota;
    
}

Tenho uns códigos simples que uso caso alguém queira mexer também com html e css, peguei dos exercicios, pode copiar , não me foquei no layout HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <header>
        <h1 id="nota">Adoção</h1>
    </header>
    <label>Peso</label>
    <input type ="text" id="peso">
    <label>Idade</label>
    <input type ="text" id="idade">
    <main class="container">
        <button onclick="" class="button">Valor</button>
        <button onclick="calcularProbabilidadeAdocao()" class="button">Calcular</button>
       
    </main>

      <script src="app.js"></script>
</body>
</html>

CSS

header {
    text-align: center;
    font-size: 30px;
    color: #279EFF;
  }
  
  main, html {
    margin: 0;
    padding: 0;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0C356A;
  }
  
  .container {
    text-align: center;
    color: #279EFF;
  }
  
  .button {
    padding: 10px 20px;
    margin: 10px;
    font-size: 24px;
    border: none;
    background-color: #3498db;
    cursor: pointer;
    border-radius: 5px;
  }
  
  .button:hover {
    background-color: #2980b9;
  }

Todo comentário é bem vindo