MAKE THIS SITE BETTER <!DOCTYPE html>
<html>
<head>
  <title>Meu Projeto de Financiamento Coletivo</title>
  <style>
    /* Estilos para a barra de meta em aumento */
    .progress-bar {
      width: 100%;
      background-color: #f0f0f0;
      height: 30px;
      margin-bottom: 10px;
    }
.progress {
  height: 100%;
  background-color: #42b983;
  width: 0;
}

/* Estilos para a lista de doadores */
.lista-doadores {
  list-style-type: none;
  padding: 0;
}

.lista-doadores li {
  margin-bottom: 5px;
}
  </style>
</head>
<body>
  <h1>Meu Projeto de Financiamento Coletivo</h1>
  <p>Ajude-nos a alcançar nosso objetivo de arrecadação!</p>
  <div class="progress-bar">
    <div class="progress" id="progress-bar" style="width: 0;"></div>
  </div>
  <h2>Faça sua doação</h2>
  <form>
    <label for="valor">Valor da doação (em reais):</label>
    <input type="number" id="valor" name="valor" step="0.01" min="0.01" required>
    <button type="button" onclick="doar()">Doar</button>
  </form>
  <h2>Doadores</h2>
  <ul id="lista-doadores" class="lista-doadores"></ul>
  <script>
    // Variáveis de controle
    let arrecadado = 0;
    const meta = 1000; // Valor da meta em reais
function doar() {
  const valor = parseFloat(document.getElementById("valor").value);
  if (isNaN(valor) || valor <= 0) {
    alert("Por favor, insira um valor válido para a doação.");
    return;
  }

  arrecadado += valor; // Atualiza o valor arrecadado
  document.getElementById("valor").value = ""; // Limpa o campo de doação
  atualizarBarraDeMeta(