User:JAC Esquire/sandbox

This is the user sandbox of JAC Esquire. A user sandbox is a subpage of the user's user page. It serves as a testing spot and page development space for the user and is not an encyclopedia article. Create or edit your own sandbox here.

Other sandboxes: Main sandbox | Template sandbox

Finished writing a draft article? Are you ready to request review of it by an experienced editor for possible inclusion in Wikipedia? Submit your draft for review!

import http.server import json

FILE = 'frontend.html'

PORT = 8000

test_tag = {

   "tag": "div",
   "text": "Hello",
   "properties": {
       "p1": "v1",
       "p2": "v2"
   }

}

class TestHandler(http.server.SimpleHTTPRequestHandler):

   """The test example handler."""

   def do_POST(self):
       """Handle a post request by returning the square of the number."""
       print(self.headers)
       length = int(self.headers.get_all('content-length')[0])
       print(self.headers.get_all('content-length'))
       data_string = self.rfile.read(length)
       obj = json.loads(data_string)
       print(obj)

       self.send_response(200)
       self.send_header("Content-type", "text/plain")
       self.end_headers()
       self.flush_headers()

       if 'export' in obj:
           with open('index.html', 'w') as writer:
               writer.write(obj['export'])

       tag = test_tag
       msg = json.dumps(tag)
       self.wfile.write(msg.encode())

def start_server():

   """Start the server."""
   server_address = ("", PORT)
   server = http.server.HTTPServer(server_address, TestHandler)
   server.serve_forever()

start_server()

<!DOCTYPE html> <html> <head>

   <script src="index.js"></script>

</head> <body onload="onLoaded()">

   <button id="runButton">Run</button>
   <button id="exportButton">Export</button>

Howdy

   <input type="text" id="fname" name="fname" value="XX">

</body> </html>

function onLoaded() {

   console.log("on loaded")

   const ReadyState = {
      UNSENT:           0,
      OPENED:           1,
      HEADERS_RECEIVED: 2,
      LOADING:          3,
      DONE:             4
   };
   Object.freeze(ReadyState);

   document.getElementById("runButton").onclick = onRunButton;
   document.getElementById("exportButton").onclick = onExportButton;

   function onRunButton() {
       test_msg_ob = {
           Q1: "What?",
           Q2: "Who?"
       }

       xml_http_post(test_msg_ob)
   }

   function add_tag(tag){
   //Create the element using the createElement method.
       var myTag = document.createElement(tag.tag)

       if ("id" in tag)
           myTag.id = tag.id
       if ("text")
           myTag.innerText = tag.text;

       document.body.appendChild(myTag);
   }

   function xml_http_post(data) {
       let data_str = JSON.stringify(data)
       let req = new XMLHttpRequest();
       req.open("POST", "index.html", true);
       req.onreadystatechange = function() {
           if (req.readyState == ReadyState.DONE) {
               message = JSON.parse(req.responseText)
               console.log(message)
               if ("tag" in message)
                   add_tag(message)
           }
       }
       req.send(data_str);
   }

   function onExportButton() {
       exporter = {
           export: document.documentElement.outerHTML
       }
       xml_http_post(exporter)

       console.log(document.documentElement.outerHTML)
   }

}