<body>
<main>
<h1>L'interMEDIAire</h1>
<h2>Titre 2</h2>
<textarea class="js_cambridgeText" name="cambridge">Tu veux mélanger les lettres de ce textes tout en le laissant lisible ? Clique sur ok !</textarea>
<button class="js_cambridge">Ok</button>
<br><br>
<p class="text"></p>
</main>
</body>/*COULEURS*/
$noir: rgba(0,0,0,1);
$noirfonce: rgba(29,31,32,1);
$noiropaque: rgba(29,31,32,.9);
$rose: rgba(152,38,114,1);
$bleu: rgba(128,155,189,1);
$blanc: rgba(255,255,255,1);
$gris: rgba(55,55,55,1);
$gris2: rgba(255,255,255,.8);
$gris3: rgba(204,204,204,1);
$padding: 20px 10px;
/*TOUS LES ELEMENTS*/
*,*:after,*:before {
box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0px auto;
width: 640px;
background: $noir;
color: $blanc;
font-size: 1em;
padding: $padding;
}
main {
padding: $padding;
background: $noirfonce;
}
h1 {
margin: 0;
padding: 0;
font-size: 1.4em;
color: $bleu;
}
h2 {
margin-top: 15px;
width: 100%;
color: $rose;
}
h1,h2,h3 {
font-family: 'Inconsolata', monospace;
}
p {
opacity: .85;
color: $gris2;
line-height: 1.6em;
}
textarea {
width: 100%;
background: $noir;
color: $gris2;
border: 2px solid grey;
outline: none;
}
button {
margin-top: 12px;
width: 123px;
height: 40px;
background: black;
border: 2px solid white;
color: white;
cursor: pointer;
&:hover,
&:active {
background: $rose;
}
} $(document).ready(function() {
function enigmaGenerator(text,element) {
var finaltext = "",
array = text.split(' ');
for (i in array) {
var firsttLetter = array[i].slice(0, 1),
lasttLetter = array[i].slice(-1),
word = array[i].slice(1, -1),
shuffled = word.split('').sort(function(){return 0.5-Math.random()}).join('');
finaltext += firsttLetter + shuffled + lasttLetter+ ' ';
}
element.text(finaltext);
}
$('.js_cambridge').on('click', function() {
var text = $('.js_cambridgeText').val(),
element = $('.text');
enigmaGenerator(text,element);
});
});
External CSS
This Pen doesn't use any external CSS resources.