Skip to content

Instantly share code, notes, and snippets.

@codepo8
Created March 14, 2024 16:08
Show Gist options
  • Save codepo8/e032b2de60e5f670ab307d7165913ca2 to your computer and use it in GitHub Desktop.
Save codepo8/e032b2de60e5f670ab307d7165913ca2 to your computer and use it in GitHub Desktop.
modernmarkupify.js
/*
<section>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<form>
<label for="tech">Add a technology</label>
<input type="text" name="tech" id="tech">
<input type="submit" value="add">
</form>
</section>
*/
const modernMarkupify = elm => {
document.querySelectorAll(elm).forEach((elm) => {
let cl = Array.from(
{length: Math.floor(Math.random() * 6) + 1},
() => Math.random().toString(36).substring(7)
);
let d = document.createElement('div');
d.innerHTML = elm.innerHTML;
if(elm.type){
d.dataset.type = elm.type;
}
elm.replaceWith(d);
d.className = cl.join(' ');
d.dataset.is = elm.nodeName.toLowerCase();
});
}
['form','label','input','ul','li','section'].forEach((elm) => {
modernMarkupify(elm);
});
/*
<div class="5ucto 95y4h8 dg2ydp z7ha6 zgsm1d" data-is="section">
<div class="5buxdw kcd5s" data-is="ul">
<div class="9reytp ueh8ec k56f2h vwm98 a9qidm nij7d" data-is="li">HTML</div>
<div class="dt4xwu 3lo7q keq5bb dxj6i dxompd 4gohji" data-is="li">CSS</div>
<div class="pj4rh1" data-is="li">JavaScript</div>
</div>
<div class="tkc30k" data-is="form">
<div class="lwgsz tywcrh 1s89p rtjn4q xqw8rk tgk24r" data-is="label">Add a technology</div>
<div data-type="text" class="dd6bbn z33ygm" data-is="input"></div>
<div data-type="submit" class="hiwmj" data-is="input"></div>
</div>
</div>
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment