5/10/24 es. 8 - conta alfabeto by @sarazani - Codewith.it

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

References

<a>Inserisce link e collegamenti ipertestuali
<body>Tag primario di un documento HTML
<td>Definisce una cella di una tabella HTML.
<h1>Titolo di intestazione di primo livello
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina
text/plainDefinisce un metodo di non codifica dei valori di un form

Users

Log in to search for users

Explore

Find inspiration

es da correggere

conta caratteri online

Cambia colore testo JS

La storia di Cappuccetto Rosso

Pagina Di Prova 1.11.23

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 lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>alfabeto</title>
    <!-- Collegamento a Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>Conta le lettere dell'alfabeto nella frase</h1>
        <!--qui il form che richiamo nel javascript con moduloVocali-->
        <form id="formAlfabeto">
            <div class="form-group">
                <label for="inputStringa">Inserisci una frase:</label>
                <!--qui sotto ho l'inputStringa che richiamo poi come valore della costante stringaInserita-->
                <input type="text" class="form-control" id="inputStringa" name="inputStringa" placeholder="Scrivi qui la tua frase">
            </div>
            <button type="submit" class="btn btn-primary">Conta</button>
        </form>
        <!--il risultato poi si ricollega al risultato di Javascritp e viene visualizzato qui-->
        <div id="risultato" class="mt-3"></div>
    </div>

    <!-- Collegamento a jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Collegamento a JavaScript personalizzato -->
    <script src="script.js"></script>
</body>
</html>

//Chiedi all'utente di inserire una frase in un form. Conta quante volte ogni lettera dell'alfabeto appare nella frase e visualizza il risultato in un formato tabellare

$(document).ready(function() {
  $('#formAlfabeto').submit(function(evento) {
    evento.preventDefault();

    //prendo quello che l'utente ha inserito e ottengo valore che metto minuscolo. definisco espressione regolare con tutte le lettere dell'alfabeto    
    const frase = $('#inputStringa').val().toLowerCase();
    const lettere = /[abcdefghijklmnopqrstuvwxyz]/g;
    //trovo corrispondenze tra l'espressione regolare e la frase
    let matcha = frase.match(lettere);
   
   //creo un oggetto che mi serve per contare tutte le lettere (per ora resta vuoto, lo riempio dopo)
   let conta = {};

    // matcha è un array che contiene tutte le corrispondenze trovate nella frase utilizzando l'espressione regolare lettere. La funzione forEach è un metodo degli array in JavaScript che ti permette di iterare su ciascun elemento dell'array.
    //struttura forEach = array.forEach(function(elemento){}
    //dico a JavaScript di eseguire una funzione per ogni elemento nell'array matcha. La funzione che stai passando come argomento a forEach è una funzione anonima, dichiarata direttamente all'interno delle parentesi tonde. Questa funzione accetta un parametro, che chiamiamo lettera, e questo rappresenta ciascun elemento dell'array durante l'iterazione. matcha.forEach(function(lettera) { sta dicendo: "Per ogni lettera trovata nell'array matcha, esegui il codice all'interno delle parentesi graffe." All'interno di quelle graffe, stai gestendo ogni singola lettera che è stata trovata, e il codice all'interno di quel blocco viene eseguito per ciascuna lettera nell'array.
    matcha.forEach(function(lettera) {
      //se la lettera è presente fa +1
      if (conta[lettera]) {
        conta[lettera]++;
      } else {
        //se è la prima volta che incontra la lettera la mette a 1, poi se la reincontra una seconda volta farà come sopra
        conta[lettera] = 1;
      }
    });
     
     //inzializzata stringa che mi serve per i risultati altrimenti senza questa mi salva solo una lettera alla volta e sovrascrive
     let stringaFinale ="";

    //Itera attraverso ogni chiave (lettera) nell'oggetto conta
     for (let lettera in conta) {
      //aggiunge una riga alla stringaFinale e così via
        stringaFinale = stringaFinale+`${lettera}: ${conta[lettera]} volt${conta[lettera] !== 1 ? 'e' : 'a'}<br>`;
      }

      $('#risultato').html(stringaFinale); 
  });
});