Online Code Editor

nehagopinathan18 — Wed, 24 Mar 2021 01:19:53 +0000

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.

DEV Community: nehagopinathan18

Online Code Editor