CalcolaVocali by @davideCasadei1983 - Codewith.it

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

Referenze

srcIndica la provenienza di una risorsa esterna (tramite URL).
maxImposta il valore numerico o temporale massimo per un elemento input
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<br>Inserisce uno spazio vuoto tra due elementi HTML.
<video>Integra e controlla video in una pagina HTML
placeholderDefinisce un testo segnaposto per un elemento input o textarea

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

copia di follow

GoUp Fitness Il tuo percorso verso

New Charter Page Test

Neon Flux - Visual Design in Motio

Esercizio (02/02/2024)

esercizio 01 pagina semplice

Progetto Cinema Lab 2526

landing il colibri\\

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

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