Maison > interface Web > js tutoriel > Création d'un éditeur de code léger à l'aide de Vanilla Js

Création d'un éditeur de code léger à l'aide de Vanilla Js

Mary-Kate Olsen
Libérer: 2024-10-04 14:23:29
original
810 Les gens l'ont consulté

Creating A Lightweight Code Editor Using Vanilla Js

Salut !??
Je suis ravi de partager mon nouveau projet, NEXON, un simple éditeur de code frontend,
Que j'ai construit en utilisant vanilla js.

Introduction

Nexon, est un éditeur de code en ligne simple et léger, qui vous permet d'écrire du code frontend en ligne,
Il fournit également une gestion de projet robuste, où vous pouvez enregistrer vos projets, les modifier et vous pouvez également télécharger vos projets au format .html !

caractéristiques

  • gestion de projet
  • Aperçu du code en direct
  • fonctionnalité de téléchargement
  • interface utilisateur simple et intuitive

technologies et bibliothèques utilisées

  • html
  • javascript
  • litestyle.css
  • FileSaver.js

Découvrez mon projet

  • Nexon
  • GitHub

l'idée

Hier, l'ennui m'a frappé et j'ai décidé de construire quelque chose et ainsi, NEXON est né

le processus

Donc, tout d'abord, j'ai conçu l'interface utilisateur, j'avais prévu d'utiliser litestyle.css, qui est un framework CSS que j'ai construit il y a quelques mois, parce que je voulais vérifier ses capacités,
& Puis j'ai écrit le js, pour ça,
J'ai utilisé une simple iframe et une textarea, où la valeur de la textarea est définie comme srcdoc de l'iframe, chaque fois que vous tapez.
J'ai exploité le stockage local pour stocker les données utilisateur.

défis rencontrés

La mise en œuvre de la fonctionnalité de téléchargement s'est avérée délicate, j'ai donc utilisé FileSaver.js pour surmonter ce défi

leçons apprises

Construire NEXON a été une formidable expérience d'apprentissage.
Construire NEXON, m'a aidé à consolider mes connaissances JAVASCRIPT,
& J'ai également appris l'importance d'écrire du code modulaire.

Conclusion

Construire NEXON, marque une étape importante dans mon parcours front-end, mettant en valeur la puissance de Vanilla JS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal