5/10/24 es. 6 - letterainform by @sarazani - Codewith.it

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

Referenze

<iframe>Crea un frame all'interno di una pagina HTML.
sizeDetermina le dimensioni dell'elemento in base al valore contenuto
novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input
widthImposta la larghezza di un elemento HTML
<div>Crea contenitori generici o sezioni in una pagina
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

esercitazione 2

FORM PROF DA PROVARE

Design & Com Digitale — Studio C

Esercitazione Morra cines

Bootstrap List Grid

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 lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cerca lettera</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>Ci sarà la lettera nella frase?</h1>
        <!--qui il form che richiamo nel javascript con moduloVocali-->
        <form id="trova">
            <div class="form-group">
                <label for="inputStringa">Inserisci una frase e sotto inserisci una lettera. Poi premi cerca per capire se la tua lettera è presente nella 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">
                <input type="text" class="form-control" id="inputStringa2" name="inputStringa2" placeholder="Scrivi qui la lettera da cercare">
            </div>
            <button type="submit" class="btn btn-primary">Cerca</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>

.form-control{
  margin: 20px 0px 20px 0px;
}

//Chiedi all'utente di inserire una frase e una lettera da cercare in un form(ovviamente in due input). Verifica se la lettera inserita dall'utente è presente nella parola e visualizza il risultato(numero di volte che é presente).

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

//prendo ciò che ha inserito l'utente nei due input
  let fraseUtente = $('#inputStringa').val();
  fraseUtente=fraseUtente.toLowerCase().replace(/ /g, "");
  let letteraUtente = $('#inputStringa2').val();
  letteraUtente = letteraUtente.toLowerCase().replace(/ /g, "");
  //questo mi serve per il risultato perché se uso letteraUtente mi dice che non posso renderla maiscola perché c'era il lowercase, allora ho creato un altra variabile già maiuscola
  let letteraUtenteMaiuscola = letteraUtente.toUpperCase();
  

    //match tra la lettera che l'utente ha scelto che deve essere cercata nella frase inserita
    let qualeLettera = fraseUtente.match(letteraUtente);
    //conta quante volte è presente la lettera inizializzando a zero e poi con ciclo for si va a contare usando length della frase
    let numeroVolte = 0;
    for (let i = 0; i < fraseUtente.length; i++) {
      if (fraseUtente[i] === letteraUtente) {
        numeroVolte++;
      }

    //se il numero di volte in cui la lettera è presente è diverso da 0 significa che la lettera è presente e mi dice quante volte c'è. alrimenti dice che non è presente
    if(numeroVolte!=0){
      //qualeLettera è un array risultato dalla funzione match. per cui devo usare la posizione per applicare il .toUpperCase altrimenti non funziona
      $('#risultato').text('La lettera che hai scelto, cioè la '+ qualeLettera[0].toUpperCase() +" è presente nella tua frase " + numeroVolte + " volte.");
    }else{
      //qui uso letteraUtente al posto di qualeLettera perché se qualeLettera non ha corrispondenza risulta null e viene "la lettera che hai scelto cioè null non è presente nella tua frase"
      $('#risultato').text('La lettera che hai scelto, cioè la '+ letteraUtenteMaiuscola +" non è presente nella tua frase.");
    }
    }
    
  });
});