tasto strano by @LeoMosc - Codewith.it

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

Referenze

acceptDefinisce e filtra il formato dei file per il tag <input type=file>
<li>Inserisce voci all'interno di una lista
downloadConsente di scaricare file al click di collegamento ipertestuale.
<html>Tag primario di un documento HTML
srcIndica la provenienza di una risorsa esterna (tramite URL).
multipleConverte in lista a selezione multipla

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esercizi 05/03/2024 es9

ricetta risotto primo tentativo

Young Corporate Lawyer - Experienc

poccodio inserimenti immagineee

Review of Functions I

Esercitazione WD

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.

effect login
<!DOCTYPE html>
<html>
<body>
<h1>tasto strano</h1>
<style>.stran {
  background-color: blue;
  border: none;
  color: white;
  font-size: 20px;
  padding: 100px 100px;
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 100%,0% 100%,0% 50%, 50% 50%);
  border-radius: 3px
}</style>
<button class="stran">
  o
</button>
  </body>
</html>
<h1>copia di effect1----->
</h1>
<div class="obj">
</div>
<br>
<br>
<br>
<br>
<h1>copia di caps lock cheker</h1>
<h1>|</h1>
<h1>\/</h1>
<h1>
  Caps Lock checker
</h1>
<input id="area" onkeyup="CheckCapsLock(event)" onclick="CheckCapsLock(event)" placeholder="Scrivi qualcosa in maiuscolo">
<span id="msg" style="display:none;">CAPS LOCK ATTIVO</span>
<br>
<hr>
<p>
  Scrivi all'interno dell'area di testo con il Caps Lock attivo.
</p>
<script> 
  function CheckCapsLock(event){
    if (event.getModifierState("CapsLock")) {
      // CAPS LOCK ATTIVO
      document.getElementById("msg").style.display = "block";
    } else {
      document.getElementById("msg").style.display = "none";

    }
  }
</script>
<!--numeri primi--->
<!DOCTYPE html>
<html>
<head>
	<title>Generatore di numeri primi</title>
	<script>
		function generatePrimes() {
    // Ottieni il limite superiore inserito dall'utente
    var limitStr = document.getElementById("limit").value;
    // Verifica se il campo di input è vuoto o negativo
    if (limitStr === "" || parseInt(limitStr) <= 0) {
               return;
    }
    // Converte la stringa in un numero intero
    var limit = parseInt(limitStr);

    // Genera i numeri primi utilizzando il crivello di Eratostene
    var sieve = new Array(limit + 1);
    for (var i = 0; i < sieve.length; i++) {
        sieve[i] = true;
    }
    sieve[0] = false;
    sieve[1] = false;
    for (var i = 2; i <= Math.sqrt(limit); i++) {
        if (sieve[i]) {
            for (var j = i * i; j <= limit; j += i) {
                sieve[j] = false;
            }
        }
    }

    // Mostra i numeri primi generati
    var output = document.getElementById("output");
    output.innerHTML = "";
    for (var i = 2; i <= limit; i++) {
        if (sieve[i]) {
            output.innerHTML += i + " ";
        }
    }
}

	</script>
</head>
<body>
	<h1>Generatore di numeri primi</h1>
	<p>Inserisci il limite superiore e premi il pulsante per generare i numeri primi:</p>
	<form>
		<label for="limit">Limite:</label>
		<input type="text" id="limit" name="limit">
		<button type="button" onclick="generatePrimes()">Genera</button>
	</form>
	<p id="output">Inserisci un valore positivo per il limite</p>
</body>
</html>
<html>
  <head>
  </head>
  <body>
    <h1>Sequenza di Fibonacci
    </h1>
    <p>Inserisci il numero di termini da visualizzare:
    </p>
    <input type="number" id="num" min="1">
    <button onclick="document.getElementById('result').innerHTML = fibonacci(document.getElementById('num').value)">Calcola
    </button>
    <p id="result">
    </p>
    <style>
    </style>
    <script type="text/javascript">
      function fibonacci(n) {
        var a = 0;
        var b = 1;
        var c;
        var s = "0 ";
        for(var i = 1; i < n; i++) {
          c = a + b;
          s += c + " ";
          a = b;
          b = c;
        }
        return s;
      }
    </script>
  </body>
</html>
<h1>
  copia di riconoscitore tasti
</h1>
<h1>
  |
</h1>
<h1>
  \/
</h1>
<!DOCTYPE html>
<html>
  <head>
    <title>Riconoscitore tasti
    </title>
   </head>
  <body>
    <h1>Riconoscitore tasti
    </h1>
    <p>Premi un tasto sulla tastiera!
    </p>
    <hr/>
    <h1 id="key1">...
    </h1>
    <h1 id="key2">...
    </h1>
    
    <script type="text/javascript">
      var keylogger = document.querySelector("#key1")
      var keycode = document.querySelector("#key2");
      window.addEventListener("keypress", (e) => {
        keylogger.innerHTML = "Chiave: " + e.key;
        keycode.innerHTML = "Codice: " + e.code;
      }
                             )
    </script>
  </body>
</html>
<h1>
  copia di loader bump
</h1>
<h1>
  |
</h1>
<h1>
  \/
</h1>
<html>
  <head>
  </head>
  <body>
    <!-- Codewith.it loader -->
    <div class="loader">
    </div>
    <style>
      body{
        background-color:#FFFFFF
      }
      .loader {
        background: rgb(255,255,255);
        background: radial-gradient(circle at 0px 0px, rgb(193,195,14), #FFFC2A);
        box-shadow: inset 0 0 4px #F7FF2A;
        width:10vh;
        border-radius: 100%;
        height:10vh;
        min-width:40px;
        min-height:40px;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
        border-radius:50%;
        transition:1s;
        animation: rotate-z 2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
        transform:rotatez(45deg);
      }
      @keyframes rotate-z {
        0% {
          border-radius:50%;
          transform:scale(0.5);
          box-shadow: inset 0 -0px 10px 20px #E0FF2A, 0 0 100px #0000009B;
        }
        50% {
          border-radius:50%;
          transform:scale(1);
          box-shadow: inset 0 0 15px #201F00;
        }
        100% {
          border-radius:50%;
          transform:scale(0.5);
          box-shadow: inset 0 -0px 10px 20px #FDFF2A, 0 0 100px #FFFAB09B;
        }
      }
      @keyframes rotate-s {
        0% {
          transform: scale(1) rotateZ(0);
          border-radius:50%;
        }
        40% {
          transform: scale(0.35) rotateZ(675deg);
          border-radius:10%;
        }
        50% {
          transform: scale(0.28) rotateZ(700deg);
          border-radius:20%;
        }
        75% {
          transform: scale(0.7) rotateZ(500deg);
          border-radius:40%;
          border:none;
        }
        100% {
          border-radius:50%;
          transform: scale(1) rotateZ(360deg);
        }
      }
    </style>
    <script type="text/javascript">
    </script>
  </body>
</html>

body{
  background-color:#A3A3A3
}
/*effect1 perche sopra non funziona*/
.obj {
  background: rgb(36,35,0);
  background: -o-linear-gradient(315deg, rgb(68,65,0) 0%, rgb(119,121,9) 30%, rgb(255,251,0) 100%);
  background: linear-gradient(135deg, rgb(68,66,0) 0%, rgb(121,112,9) 30%, rgb(255,234,0) 100%);
  -webkit-box-shadow: inset 0 0 100px #fff7;
          box-shadow: inset 0 0 100px #fff7;
  width:30vh;
  border-radius:50%;
  height:30vh;
  top:0;
  bottom:0;
  left:200;
  right:0;
  margin:auto;
  -webkit-animation: rotate-s 7s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite both;
  animation: rotate-s 7s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite both;
}

@-webkit-keyframes rotate-s {
 0% {
    -webkit-transform: scale(1) rotateZ(0);
    transform: scale(1) rotateZ(0);
    border-radius:50%;
  }
  40% {
    -webkit-transform: scale(0.3) rotateZ(675deg);
    transform: scale(0.3) rotateZ(675deg);
    border-radius:0%;
box-shadow: inset 15px 15px 5px white
  }
    50% {
    -webkit-transform: scale(0.28) rotateZ(700deg);
    transform: scale(0.28) rotateZ(700deg);
    border-radius:0%;
      box-shadow: inset 0px 0px 80px #fff9;
  }
  75% {
    -webkit-transform: scale(0.7) rotateZ(500deg);
    transform: scale(0.7) rotateZ(500deg);
    border-radius:40%;
    border:none;
  }
  100% {
    border-radius:50%;
    -webkit-transform: scale(1) rotateZ(360deg);
    transform: scale(1) rotateZ(360deg);
  }
}

@keyframes rotate-s {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
    transform: scale(1) rotateZ(0);
    border-radius:50%;
  }
  40% {
    -webkit-transform: scale(0.3) rotateZ(675deg);
    transform: scale(0.3) rotateZ(675deg);
    border-radius:0%;
box-shadow: inset 15px 15px 5px white
  }
    50% {
    -webkit-transform: scale(0.28) rotateZ(700deg);
    transform: scale(0.28) rotateZ(700deg);
    border-radius:0%;
      box-shadow: inset 0px 0px 80px #fff9;
  }
  75% {
    -webkit-transform: scale(0.7) rotateZ(500deg);
    transform: scale(0.7) rotateZ(500deg);
    border-radius:40%;
    border:none;
  }
  100% {
    border-radius:50%;
    -webkit-transform: scale(1) rotateZ(360deg);
    transform: scale(1) rotateZ(360deg);
  }
}
.obj:hover{

  -webkit-animation: rotate-f 4s cubic-bezier(0.770, 0.000, 0.175, 1.000);
  animation: rotate-f 4s cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
@keyframes rotate-f {
  20% {
	border-radius:30%;
       -webkit-transform: scale(0.8) rotateZ(800deg);
    box-shadow:inset 0 0 60px #fff;
  }
  40% {
	border-radius:50%;
    -webkit-transform: scale(1) rotateZ(360deg);
  }
      100% {

  }
}