tasto strano by @LeoMosc - Codewith.it

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

References

<embed>Tag per l'incorporamento di contenuti multimediali
typeSpecifica la tipologia/funzione di un elemento.
multipleConverte in lista a selezione multipla
srcIndica la provenienza di una risorsa esterna (tramite URL).
downloadConsente di scaricare file al click di collegamento ipertestuale.
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input

Users

Log in to search for users

Explore

Find inspiration

Esercitazione 2

classifica finita

esercizio form 2

Pro Vercelli LB(2)

Round+ - social bar

esercizio 1.1-1.6

Test Gaming HTML MEME

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.

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% {

  }
}