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

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

References

heightDetermina l'altezza di un elemento HTML in pixel
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
multipart/form-dataCodifica dei caratteri di un form
<h2>Titolo di intestazione di secondo livello
widthImposta la larghezza di un elemento HTML

Users

Log in to search for users

Explore

Find inspiration

New Charter Page Test

Proposta di Matrimonio

Form per il torneo misto dis

Orologio analogico

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>Inverti Stringa</title>
<!-- Collegamento a Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
  <div class="row justify-content-center">
    <div class="col-md-6">
      <h1 class="text-center mb-4">Inverti Stringa</h1>
      <p class="text-center">Inserisci una parola nel campo sottostante e premi il pulsante "Inverti" per visualizzare la parola invertita.</p>
      <form id="invertiStringaForm" class="form-inline">
        <div class="form-group">
          <label for="frase" class="mr-2">Parola:</label>
          <input type="text" class="form-control" id="frase" name="frase">
        </div>
        <button type="submit" class="btn btn-primary ml-2">Inverti</button>
      </form>
      <div id="risultatoInversione" class="mt-3"></div>
    </div>
  </div>
</div>

<!-- Collegamento a jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Collegamento a script.js -->
<script src="script.js"></script>

</body>
</html>

$(document).ready(function() {
  // Ascoltatore per l'evento submit sul modulo
  $("#invertiStringaForm").submit(function(event) {
    // Previeni il comportamento predefinito del modulo (invio)
    event.preventDefault();

    // Ottieni la frase inserita dall'utente
    let frase = $("#frase").val();
    console.log(frase);

    // Inverti il verso di ogni parola nella frase
    let fraseInvertita = invertiVersoParole(frase);

    // Visualizza il risultato nella pagina
    let risultatoDiv = $("#risultatoInversione");
    risultatoDiv.text("La frase con il verso delle parole invertito è: " + fraseInvertita);
  });
});

// Funzione per invertire il verso di ogni parola in una frase
function invertiVersoParole(frase) {
  // Dividi la frase in parole considerando uno o più spazi vuoti come separatori
  console.log(frase);
  let parole = frase.split(/(\s+)/);
  console.log(parole);
  
  // Inverti il verso di ogni parola
  for (let i = 0; i < parole.length; i++) {
    if (parole[i] !== " ") {
      parole[i] = invertiStringa(parole[i]); // parole[0]= aerC
    }
  }

  // Unisci le parole invertite per formare la frase invertita
  return parole.join("");
}

// Funzione per invertire una stringa
function invertiStringa(parola) {
  return parola.split("").reverse().join("");
  // split= [C],[r],[e],[a]
  // reverse= [a],[e],[r],[C]
  // join= aerC
}