Hacker News new | ask | show | jobs
by xem 1999 days ago
My solution in 155 chars, vanilla JS

<script>document.write(`<input id=i><a${o=" onclick="}'u.${H="innerHTML"}+="<li${o}${H}=${H}.strike()>"+i.value'>+<a${o}u.${H}="">x</a><ol id=u>`)</script>

Demo: https://codepen.io/xem/pen/dypVzaw?editors=1100

Cheers :)

1 comments

Awesome What are the $ and H, is it some sort of JQuery? Can you explain :)
The "ungolfed" code looks like this:

<input id=i> <a onclick='u.innerHTML+="<li onclick=innerHTML=innerHTML.strike()>"+i.value'>+ <a onclick=u.innerHTML="">X</a> <ol id=u>

There are 4 occurrences of "innerHTML" and 3 occurrences of " onclick='" so I replaced those two substrings with H and o.

The whole HTML is rendered using an ES6 template literal (document.write(` ... `))

Everytime a ${H} or a ${o} is present in the template, the value of H or o is copied here.

It's a native feature of JS since ES6.

Besides that, the second <a> implicitly closes the first <a>, so no need to use </a>. The id's are global, that's why we can access i.value or u.innerHTML directly. In onclick, "this" (the current element) is implicit. Finally, the strikethrough is done using the (deprecated but still working) .strike() String method.