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.

Referenze

targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<iframe>Crea un frame all'interno di una pagina HTML.
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
hreflangConsente di dichiarare la lingua del documento collegato.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

inserimento immagini in un testo

Obiettivi futuri.html

Un Giorno a Napoli: Itinerario Det

Pagina prova html

Album-Reccomendations

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