search

CoddityTeam / movaicode

Concours mensuel du Pire Développeur de France
123 stars 10 forks source link

CSS Rotate #39

Closed yanbonnel closed 2 years ago

yanbonnel commented 3 years ago

Codepen : https://codepen.io/ybonnel/pen/YzqOmVz

Javascript : 

function magicFunction(event) {
  const revertDiv = document.querySelector('.revert')
  revertDiv.innerHTML = event.target.value.split('').map(car =>
    `<span>${car}</span>`
  ).join('')

}

window.onload = () => document.getElementById('input').addEventListener('keyup', magicFunction)

CSS : 

#input {
  margin-right: 10px;
}

.revert {
  transform: rotateY(180deg);
  display: inline-block;
}

.revert span {
  display: inline-block;
  transform: rotateY(180deg);
}

HTML : 

<html>
  <body>
  <input id="input" placeHolder="Revert me"/>

  <div class="revert">
  </div>
  </body>
</html>
yanbonnel commented 3 years ago

Je suis à peu près sûr qu'on peux se passer de JS, faut que je trouve un moyen :)

louismarslen commented 3 years ago

Cher Yan, j'ai le plaisir et l'honneur de vous annoncer que vous n'avez PAS gagné le concours MOVAI CODE. Ce qui fait de vous un EKSSELAN Codeur.

SPOILER : j'espère qu'on aura le plaisir de recevoir votre participation à l'episode 2 du MOVAI CODE (stay tuned).

Bravo toutefois pour votre belle contribution 😊

louismarslen commented 2 years ago

Je fais un peu de ménage dans les issues -> d'ailleurs go participer à l'édition 5