Skip to content

CusMeDroid/live-code-editor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

54 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Live Code Editor (LCE)

This is live code editor (HTML, CSS & JS)

My goal to make a live code editor to make it easier for users who want to make page website by writing code. If you are used to creating web views by writing code, this is the place to write and display the results you write.

Security

We do not store any data for what you write on this website, other than users are visitors for traffic analytics.

Realese/publish on Website v1.0

Changelog :

  1. Minimalist UI/UX
  2. Logic sistem input to output
  3. Saving data to local dir

Screenshoot (SS) | LCE

Responsive Style

Live Code Editor

SS image raw phone/tablet/computer | LCE

Logo Quuiz App Round! Live Code Editor

Knowing Code Tag HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Website name</title>
  </head>
  <body>
    <h1>Heading</h1>
    <h2>Subheading</h2>
    <p>Paragraph</p>
    <a href="https://yourlink.com">Your Link</a>
    <button>Button</button>
    <div>Divider</div>
  </body>
</html>

If you want to learn more, you can see my guide.

Example make code on HTML

<h1 id="meexample">This output</h1>
<button onclick="meTextChange()">Click Me</button>

Example make code on CSS

button {
background: teal;
color: white;
padding: 8px 20px;
border: 0px;
border-radius: 20px;
cursor: pointer;
}

button:hover {
background: cadetblue;
}

Example make code on JavaScript

function meTextChange() {
document.getElementById('meexample').innerHTML = 'Has it changed?';
}

Result Output

Live Code Editor

Save to local dir

Live Code Editor