Esercizi 05/03/2024 es9 by @AurelianoDC - Codewith.it

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

References

<h4>Titolo di intestazione di quarto livello
srcIndica la provenienza di una risorsa esterna (tramite URL).
titleIndica informazioni aggiuntive riguardo un elemento HTML
langSpecifica la lingua del contenuto di un elemento
<input>Definisce un area di input per l'invio di dati e informazioni
<br>Inserisce uno spazio vuoto tra due elementi HTML.

Users

Log in to search for users

Explore

Find inspiration

JS Esercizio Concetti Gen es3

esercitazione 1

Image Comparison Slider

esercizio 01 pagina semplice

esercizio pag. 335

Taketori Monogatari

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">
<title>Convertitore di Testo</title>
<!-- Includi il foglio di stile di Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
    <h1>Convertitore di Testo</h1>
    <!-- Form per inserire la frase -->
    <form id="conversioneTestoForm">
        <div class="form-group">
            <label for="frase">Inserisci una frase:</label>
            <input type="text" class="form-control" id="frase" required>
        </div>
        <!-- Bottoni per le opzioni di conversione -->
        <div class="btn-group" role="group" aria-label="Opzioni di Conversione">
            <button type="button" class="btn btn-primary" id="maiuscoloBtn">Maiuscolo</button>
            <button type="button" class="btn btn-primary" id="minuscoloBtn">Minuscolo</button>
            <button type="button" class="btn btn-primary" id="primaMaiuscolaBtn">Prima Lettera Maiuscola</button>
        </div>
    </form>
    <!-- Div per visualizzare il risultato -->
    <div id="risultatoConversione" class="mt-3"></div>
</div>

<!-- Includi jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Includi il tuo file JavaScript -->
<script src="script.js"></script>
</body>
</html>

$(document).ready(function() {
  // Gestione del click sui bottoni di conversione
  $("#maiuscoloBtn").click(function() {
    convertiTesto("maiuscolo");
  });
  
  $("#minuscoloBtn").click(function() {
    convertiTesto("minuscolo");
  });
  
  $("#primaMaiuscolaBtn").click(function() {
    convertiTesto("primaMaiuscola");
  });
});

// Funzione per convertire il testo in base all'opzione scelta
function convertiTesto(tipoConversione) {
  let frase = $("#frase").val(); // Ottieni la frase inserita dall'utente
  let testoConvertito = ""; // Variabile per memorizzare il testo convertito
  
  // Applica la conversione in base all'opzione scelta
  switch(tipoConversione) {
    case "maiuscolo":
      testoConvertito = frase.toUpperCase(); // Converti la frase in maiuscolo
      break;
    case "minuscolo":
      testoConvertito = frase.toLowerCase(); // Converti la frase in minuscolo
      break;
    case "primaMaiuscola":
      testoConvertito = frase.replace(/\b\w/g, function(char) {
          return char.toUpperCase();
      }); // Converti la prima lettera di ogni parola in maiuscolo
      break;
    default:
      testoConvertito = "Conversione non valida"; // Messaggio per opzione non valida
  }
  
  // Visualizza il risultato della conversione nella pagina
  $("#risultatoConversione").text(testoConvertito);
}