CalcolaVocali by @davideCasadei1983 - Codewith.it

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

References

<h1>Titolo di intestazione di primo livello
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
<hr>Inserisce una linea orizzontale
widthImposta la larghezza di un elemento HTML
<tr>Definisce le righe di una tabella (rows)
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento

Users

Log in to search for users

Explore

Find inspiration

classifica finita

prova ennesima tabella

SUAMI NOVILLO 3BSC

Bootstrap sources

JS Istruzioni condizionali es2

Orologio analogico

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.");
  }
});