Home > Web Front-end > JS Tutorial > body text

Creating A Lightweight Code Editor Using Vanilla Js

Mary-Kate Olsen
Release: 2024-10-04 14:23:29
Original
667 people have browsed it

Creating A Lightweight Code Editor Using Vanilla Js

Hey there!??
I am excited to share my new project,NEXON,a simple frontend code editor,
Which i built using vanilla js.

Introduction

Nexon,is a simple & lightweight online code editor, which allows you to write frontend code online,
It also provides a robust project Management,where you can save your projects,edit them & also you can download your projects in .html format!

features

  • project management
  • live code preview
  • download feature
  • simple & intuitive UI

technologies & libraries used

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

Check out my project

  • Nexon
  • GitHub

the idea

Yesterday,boredom struck & i decided to build something and thus,NEXON was born

the process

So firstly,i designed the UI,I planned to use litestyle.css,Which is a css framework I built a few months ago, because I wanted to check it's capabilities,
& Then i wrote the js,for this,
I've used a simple iframe and an textarea,where the value of the textarea is set as the srcdoc of the iframe,whenever you type.
I leveraged local storage,for storing user data.

challenges faced

Implementing,the download feature,proved to be tricky,so I used FileSaver.js to overcome this challenge

lessons learnt

Building NEXON was a great learning experience.
Building NEXON,helped me to solidify my JAVASCRIPT knowledge,
& Also I have learnt the importance of writing modular code.

Conclusion

Building NEXON,marks a significant milestone in my front end journey, showcasing the power of vanilla JS.

The above is the detailed content of Creating A Lightweight Code Editor Using Vanilla Js. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!