<!DOCTYPE html>
<html>
<head>
<title>Colorie les lettres</title>
</head>
<body>
<input type="text" id="text-input">
<select id="color-selector1">
<option value="red">Rouge</option>
<option value="green">Vert</option>
<option value="blue">Bleu</option>
</select>
<select id="color-selector2">
<option value="red">Rouge</option>
<option value="green">Vert</option>
<option value="blue">Bleu</option>
</select>
<select id="color-selector3">
<option value="red">Rouge</option>
<option value="green">Vert</option>
<option value="blue">Bleu</option>
</select>
<button id="colorize-button">Colorie</button>
<script>
// Récupérer les éléments de la page
const textInput = document.getElementById('text-input');
const colorSelector1 = document.getElementById('color-selector1');
const colorSelector2 = document.getElementById('color-selector2');
const colorSelector3 = document.getElementById('color-selector3');
const colorizeButton = document.getElementById('colorize-button');
// Fonction pour générer une couleur aléatoire
function getRandomColor() {
const colors = [colorSelector1.value, colorSelector2.value, colorSelector3.value];
const randomIndex = Math.floor(Math.random() * colors.length);
return colors[randomIndex];
}
// Fonction pour colorier le texte
function colorizeText() {
const text = textInput.value;
const coloredText = Array.from(text).map(letter => {
const color = getRandomColor();
return `<span style="color:${color}">${letter}</span>`;
});
textInput.innerHTML = coloredText.join('');
}
// Écouter l'événement de clic sur le bouton
colorizeButton.addEventListener('click', colorizeText);
</script>
</body>
</html>