js script embedded rendering script example

1. design your html code (have the parent/root html ewlemnt be a div, and not the body or html, also exclude head, meta and other header related stuff.
2. design your css code
3. design the dynmiac js code for this site.
4. Compile all html, css and javascript into a single minified js file, this then can be included in any page with an HTML script tag.

(steps 1, 2 and 3)
example HTML:
<div class="app-root">
    <label for="num1">
         <span>Number 1</span>
   	<input id="num1" placeholder="0" value="0"/>
    </label>
    <label for="num2">
         <span>Number 2</span>
   	<input id="num2" placeholder="0" value="0"/>
    </label>
    <label for="calc_btn">
   	<button id="calc_btn">Calculate</button>
    </label>
    <label for="output">
         <span>Sum: </span>
   	<input id="output" placeholder="0"/>
    </label>
</div>

example CSS:
.app-root {margin: 0; padding: 0;}

example JS:
document.getElementByID('calc_btn').addEventListener('click', function(){
     let num1 = document.getElementByID('num1').value;
     let num2 = document.getElementByID('num2').value;
     let sum = num1 + num2;
     document.getElementByID('output').value = sum;
});

STEP 4 - part 1

# convert your html into js,

var app_root = document.createElement("div");
app_root.classList.add("app-root");

let label_num1 = document.createElement("label");
let label_num1_span = document.createElement("span")
label_num1_span.innerHTML = "Num 1";
let label_num1_input = document.createElement("input")
label_num1_input.id = "num1";
label_num1_input.placeholder = 0;
label_num1_input.value = 0;

label_num1.append(label_num1_span);
label_num1.append(label_num1_input);

let label_num2 = document.createElement("label");
let label_num2_span = document.createElement("span")
label_num2_span.innerHTML = "Num 2";
let label_num2_input = document.createElement("input")
label_num2_input.id = "num2";
label_num2_input.placeholder = 0;
label_num2_input.value = 0;

label_num2.append(label_num2_span);
label_num2.append(label_num2_input);


let label_btn = document.createElement("label");
let label_btn_input = document.createElement("input")
label_btn_input.id = "calc_btn";
label_btn_input.value = "Calculate";

label_btn.append(label_btn_input );


let label_output = document.createElement("label");
let label_output_span = document.createElement("span")
label_output_span.innerHTML = "Output";
let label_output_input = document.createElement("input")
label_num1_input.id = "output";
label_num1_input.placeholder = 0;
label_num1_input.value = 0;

label_num1.append(label_num1_span);
label_num1.append(label_num1_input);

app_root.append(label_num1);
app_root.append(label_num2);
app_root.append(label_btn);

document.body.append(app_root); // or you could use document.write();

STEP 4 - part 2
# convert your ccs into js

let global_root_style = document.createElement('style');
global_root_style .type = 'text/css';
global_root_style .innerHTML = '.app-root {margin: 0; padding: 0;}';
document.getElementsByTagName('head')[0].appendChild(global_root_style);

STEP 4 - part 5
# join all parts from step 4 together such that into a function like this.

(function() {
    //////////////////////////////////////////////////////////////////////////
    // First Register CSS
    //////////////////////////////////////////////////////////////////////////
    let global_root_style = document.createElement('style');
    global_root_style .type = 'text/css';
    global_root_style .innerHTML = '.app-root {margin: 0; padding: 0;}';
    document.getElementsByTagName('head')[0].appendChild(global_root_style);
    //////////////////////////////////////////////////////////////////////////
    // Then Register HTML
    //////////////////////////////////////////////////////////////////////////
    var app_root = document.createElement("div");
    app_root.classList.add("app-root");
    let label_num1 = document.createElement("label");
    let label_num1_span = document.createElement("span")
    label_num1_span.innerHTML = "Num 1";
    let label_num1_input = document.createElement("input")
    label_num1_input.id = "num1";
    label_num1_input.placeholder = 0;
    label_num1_input.value = 0;
    label_num1.append(label_num1_span);
    label_num1.append(label_num1_input);
    let label_num2 = document.createElement("label");
    let label_num2_span = document.createElement("span")
    label_num2_span.innerHTML = "Num 2";
    let label_num2_input = document.createElement("input")
    label_num2_input.id = "num2";
    label_num2_input.placeholder = 0;
    label_num2_input.value = 0;
    label_num2.append(label_num2_span);
    label_num2.append(label_num2_input);
    let label_btn = document.createElement("label");
    let label_btn_input = document.createElement("input")
    label_btn_input.id = "calc_btn";
    label_btn_input.value = "Calculate";
    label_btn_input.type="button";
    label_btn.append(label_btn_input );
    let label_output = document.createElement("label");
    let label_output_span = document.createElement("span")
    label_output_span.innerHTML = "Output";
    let label_output_input = document.createElement("input")
    label_num1_input.id = "output";
    label_num1_input.placeholder = 0;
    label_num1_input.value = 0;
    label_num1.append(label_num1_span);
    label_num1.append(label_num1_input);
    app_root.append(label_num1);
    app_root.append(label_num2);
    app_root.append(label_btn);
    document.body.append(app_root); // or you could use document.write();
    //////////////////////////////////////////////////////////////////////////
    // Then Register JS
    //////////////////////////////////////////////////////////////////////////
    document.getElementById('calc_btn').addEventListener('click', function(){
       let num1 = document.querySelector('#num1').value;
       let num2 = document.querySelector('#num2').value;
       let sum = num1 + num2;
       document.querySelector('#output').value = sum;
    });
})()

then minimize the step 4 joined output code into a script file, you can use this site https://javascript-minifier.com/

the minimized output will look like this:


//////////////////////////////////////////////////////////////////////////
// Minimized output code
//////////////////////////////////////////////////////////////////////////
!function(){let e=document.createElement("style");e.type="text/css",e.innerHTML=".app-root {margin: 0; padding: 0;}",document.getElementsByTagName("head")[0].appendChild(e);var t=document.createElement("div");t.classList.add("app-root");let n=document.createElement("label"),a=document.createElement("span");a.innerHTML="Num 1";let l=document.createElement("input");l.id="num1",l.placeholder=0,l.value=0,n.append(a),n.append(l);let c=document.createElement("label"),d=document.createElement("span");d.innerHTML="Num 2";let u=document.createElement("input");u.id="num2",u.placeholder=0,u.value=0,c.append(d),c.append(u);let p=document.createElement("label"),m=document.createElement("input");m.id="calc_btn",m.value="Calculate",m.type="button",p.append(m);document.createElement("label");document.createElement("span").innerHTML="Output";document.createElement("input");l.id="output",l.placeholder=0,l.value=0,n.append(a),n.append(l),t.append(n),t.append(c),t.append(p),document.body.append(t),document.getElementById("calc_btn").addEventListener("click",function(){let e=document.querySelector("#num1").value+document.querySelector("#num2").value;document.querySelector("#output").value=e})}();