CalcolaVocali by @davideCasadei1983 - Codewith.it

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

References

downloadConsente di scaricare file al click di collegamento ipertestuale.
minImposta il valore numerico o temporale minimo per un elemento input
<tr>Definisce le righe di una tabella (rows)
<caption>Definisce didascalie all'interno di una tabella
<pre>Indica una parte di testo preformattato
<embed>Tag per l'incorporamento di contenuti multimediali

Users

Log in to search for users

Explore

Find inspiration

un casino pazzesco

Prima pagina web

The Equalizer(2)

Effetto zoom con CSS

Costruzione di un form

3 LS 29-01 TABELLA(2)

davidesimonteonline

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