5/10/24 es. 9 - 3 bottoni by @sarazani - Codewith.it

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

References

<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
_blankApre i collegamenti ipertestuali in una nuova scheda del browser
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
<object>Incorpora risorse varie nella pagina web.

Users

Log in to search for users

Explore

Find inspiration

Gesù nostro signore(2)

FORM PROF DA PROVARE

copia di html typing

esercitazione n1

Pagina Di Prova 1.11.23

Heads Or Tails Random Tally

basi html e tag

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>3 bottoni</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>Scegli cosa fare della tua frase</h1>
        <!--qui il form che richiamo nel javascript con moduloVocali-->
        <form id="formTrasformazione">
            <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" id="caso1">Tutto Maiuscolo</button>
            <button type="submit" class="btn btn-primary" id="caso2">Tutto Minuscolo</button>
            <button type="submit" class="btn btn-primary" id="caso3">Prima lettera maiuscola</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. Permetti all'utente di scegliere tra tre opzioni di conversione(3 bottoni): maiuscolo, minuscolo o prima lettera di ogni parola maiuscola. Applica la conversione scelta e visualizza il risultato.

$(document).ready(function() {
  //caso 1 -> mi collego direttamente all'id del bottone e non all'id del form. cambio quindi submit che è il submit del form al click del bottone
  $('#caso1').click(function(evento) {
    evento.preventDefault();
    //quello che prende dall'utente viene messo tutto in maiuscolo e subito messo nel risultato
    const frase = $('#inputStringa').val().toUpperCase();
    $('#risultato').text(frase);
  });
  
  //caso 2
  $('#caso2').click(function(evento) {
    evento.preventDefault();
    const frase = $('#inputStringa').val().toLowerCase();
    $('#risultato').text(frase);
  });

  //caso 3 -> non esiste una funzione tipo toUpperCase che fa in automatico? 
  $('#caso3').click(function(evento) {
    evento.preventDefault();
    
    //prendo la frase inserita dall'utente. creo altra variabile fraseNuova con una funzione. questa funzione maiuscolaPrima prende le prime lettere di ogni parola e le fa diventare maiuscole
    let frase = $('#inputStringa').val();
    let fraseNuova = maiuscolaPrima(frase);
    $('#risultato').text(fraseNuova);
 
    //frase.replace(/\b\w/g, function(char) { utilizza un'espressione regolare (regex) per individuare le prime lettere di ogni parola nella stringa frase e poi applica una funzione di callback (replace) per convertire ciascuna di queste lettere in maiuscolo. In particolare: \b indica bordo di parola e \w qualsiasi carattere alfanumerico -> \b\w corrisponde a ogni prima lettera di ogni parola
    // funzione maiuscolaPrima con parametro frase.
    function maiuscolaPrima(frase) {
      // metodo replace su frase con l'espressione regolare \b\w, che corrisponde alle prime lettere di ogni parola. La funzione di callback, cioè il replace, viene chiamata per ogni corrispondenza.
      //char rappresenta ogni carattere individuato dall'espressione regolare durante il processo di sostituzione
      return frase.replace(/\b\w/g, function(char) {
        // Per ogni carattere corrispondente, converte il carattere in maiuscolo utilizzando il metodo toUpperCase().
      return char.toUpperCase();
      });
    }
  });
});