04/06/2024

A POST-DATA SEMINAR ON
DESIGN AND IMPLEMENTATION OF
ONLINE CODE EDITOR FOR HTML,CSS AND JAVASCRIPT

PRESENTED BY
ADEGBOYEGA FARUK ADISA
NDCOM/22/540

FEDERAL COLLEGE OF ANIMAL HEALTH AND

PRODUCTION TECHNOLOGY. DEPARTMENT OF COMPUTER SCIENCE
JUNE,2024
 INTRODUCTION
Code: The term "code" in the context of programming refers to the specific set of instructions
written in a programming language to perform a certain task or accomplish a particular goal.
These instructions are written by programmers to communicate with computers and tell them what
to do.[Alan, 1968].

Editor: An editor, in the context of software development and programming, refers to a tool or
program that allows users to create, edit, and manipulate text, code, or data.[Richard Stallman]
(1976).

Code Editor: Code editors are essential tools for software developers and programmers, providing
a platform to write, edit, and manage code efficiently.[ Jon Skinner ](2008)
 STATEMENT OF PROBLEM
Developers are facing challenges in finding a code editor that offers a
perfect balance between powerful features, user-friendly interface, and
customization options. There is a need for a code editor that caters to
diverse programming languages, provides robust debugging
capabilities, and supports seamless integration with version control
systems to enhance efficiency and code quality in software
development projects
 AIM AND OBJECTIVES
The aim of this project is design and implementation of an online code editor for
HTML, CSS AND JAVASCRIPT.

The objectives is to;

• Develop and deploy a web-based code editor specifically designed for
editing HTML, CSS, and JavaScript code.
• Develop a functionality that allows users to generate a unique shareable link
for their code.pen_spark
• Preview the rendered HTML code within the editor interface.
 SCOPE OF THE STUDY
The editor offer suggestions for common code elements like HTML
tags, CSS properties, or JavaScript keywords as the user types, helping them
write code faster and with fewer errors.
 RELATED WORKS
TITLE AUTHOR METHOD RESULTS CONCLUSIO
N
CODE EDITOR Ananya Shrivastava CodeR use facebook the user will be
BASED ON REACT plugin for login to redirected to the This workflow
access the application workspace page; suggests that the
more easily and project file data will be code editor is
integrate with social loaded from the user integrated with a
network to collaborate Collection and file user database and
each other. database. file storage system
to provide a
personalized and
persistent
workspace for
users
 METHODOLOGY
Language used are:
HTML(Hyper Text Markup Language): Used for giving the Design interface a
structure.
CSS (Cascading Styling Sheet): Used in styling of documents written in a
markup language
JAVASCRIPT: Used For the Web App functionality
PHP (HyperText Preprocessor): Used For the Back End
MYSQL: For Database management
XAMPP: Local host
 START

LANDING
PAGE

LOGIN

NO
CREATE NEW EXISTING
ACCOUNT USER
YES

IDE

LOGOUT

END
 SYSTEM DESIGN

Fig 1 represents the systems landing page and shows the home, join us, sign in.

Fig 1: Landing page

 Fig 2. shows and represent the SignUp of the system

Fig 2. Signup Page

Fig 3 shows the login in page of the system

Fig 3: Login Page

Fig 4 shows and represent the user dashboard

Fig 4: User Dashboard

 REFERENCES
• Ansari.A, Patil.S, Navada.A, Peshave.A, Borole.V, “Online C/C++
compiler using cloud computing”, 6002124, (2015), pg 348 – 355,
(doi:https://www.ijcsmc.com).
• Došilović.H, Mekterović.I, “Robust and Scalable Online Code
Execution System”, 9245310, (2016). pg 213-225,
(doi:https://www.ijcsmc.com).
THANKS FOR LISTENING