CalcolaVocali by @davideCasadei1983 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

maxImposta il valore numerico o temporale massimo per un elemento input
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
sizeDetermina le dimensioni dell'elemento in base al valore contenuto
minlengthDetermina il numero minimo di caratteri per un elemento input
selectedPre-seleziona un elemento di input
novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input

Users

Log in to search for users

Explore

Find inspiration

compito 15 maggio

Esercitazione n.1

Elenchi puntati con HTML

textarea select and replace

Con nome bandiera(2)(2)

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html>

<head>
  <title>Conta vocali</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>

<body>
  <h1 class="text-uppercase">Conta le vocali</h1>
  <div class="description">
    <p>Clicca il pulsante inizia. <br>Nel form che verrà visualizzato inserisci la frase della quale ti interessa sapere quante volte ciascuna vocale è stata usata
    </p>
  </div>
  <a id="startFunction" class="btn btn-primary" href="#" role="button">Inizia</a>
  <div id="result" class="hidden">
    <p class="mt-2 mb-2"><b>Frase analizzata: </b><span id="stringPreview"></span></p>
    <div id="stringPreview"></div>
    <table class="table table-hover w-auto text-center">
      <thead class="thead-dark text-uppercase">
        <tr>
          <th scope="col">Vocale</th>
          <th scope="col">Numero di volte</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>a</th>
          <td id="numOfA"></td>
        </tr>
        <tr>
          <th>e</th>
          <td id="numOfE"></td>
        </tr>
        <tr>
          <th>i</th>
          <td id="numOfI"></td>
        </tr>
        <tr>
          <th>o</th>
          <td id="numOfO"></td>
        </tr>
        <tr>
          <th>u</th>
          <td id="numOfU"></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

.hidden{
  display:none;
}

let startButton = document.getElementById('startFunction');
// Inizializzazione di un array a 5 valori per contare le vocali (a, e, i, o, u)
let arrayVocals = [0, 0, 0, 0, 0];

startButton.addEventListener('click', function () {
  let yourString = prompt("Inserisci la frase di cui contare le vocali");

  if (yourString !== null) {
    let purgedString = yourString.trim().toLowerCase();

    purgedString.split('').forEach(char => {
      switch (char) {
        case 'a':
          arrayVocals[0]++;
          break;
        case 'e':
          arrayVocals[1]++;
          break;
        case 'i':
          arrayVocals[2]++;
          break;
        case 'o':
          arrayVocals[3]++;
          break;
        case 'u':
          arrayVocals[4]++;
          break;
      }
    });
    document.getElementById("numOfA").innerHTML = arrayVocals[0];
    document.getElementById("numOfE").innerHTML = arrayVocals[1];
    document.getElementById("numOfI").innerHTML = arrayVocals[2];
    document.getElementById("numOfO").innerHTML = arrayVocals[3];
    document.getElementById("numOfU").innerHTML = arrayVocals[4];
    
    document.getElementById("stringPreview").innerHTML = yourString;

    document.getElementById("result").classList.remove("hidden");
  } else {
    console.log("Nessuna stringa da analizzare.");
  }
});