2h at flatiron bootcamp prep. I struggled mightily on one problem for 3+ hours over the past day and then I realized I had misread it! I was pushing hard on solving something far harder that what I was supposed to be doing. That is so frustrating, and I can only blame myself. This is something I hear mentioned in interview (whiteboard mostly) prep advice: Always restate the question back to the interviewer. See if you can get some assumptions from them that may make it easier, or at least more focused of a problem.

In my case I should have simply re-read the question and saved myself a lot of time.

here are the four functions I wrote.

//Define a function getFirstSelector(selector), which accepts a selector and returns the first element that matches.
function getFirstSelector(selector){
  return document.querySelector(selector)
}

//Define a function nestedTarget() that pulls a .target out of #nested (# is used for IDs in selectors — but you knew that because you read the docs, right? :) ). (Note that in index.html #nested and .target just happen to be divs. This method should work with arbitrary elements.)
function nestedTarget(target){
  return document.querySelector('#nested').querySelector('.target')
}

//Define a function increaseRankBy(n) that increases the ranks in all of the .ranked-lists by n. (You might need to make use of parseInt()
function increaseRankBy(n){
  let ulList=document.querySelectorAll('ul.ranked-list li')
  for (let i=0; i<ulList.length; i++){
    ulList[i].innerHTML = (parseInt(ulList[i].innerHTML)+n).toString();
  }
}

//Define a function deepestChild() that pulls out the most deeply nested child from div#grand-node. (Remember, you can iterate over elements and call querySelector() and querySelectorAll()on them. This is challenging to implement correctly, but not beyond your ability!)
function deepestChild() {
    
    let next = [...document.body.querySelector('div#grand-node').children]
    console.log(`next=${next}`)
    let depth=0;
    let current = next.shift() //grab one element from next
    while (current !== undefined) {
        try{
            while (current.children !== undefined){
                if (current.children.length>0) { 
                    for (let i = 0; i < current.children.length; i++) {
                        next.push(current.children[i]) 
                        console.log(`current = ${current}`)
                    }
                } else {
                    console.log('no children here!')
                    console.log(current)
                    return(current)
                }
            console.log(`now next=${next}`)
            current = next.shift()
        }
        }     
        catch(error){
            console.log(error)
        }
    // if we haven't
    return current
    }
}

deepestChild()

//what I learned. oof the last one was brutal for me. I misread it initially and was making a much broader algorithm. I should have read much more closely and double checked far more often. I wasted a ton of time writing the wrong thing.

Oh – This is also some of my first DOM manipulation ever. I don’t like thinking like this. At least right now my mind is much more in backend-world vs thinking about html tags. Time will tell if this gets to be more interesting.