Messagerie instantanée sans BDD et simple utilisateur

Structure Html

Il faudra les éléments suivants :

• Un cadre qui va contenir tous les messages saisis.
• Une zone de saisie de texte de type input
• Un cadre qui va être entre le cadre des messages et la zone de saisie de texte.
• Ce dernier cadre va jouer le rôle d'une base de données et va stocker les messages saisies au clavier.
• Sous la zone de saisie de texte, vous allez ajouter un autre cadre qui va contenir une liste de smileys dont vous trouverez la liste ci-après.

Le but du jeu

Un utilisateur va saisir un message dans la zone de texte. Lorsque l'utilisateur appui sur la touche entrée le texte situé dans la zone de saisie va passer dans la zone tampon située sous la zone d'affichage des messages. La zone de saisie est à nouveau vide et disponible pour un nouveau message.

Algorithmes

Il faut détecter sur la zone de saisie de texte qu'un utilisateur utilise le clavier. A ce moment là, vous allez indiquer dans la zone d'affichage des messages une petite phrase qui indique 'Un utilisateur rédige une message'. Quand la touche « entrée » sera détectée alors une fonction va prendre le message de la zone de saisie de texte pour le placer dans la zone tampon.

Une fonction qui tourne en boucle toutes les secondes (1000ms) va tester si un message est présent dans la zone tampon et si oui, le prendre et le mettre dans la zone des messages et effacer la zone tampon. Il faudra mettre la date (heure:minutes:secondes) devant le message pour savoir quand le message à été affiché.

Lors de la saisie de votre message, si vous cliquez sur un smiley alors le smiley arrive à la suite de votre texte en cours de saisie. Pour cela, il faut ajouter des écouteur d'événements sur les smiley qui vont déclencher une fonction qui va récupérer le code html du smiley et le mettre dans votre zone de texte.

Liste des emojis

Vous pouvez ajouter vos emojis préférés en récuperant les codes ici :

Fonctions Javascript utiles

Concaténation de texte

var texte = 'mon text 1' + '<br>' + maVaribaleQuiContientDuTexte;
texte += 'autre texte à la suite de celui contenu dans la variable "texte"';

Tester un événement en particulier

Dans ce projet vous allez devoir tester les touches du clavier.
Pour cela, il existe en Javascript une interface Event qui permet de tout savoir sur l'événement detecté par la methode addEventListener()

Pour ce qui est de détecter un événement du clavier voici quelques exemples :

document.addEventListener('keypress',testTouche);

function testTouche(){
console.log(event.code)
console.log(event.key)
console.log(event.shiftKey)
}

Quelques liens pour en savoir plus