test

pour test

by DupontTD

HTML

<p data-secret="j">Etoile de la mort</p>
 <section class="Q1 text">
   <h1>Trouve le code secret et Détruit l'étoile noire !</h1>
   <form>
  data-secret</code>: <input class="target" type="text" size="10">
</form>

  
 </section>

CSS

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-image: url("https://photos.lci.fr/images/613/344/vador-1-680895-0@1x.jpeg");
  background-color: #cccccc;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.success, .success code{
    background: #e0f2f1;
    color: #00897b;
}

p {
  border : 1px solid;
  width : 200px;
  height : 200px;
  border-radius: 50%;
  display : flex;
  justify-content : center;
  align-items : center;
  background-color :
  black;
  color : white;
  opacity : 1;
  transition: all 2s ease-in-out;
}

.top {
  border : 1px solid;
  width : 0px;
  height : 0px;
  border-radius: 50%;
  display : flex;
  justify-content : center;
  align-items : center;
  background-color :
  red;
  color : white;
  opacity : 0;

  
}

JavaScript

let target = document.querySelector('section.Q1 .target'),

    star = document.querySelector('p');
    
star.dataset.secret = Date.now();
console.log(Date.now());
target.addEventListener('keyup', (e) => {
   e.preventDefault();
  if(target.value === star.dataset.secret ){
  star.classList.add("top");
  }
 
  
});