Challenge#1 26-01-2020

Implement document.getElementsByClass without using document.querySelector or using document.all.

Part A : Write a function getElementsByClass(className){...} such that it returns the same result.

Hint to solve: `Recursion`.

Part B: Give a solution without using recursion.

@COD4 @Wack @NoToJavaScript @Root @don-rager @Ranchu

Posting the first challenge

Reference: https://devrant.com/rants/2381253/...

@COD4 @Wack @NoToJavaScript @Root @don-rager @Ranchu

I’ll skip this one 😊 No need to reinvent something existent. Have fun people !
If not, my idea “to cheat the test” was to upload whole HTML to backend service, use HTMLAgilityPack and return results.
Only works if all elements have IDs. (Note: Could generate random temporary Ids before backend call).
Tried to find version 1.0 of jQuerry as I’m pretty sure it wasn’t using document.getElementsByClass
If not something like that (Not JavaScript just an idea at large) :

processNode(node, cl) {
let res = [];
if (node.hasClass(cl)) {
res.push(node)
}
let childs = node.getChilds();
for (let c : childs) {
//note : push accepts arrays
res.push(processNode(c,cl);
}
return res;
}

@NoToJavaScript
Interesting aprroach for loading entire html at backend 🔥
Btw your implementation won't give correct result as if you consider DOM (document object model) to be a tree then you are traversing only till the first level of the tree.

Reference to DOM
https://developer.mozilla.org/en-US...

What if the node lies somewhere deep in the tree?

Let's just post the results as fiddles so we won't clutter the thread with our shitty code.

Have fun
https://jsfiddle.net/xeytLh30/

You didn't exclude document.getElementsByTagName("*") so I used that instead of document.all

@don-rager
Noice, you solved Part A of the problem🔥
But what if recursion has not to be used here?

Can we do something with data structures Trees or Graphs?
Give it a thought 😉

@sarthaksaxena Part B ist also in the code

@don-rager +1
my bad 😅
I meant can you implement without using document.getElementsByTagName("*") because it is doing the same purpose as document.all? 🤔

@don-rager Nice one !!!!

Haven't looked at other solutions, but I guess they'll be pretty similar.

https://jsfiddle.net/m8uy4x3w/

I choose to directly go die the bin recursion as was the final Challenge, basically the idea is a BFS on a tree, starting at the "tree root" a.k.a. the body element, use an array to keep track of results and a second one for the queue. It could be changed to a DFS by using unshift instead of push for the queue operation...

@don-rager Bug Report: "fuckit" hets counted as "fuck"

Steps to reproduce:
1) Change a class, ex. `<div class="fuck that">` to `<div class="fuckit that">`,
2) Run: iterative=14, recursive=14, original=13

See: https://jsfiddle.net/52rmuxed/

Solution: Check class using: `element.classlist.contains(cName)`

@Wack Awesome 💯

Also thanks for evaluating solution as it would help in spreading your learnings 🙂

do people forget that document.getElementsByClassName exists?

@AlgoRythm the question is not for reinventing the wheel here but rather to understand how it works 🙂.
Hence implementation has to be done without using any of these methods

@sarthaksaxena no no no, it doesn't mention that one. That's the one that's specifically designed for this purpose. I feel like people forget about this one.

@Wack thanks for pointing that Out!
@AlgoRythm since when do Code challenges make sense? They're all just some simple isolated standard CS tasks or in this case the reimplementation of an existing function. The Point of a Code challenge isn't to create sth. new because the person giving the Challenge always already knows the solution. I had my 20 minutes of fun writing that knowing that it would be throwaway garbage code

@sarthaksaxena speaking of which: I hate running after clients because of unclear requirements at work enough already. Not gonna do that shit in my free time. Please write precise instructions for the next challenge (so anything with document.* was forbidden or just the functions you blacklisted?) and DON'T @ mention me when you post future challenges

@don-rager sounds like literally all of school.

That's why it's so satisfying when a challenge hasn't thought of the very fucking obvious solution. I.E. document.getElementsByClassName, which is designed to EXACTLY solve the problem at hand, and the Challenger has banned two other functions that "cheat" I suppose, but forgot the one fucking thing that was perfectly made to solve the issue. So it's my final answer.

@AlgoRythm OP wanted us to reimplement document.getElementsByClass but he forgot that that function actually is called document.getElementsByClassName. doesn't make sense to reimplement a function by calling the original. Don't be such a nitpick

@don-rager Well if I were in some sort of challenge I would say it's pretty likely that they specifically didn't mention it because they were testing if you knew it existed. Just because it's so obvious

@AlgoRythm @don-rager
Thanks for pointing will take care in future challenges 🙂

Yeah I totally get that. Which is why I won't participate in OP's future challenges. I don't want to chase OP in order to get precise instructions

@don-rager
It was just the 1st challenge. Also, the challenge is meant to teach everyone with no so well known concepts of JS and is not a code war where you are required to get every line of code right to achieve the result.
Such criticism 😟

@AlgoRythm Obviously I won't ask to implement document.getElementByClass by using document.getElementByClassName itself
isn't it stupid ?

@sarthaksaxena no, like I was saying, it seemed like the "secret" was you intentionally didn't mention getElementsByClassName to see if I knew about it or not

@AlgoRythm oh you got the question that way :P

I would avoid recursion in a non tail call optimized language:

https://2ality.com/2015/06/...

@Demolishun thanks for sharing🔥
New thing which I learned today

@sarthaksaxena Interesting ! I always saw DOM as a tree.

@NoToJavaScript Thanks for sharing your learnings 🙂
I see challenges fulfilling their purpose 😜

Commenting to check it latter