tasto strano by @LeoMosc - Codewith.it

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

References

requiredRende obbligatorio un campo di input
<ul>Usato per la creazione di liste non ordinate.
widthImposta la larghezza di un elemento HTML
<h1>Titolo di intestazione di primo livello
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.
<pre>Indica una parte di testo preformattato

Users

Log in to search for users

Explore

Find inspiration

Analisi Drive Synology: RS814RP+ &

Il bambino e le stelle ma(2)

Quiz ristrutturazione

Real Word Counter JS

Random Website Demo1

prima volta css

Turni settimanali tabella

Italiano-Cinema [Container]

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

  }
}