Comment créer une boîte de commentaires simple sur une page Web à l'aide de HTML, CSS et JavaScript

Pour obtenir des commentaires ou tout message d'un visiteur du site Web, vous avez besoin d'une boîte de commentaires sur votre page Web. Une boîte de commentaires peut être créée en utilisant n'importe quelle technologie Web, qu'elle soit simple HTML, CSS ou même JavaScript. Les trois outils HTML, CSS et JavaScript sont suffisants pour fabriquer des sites Web entièrement fonctionnels.

Nous explorerons comment créer une boîte de commentaires simple avec HTML, CSS et JavaScript dans cet article.

Html

Ouvrez votre éditeur préféré et tapez ou copiez le code ci-dessous. Enregistrez le fichier avec l'extension HTML.

Poste

Dans le code HTML ci-dessus, nous avons utilisé le lien Tag dans la balise de tête pour référencer le fichier CSS que nous utiliserons plus tard. Après cela, dans le corps Tag d'abord, nous avons lancé une boîte de saisie où un utilisateur peut taper son commentaire. Puis un bouton avec le nom du poste est initié qui sera cliqué pour entrer un commentaire. Après cela, nous avons lancé une liste non ordonnée (UL) et l'avons laissée vide car nous ajouterons un élément Li de JavaScript dans cette balise. Vous pouvez également voir que nous utilisons le identifiant attribut dans le code ci-dessus qui sera utilisé pour référencer les éléments correspondants dans le code JavaScript. La dernière balise est le scénario TAG où nous avons passé la référence du fichier JavaScript qui sera joint au fichier HTML actuel. Le nom du fichier JavaScript est code.js.

CSS

Créer un fichier avec le nom de style.CSS. Il convient de noter que vous pouvez nommer n'importe quoi sur votre fichier, mais n'oubliez pas de référence à ce nom dans la balise de lien de fichier HTML. Copiez et collez le code ci-dessous dans votre fichier CSS:

corps
Contexte: Dodgerblue linéaire-gradient (45deg, aqua, dodgerblue, deeppink) fixe;

# commentaire, #post
Border: aucun;
Border-Radius: 5px;

#post: Hover
Color en arrière-plan: Deeppink;

Dans le code CSS ci-dessus, nous avons d'abord référencé le corps Tag de HTML et décoré le fond du corps avec différentes couleurs. Puis en utilisant le identifiant Attribut de la boîte d'entrée, nous avons disparu la bordure de la boîte d'entrée et lui avons donné un rayon de 5px. Le même style a été appliqué à la poste bouton. Après cela, en utilisant le flotter propriété Nous définissons une couleur d'arrière-plan de rose profond pour le bouton de publication, ce qui signifie chaque fois qu'un utilisateur survolera poste bouton sa couleur changera en rose profond.

Javascrip

Créer un fichier javascript avec js Extension par exemple code.js. Il convient de noter que le nom du fichier doit être similaire à celui qui a été référencé dans la balise de script du fichier HTML.

Dans le code.js Fichier, d'abord, nous obtenons l'élément de bouton HTML en utilisant getElementByid () Méthode et passer le nom de l'ID donné au bouton en html. Vous pouvez également voir un écouteur d'événements attaché au poste qui est essentiellement l'élément bouton. Cet écouteur d'événements écoutera en continu et chaque fois qu'un utilisateur clique sur le poste bouton la fonction dans le Auditeur d'événements sera exécuté.

var post = document.GetElementById ("Post");
poste.addEventListener ("click", function ()
var commentboxvalue = document.GetElementById ("Box").valeur;
var li = document.CreateElement ("li");
var text = document.CreateTextNode (commentboxValue);
li.APPEDCHILD (texte);
document.GetElementByid ("non ordonné").appenchild (li);
);

Dans la fonction d'écoute d'événement, nous obtenons d'abord la valeur de la boîte d'entrée et après cela, nous avons créé un élément Li. Pour définir le texte de l'élément Li que nous avons utilisé CreateTextNode et après cela en utilisant le annexe Méthode que nous avons fourni le texte à l'élément Li. Enfin, en utilisant le annexe Méthode que nous fournissons la liste non ordonnée de l'élément Li que nous venons de créer.

Conclusion

HTML, CSS et JavaScript sont les blocs de construction d'un développeur Web et de nombreux sites Web sont développés en utilisant ces trois technologies.

Dans cet article, nous vous avons fourni le code et l'explication du code sur la façon de créer une boîte de commentaires à l'aide de HTML, CSS et JavaScript. Ce projet sera utile lorsque vous rédigerez des listes de tâches, des commentaires sur une page Web ou des formulaires de rétroaction ainsi que de joindre du texte à une page dans n'importe quel projet Web.