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

Inserisce un commento nel codice
text/plainDefinisce un metodo di non codifica dei valori di un form
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
<meta>Definisce i meta dati di una pagina web.
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio

Users

Log in to search for users

Explore

Find inspiration

Class Gradebook

menu a comparsa Jquery

la matematica nel medio evo

esercizio 1.1-1.6

voti con virgola

La mia prima pagina HTML

Questionario Serie A

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();
      });
    }
  });
});