-- Leo's gemini proxy
-- Connecting to tilde.pink:1965...
-- Connected
-- Sending request
-- Meta line: 20 text/gemini;
2023.11.20 Mon 15:56 META React interview task destroyed by VanillaJS
I was watching video by Strager [1] where he goes through ReactJS interview question (watch the video to see what was it) presumably used by Meta company in their interviews. Such video was originally uploaded by some other guy. But in both (as instructed) they write it in React. But what if you go rogue with VanillaJS?
This is what I did. I took this interview question and made it in plain HTML, CSS and JS. I was not surprise to see less code but it's just laughable how small the implementation is in comparison to what they did.
BTW not to hit on Strager. His skills are beyond me and I love his videos about big O notation [2] and perfect hash map [3]. Definitely check his stuff out [4]. Looks like his Twitch channel got banned LOL.
Anyway, here is my implementation in around 30 lines:
<!-- Inspired by: https://www.youtube.com/watch?v=pOGB0u7qI2M -->
<meta charset=utf8>
<style>
main { max-width: 32em; margin: auto; display: flex; line-height: 2.5em }
main > * { padding: 2em; display: flex; flex-direction: column; justify-content: center; align-items: center }
main ul { flex-basis: 50%; border: 1px solid; border-radius: 1em; min-height: 12em; list-style: none }
main section button { margin: 1em; padding: 1em 1.8em }
</style>
<main>
<ul id=listLeft>
<li style=order:1><input type=checkbox>1
<li style=order:2><input type=checkbox>2
<li style=order:3><input type=checkbox>3
<li style=order:4><input type=checkbox>4
</ul>
<section>
<button onclick=move(listLeft,listRight)>></button>
<button onclick=move(listRight,listLeft)><</button>
</section>
<ul id=listRight></ul>
</main>
<script>
function move(from, to) {
for (const el of from.querySelectorAll("*:checked")) {
el.checked = false
to.appendChild(el.parentElement)
}
}
</script>
Styles are irrelevant to main problem here so I compressed them a bit. This is OFC completely different approach to programming then you have in React. HTML DOM tree is the state itself that you modify directly. I used one lesser known trick with element ID attribute that becomes a global variables. There is no need to call `document.getElementById()`. The `.appendChild()` method does most of the work and besides that there is not much to it. I added visual sorting as a bonus with `order` CSS property.
I CHALLENGE YOU 🫵 TO WRITE SIMPLER VERSION!
But now I'm afraid it is time for me to go kids. Some developers are trying to calculate money with floats (x_x )
EOF
-- Response ended
-- Page fetched on Sun May 19 15:47:03 2024