Erstellen eines leichten Code-Editors mit Vanilla Js

Hey!??
Ich freue mich, mein neues Projekt NEXON, einen einfachen Frontend-Code-Editor, vorzustellen
Was ich mit Vanilla Js erstellt habe.

Einführung

Nexon ist ein einfacher und leichter Online-Code-Editor, mit dem Sie Frontend-Code online schreiben können,
Es bietet auch ein robustes Projektmanagement, in dem Sie Ihre Projekte speichern, bearbeiten und auch im .html-Format herunterladen können!

Merkmale

• Projektmanagement
• Live-Code-Vorschau
• Download-Funktion
• einfache und intuitive Benutzeroberfläche

Verwendete Technologien und Bibliotheken

• html
• Javascript
• litestyle.css
• FileSaver.js

Schauen Sie sich mein Projekt an

• Nexon
• GitHub

die Idee

Gestern überkam mich die Langeweile und ich beschloss, etwas zu bauen und so wurde NEXON geboren

der Prozess

Also habe ich zunächst die Benutzeroberfläche entworfen und geplant, litestyle.css zu verwenden, ein CSS-Framework, das ich vor ein paar Monaten erstellt habe, weil ich seine Fähigkeiten überprüfen wollte.
& Dann habe ich die Js dafür geschrieben
Ich habe einen einfachen Iframe und einen Textbereich verwendet, wobei der Wert des Textbereichs bei jeder Eingabe als Quelldokument des Iframes festgelegt wird.
Ich habe den lokalen Speicher zum Speichern von Benutzerdaten genutzt.

Herausforderungen gegenüberstanden

Die Implementierung der Download-Funktion erwies sich als schwierig, daher habe ich FileSaver.js verwendet, um diese Herausforderung zu meistern

gelernte Lektionen

Der Bau von NEXON war eine großartige Lernerfahrung.
Der Aufbau von NEXON hat mir geholfen, meine JAVASCRIPT-Kenntnisse zu festigen,
& Außerdem habe ich gelernt, wie wichtig es ist, modularen Code zu schreiben.

Abschluss

Der Aufbau von NEXON markiert einen bedeutenden Meilenstein auf meiner Front-End-Reise und zeigt die Leistungsfähigkeit von Vanilla JS.

Das obige ist der detaillierte Inhalt vonErstellen eines leichten Code-Editors mit Vanilla Js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!