node-json2html
Version:
json2html - HTML templating in pure javascript
215 lines (202 loc) • 14.2 kB
HTML
<html>
<head>
<title>json2html - Assignment</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- json2html -->
<script src="../json2html.js"></script>
</head>
<body>
<div class="px-6 py-24 sm:px-6 sm:py-32 lg:px-8">
<!-- Header -->
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Working with Variable Assignment</h2>
<p class="mx-auto mt-6 max-w-xl text-lg leading-8 text-gray-600">Understand how to assign inputs directly to variables. Enter values into the inputs and click the "View" button at the bottom to see how variables were automatically assinged from the inputs.</p>
<p class="mx-auto mt-6 max-w-xl text-base leading-8 text-gray-400">Right click and 'View page source' to see how this page was rendered.</p>
</div>
<!-- Body -->
<div id="root" class="px-4 sm:px-6 lg:px-8"></div>
</div>
</div>
</body>
<script>
//In this example we'll show you how you can map inputs to variables directly, whenever the input changes the varialbe is automatically updated
let form = [
{"<>":"div","html":[
{"<>":"div","class":"space-y-12","html":[
{"<>":"div","class":"border-b border-gray-900/10 pb-12","html":[
{"<>":"h2","class":"text-lg font-semibold leading-7 text-gray-900","text":"Basic Input Types"},
{"<>":"div","class":"mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6","html":[
{"<>":"div","class":"sm:col-span-4","html":[
{"<>":"label","for":"text","class":"block text-sm font-medium leading-6 text-gray-900","text":"Input Text"},
{"<>":"div","class":"mt-2","html":[
{"<>":"div","class":"flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md","html":[
{"<>":"input","type":"text","name":"text","id":"text","autocomplete":"text","class":"block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6","placeholder":"Enter text...",">>":"input.text"}
]}
]}
]},
{"<>":"div","class":"sm:col-span-4","html":[
{"<>":"label","for":"text","class":"block text-sm font-medium leading-6 text-gray-900","text":"Input Number"},
{"<>":"div","class":"mt-2","html":[
{"<>":"div","class":"flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md","html":[
{"<>":"input","type":"number","name":"number","id":"number","class":"block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6","placeholder":"Enter number...",">>":"input.number"}
]}
]}
]},
{"<>":"div","class":"sm:col-span-4","html":[
{"<>":"label","for":"text","class":"block text-sm font-medium leading-6 text-gray-900","text":"Input Search"},
{"<>":"div","class":"mt-2","html":[
{"<>":"div","class":"flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md","html":[
{"<>":"input","type":"search","name":"search","id":"search","class":"block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6","placeholder":"Enter query...",">>":"input.search"}
]}
]}
]},
{"<>":"div","class":"col-span-full","html":[
{"<>":"label","for":"textarea","class":"block text-sm font-medium leading-6 text-gray-900","text":"Text Area"},
{"<>":"div","class":"mt-2","html":[
{"<>":"textarea","id":"textarea","name":"textarea","rows":"3","class":"block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6","placeholder":"Enter some text...",">>":"input.textarea"}
]}
]},
{"<>":"div","class":"sm:col-span-4","html":[
{"<>":"label","for":"email","class":"block text-sm font-medium leading-6 text-gray-900","text":"Input Email"},
{"<>":"div","class":"mt-2","html":[
{"<>":"input","id":"email","name":"email","type":"email","class":"block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6",">>":"input.email"}
]}
]},
{"<>":"div","class":"sm:col-span-4","html":[
{"<>":"label","for":"url","class":"block text-sm font-medium leading-6 text-gray-900","text":"Input Url"},
{"<>":"div","class":"mt-2","html":[
{"<>":"input","id":"url","name":"url","type":"url","class":"block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6",">>":"input.url"}
]}
]},
{"<>":"div","class":"sm:col-span-4","html":[
{"<>":"label","for":"tel","class":"block text-sm font-medium leading-6 text-gray-900","text":"Input Tel"},
{"<>":"div","class":"mt-2","html":[
{"<>":"input","id":"tel","name":"tel","type":"tel","class":"block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6",">>":"input.tel"}
]}
]}
]}
]}
]},
{"<>":"div","class":"space-y-12","html":[
{"<>":"div","class":"border-b border-gray-900/10 pb-12","html":[
{"<>":"h2","class":"text-lg font-semibold leading-7 text-gray-900","text":"Special Input Types"},
{"<>":"div","class":"mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6","html":[
{"<>":"div","class":"col-span-full","html":[
{"<>":"label","for":"file","class":"block text-sm font-medium leading-6 text-gray-900","text":"Input File"},
{"<>":"div","class":"mt-2 flex items-center gap-x-3","html":[
{"<>":"input","id":"file","type":"file","class":"rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50",">>":"input.file"}
]}
]},
{"<>":"div","class":"col-span-full","html":[
{"<>":"label","for":"color","class":"block text-sm font-medium leading-6 text-gray-900","text":"Input Color"},
{"<>":"div","class":"mt-2 flex items-center gap-x-3","html":[
{"<>":"input","id":"color","type":"color","class":"rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 h-12",">>":"input.color"}
]}
]}
]}
]}
]},
{"<>":"div","class":"space-y-12","html":[
{"<>":"div","class":"border-b border-gray-900/10 pb-12","html":[
{"<>":"h2","class":"text-lg font-semibold leading-7 text-gray-900","text":"Input Times"},
{"<>":"div","class":"mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6","html":[
{"<>":"div","class":"col-span-full","html":[
{"<>":"label","for":"date","class":"block text-sm font-medium leading-6 text-gray-900","text":"Input Date"},
{"<>":"div","class":"mt-2 flex items-center gap-x-3","html":[
{"<>":"input","id":"date","type":"date","class":"rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50",">>":"input.date"}
]}
]},
{"<>":"div","class":"col-span-full","html":[
{"<>":"label","for":"time","class":"block text-sm font-medium leading-6 text-gray-900","text":"Input Time"},
{"<>":"div","class":"mt-2 flex items-center gap-x-3","html":[
{"<>":"input","id":"time","type":"time","class":"rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50",">>":"input.time"}
]}
]},
{"<>":"div","class":"col-span-full","html":[
{"<>":"label","for":"month","class":"block text-sm font-medium leading-6 text-gray-900","text":"Input Month"},
{"<>":"div","class":"mt-2 flex items-center gap-x-3","html":[
{"<>":"input","id":"month","type":"month","class":"rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50",">>":"input.month"}
]}
]},
{"<>":"div","class":"col-span-full","html":[
{"<>":"label","for":"week","class":"block text-sm font-medium leading-6 text-gray-900","text":"Input Week"},
{"<>":"div","class":"mt-2 flex items-center gap-x-3","html":[
{"<>":"input","id":"week","type":"week","class":"rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50",">>":"input.week"}
]}
]},
{"<>":"div","class":"col-span-full","html":[
{"<>":"label","for":"datetime-local","class":"block text-sm font-medium leading-6 text-gray-900","text":"Input DateTime"},
{"<>":"div","class":"mt-2 flex items-center gap-x-3","html":[
{"<>":"input","id":"datetime-local","type":"datetime-local","class":"rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50",">>":"input.datetime"}
]}
]}
]}
]}
]},
{"<>":"div","class":"space-y-12","html":[
{"<>":"div","class":"border-b border-gray-900/10 pb-12","html":[
{"<>":"h2","class":"text-lg font-semibold leading-7 text-gray-900","text":"Selection Types"},
{"<>":"div","class":"mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6","html":[
{"<>":"div","class":"col-span-full","html":[
{"<>":"label","for":"select","class":"block text-sm font-medium leading-6 text-gray-900","text":"Select"},
{"<>":"div","class":"mt-2","html":[
{"<>":"select","id":"select","name":"select","autocomplete":"select","class":"block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6",">>":"input.select","html":[
{"<>":"option","text":"United States"},
{"<>":"option","text":"Canada"},
{"<>":"option","text":"Mexico"}
]}
]}
]},
{"<>":"div","class":"col-span-full","html":[
{"<>":"fieldset","html":[
{"<>":"legend","class":"text-sm font-semibold leading-6 text-gray-900","text":"Input Radio"},
{"<>":"div","class":"mt-6 space-y-6","html":[
{"<>":"div","class":"flex items-center gap-x-3","html":[
{"<>":"input","name":"radio","type":"radio","class":"h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600",">>":"input.radio.canada"},
{"<>":"label","class":"block text-sm font-medium leading-6 text-gray-900","text":"Canada"}
]},
{"<>":"div","class":"flex items-center gap-x-3","html":[
{"<>":"input","name":"radio","type":"radio","class":"h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600",">>":"input.radio.usa"},
{"<>":"label","class":"block text-sm font-medium leading-6 text-gray-900","text":"USA"}
]},
{"<>":"div","class":"flex items-center gap-x-3","html":[
{"<>":"input","name":"radio","type":"radio","class":"h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600",">>":"input.radio.mexico"},
{"<>":"label","class":"block text-sm font-medium leading-6 text-gray-900","text":"Mexico"}
]}
]}
]}
]},
{"<>":"div","class":"col-span-full","html":[
{"<>":"fieldset","html":[
{"<>":"legend","class":"text-sm font-semibold leading-6 text-gray-900","text":"Input Checkbox"},
{"<>":"div","class":"mt-6 space-y-6","html":[
{"<>":"div","class":"flex items-center gap-x-3","html":[
{"<>":"input","name":"checkbox","type":"checkbox","class":"h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600",">>":"input.checkbox.canada"},
{"<>":"label","class":"block text-sm font-medium leading-6 text-gray-900","text":"Canada"}
]},
{"<>":"div","class":"flex items-center gap-x-3","html":[
{"<>":"input","name":"checkbox","type":"checkbox","class":"h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600",">>":"input.checkbox.usa"},
{"<>":"label","class":"block text-sm font-medium leading-6 text-gray-900","text":"USA"}
]},
{"<>":"div","class":"flex items-center gap-x-3","html":[
{"<>":"input","name":"checkbox","type":"checkbox","class":"h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600",">>":"input.checkbox.mexico"},
{"<>":"label","class":"block text-sm font-medium leading-6 text-gray-900","text":"Mexico"}
]}
]}
]}
]}
]}
]}
]},
{"<>":"div","class":"mt-6 flex items-center justify-end gap-x-6","html":[
{"<>":"button","type":"submit","class":"rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600","text":"View Input Variables","onclick":function(e){
alert(JSON.stringify(e.obj));
}}
]}
]}
];
document.getElementById("root").json2html({"input":{}},form);
</script>
</html>