programming/simple_web_ide.html at master · user-1/programming · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/codemirror.css">
  </head>
  <body>
    <div class="container">
      <h1><a href="https://en.wikipedia.org/wiki/Integrated_development_environment">Simple Web IDE</a></h1>
      <p class="lead">
        This is a very simple web IDE that can run experiments with <a href="https://en.wikipedia.org/wiki/HTML5">HTML5</a>, <a href="https://jquery.com/">jQuery</a> and <a href="https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_-_ECMAScript_2015">ECMAScript 2015</a> aka JavaScript.
      </p>
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-6">
            <b>HTML</b>
            <textarea id="html-editor" rows="100" >
<table>
  <tr>
    <th>Name</th><th>Age</th>
  </tr>
  <tr>
    <td>Fox</td><td>39</td>
  </tr>
  <tr>
    <td>Ocean</td><td>28</td>
  </tr>
  <tr>
    <td>Sky</td><td>21</td>
  </tr>
</table>
<button id="the-button">Click</button>
            </textarea>
          </div>
          <div class="col-lg-6">
            <b>ECMAScript</b>
            <textarea id="ecmascript-editor" rows="100">
function clear(){
    // Update all cells to -
    $('td').html('-')
}
// Attach a click handler
$('#the-button').click(clear)
            </textarea>
          </div>

        </div>
        <hr>
        <button id="render" type="button" class="btn btn-secondary">Render</button>
        <hr>
        <div id="target">

        </div>
      </div>
    </div>
  </body>
  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/codemirror.js"></script>
  <script src="js/mode/javascript.js"></script>
  <script src="js/mode/xml.js"></script>
  <script src="js/mode/css.js"></script>
  <script src="js/simple_web_ide.js"></script>

</html>