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
_topApre collegamenti ipertestuali nell'elemento parent assoluto
_selfApre collegamenti ipertestuali nella stessa pagina del browser
<th>Definisce una cella di intestazione di una tabella HTML.
<td>Definisce una cella di una tabella HTML.
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.

Users

Log in to search for users

Explore

Find inspiration

block zoom test

Textify beta 20

tabella html(2)

no cap animazione

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