Thoughts on Overthinking

I tend to overcomplicate things. I mean I am not the biggest overcomplicator. For example, If I am making dinner I am not going to rediscover fire and build spit from twigs. But I am going to find something delicious to cook and have dinner ready by 8:30 PM. It’s my nature to find ways to challenge myself.

Whether it’s cooking dinner or manipulating the DOM One of the good things about being an overcomplicator is that I am always challenging myself to find new ways of doing things. My general curiosity and hunger for learning make me an adept problem solver and it helps me when I am in unfamiliar situations. However, being an overthinker is not always a good thing.

Recently, I was in an interview and I overcomplicated a simple coding challenge and I ran out of time and did not finish the challenge that I should have solved without a problem.

Here is the simple challenge that I bombed

Task one:

Create a title and add your name the date.

Yesh! Looking back that is so simple and I WAY overcomplicated it. All I needed to do was create an HTML tag.

<title> Patrick Candlin 1/16/2019 </title>

Instead, I created a function, with vanilla javascript, that took a name as an argument created an H1 tag (which was not following the instructions) and dynamically created the date and inputs the date and name into the newly created and then appended itself into the DOM. To do this I had to figure out how to dynamically create the date. Which ended up eating a lot of time. There are many ways I could have done this better but I was letting the pressure of the situation get to me.

Task two:

Create a link that looks like a button that has the text 'impress me' and make its background color green.

Ouch! Thinking back I made it way too hard and spent more time then I needed to. Again all I needed to do was make an ‘a’ tag and style it to look like a button.

HTML

<a class="button">impress me</a>

CSS

a.button {
    padding: 1rem;
    background-color: green;
    color: white;
    text-decoration: none;
}

Instead, I created another js function that took a phrase as an argument and appended an ‘a’ tag with that phrase to the DOM. To make it look like a button my function appended the button inside the link tag (big sigh).

Task Three:

Go to the following link https://jsonplaceholder.typicode.com/users' and get the first ten users when the "impress me" button is clicked and display those users.

HTML

<ul class="users">
</ul>

JS

const button = document.body.querySelector(".button")
const usersContainer = document.body.querySelector(".users")
button.addEventListener('click', (event) => {
   event.preventDefault()
   return getUsers()
})
function getUsers(){
    return  fetch("https://jsonplaceholder.typicode.com/users")
    .then(response => response.json())
    .then(populateUsers)
}
function populateUsers(users){
    users.map(user => {
        if(usersContainer.children.length < 10){
            let userCard = document.createElement('li')
            userCard.textContent = user.name
            usersContainer.appendChild(userCard)
        }
    })
}

Well, I ran out of time because my plan was too contrived and I didn’t finish the challenge.

Conclusion:

I took the test on a Windows machine and it was the first time I had ever tried to program anything in a Windows workflow. I have spent a lot of time configuring my Mac workflow, I underestimated how much of a factor that would play on my speed which I didn’t factor into my plan. My plan was way too complicated and I was trying too hard to show that I knew javascript well. I didn’t even complete the challenge in the time allotted. Going forward in high-pressure situations I will focus on doing things the simplest way possible. Some lessons you have to learn the hard way!

What I learned:

1. Clarify the question and don’t make assumptions.
2. Ask if you can use your personal machine.
3. Don’t try new things in the interview setting.

Thanks for reading!