DEV Community

Cover image for Online Code Editor
nehagopinathan18
nehagopinathan18

Posted on

4 2

Online Code Editor

Code Editor a simple text editor that is specialized for writing software. A source code editor may be a stand-alone program or part of an integrated development environment (IDE).They make writing and reading of code easier and convenient.

As a part of Crio ##IBelieveinDoing program I tried to build an Online Code Editor just like other online code editors such as codepen, codeSandbox, W3school, JsBin, etc.

Online Code Editor

It is a code editor for HTML, CSS and JS code snippets using HTML, CSS and JQuery. The code editor’s functionality is similar to that of jsbin.

Prerequisites:

*Jquery
*VsCode
*GitHub
*HTML/CSS

jQuery:

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software.

How to add jQuery to Your Web Pages?

There are 2 ways to start using jQuery on your website -

1.Download the jQuery library from jQuery.

2.Include jQuery from a CDN (Content Delivery Network)
The jQuery library is a single JavaScript file, and you reference it with the HTML tag.

<head>
<script src="jquery-3.5.1.min.js"></script>
</head>

Basic syntax is: $(selector).action()

A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)

VSCode:

VS Code is source code editor which comes with built-in support for JavaScript, TypeScript and Node.js

GitHub

GitHub is a code hosting platform for collaboration and version control. A GitHub repository can be used to store a development project. It can contain folders and any type of files (HTML, CSS, JavaScript, Documents, Data, Images).

HTML/CSS

HTML is the standard markup language for creating Web pages.
HTML describes the structure of a Web page.

CSS stands for Cascading Style Sheets.CSS saves a lot of work. It can control the layout of multiple web pages all at once.

iframe

The #iframe tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.

About the project:

This project is a very basic and simple code editor built using basic HTML, CSS, and j Query. In this project the code entered in each section i.e HTML , CSS and JavaScript section is combined and shown as collected output using HTMl iFrame.

Challenge

To add toggle functionality to tabs using a single function was a new learning and challenge to understand. Tips and sample code example provided in the project guide was very helpful to understand and implement the logic.
Another challenge was to understand and implement the output section using iframe. This section is very deep and there were many new concepts used. Through this section I learnt about HTML iframe tag, contents() function , val() etc.

Conclusion

This is my first real programming project and it was very insightful and great learning journey through entire project creation. I was able to built a very basic view of the project. In the entire process I learnt about many new CSS style, HTMl , and JS function. Also through this project I landed up writing my first blog which I had never thought.
I am sharing my code repo and web-app link below:
Github: https://github.com/nehagopinathan18/onlineEditor
Link:https://onlinecode-editor.netlify.app/
Welcome for any suggestion and review.

A huge thanks to @Crio Team, @Som, @ajay for bring up such projects ideas for beginners and designed it is so simple that a even a non-coder like me could understand and begin from basics.

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay