When I made the decision to move from Canada to Germany I did not think about the hard work and time I would have to put in to learn the language. When I made the decision, I didn’t fully understand the gravity of learning a new language in your mid twenties at all. I could have never imagined that I would be learning two new languages at once, never mind three or four.
Since my move overseas I have set out to learn as many as (but not limited to) five new languages. Yes, you read it correctly, FIVE new languages. I moved to this side of the Atlantic holding a Bachelor’s degree in Fine Arts (Emily Carr University 2014), which some of you may know, can make it a bit difficult to always find a consistent job. In Canada I had difficulty finding a job in the creative industry without any official experience. Naturally, I was nervous that I would have the same struggles in Germany. Thankfully after a couple of months I ended my search by starting as a Junior Web Designer at CAPAHILL.
Although I had dabbled in simple HTML and CSS, I did not have a full foundation in any computer languages as I did not enrol in any web design classes during my studies. I have now worked at CAPAHILL for over a year and can honestly say, coding is not as difficult as I imagined. Don’t get me wrong, there are times of frustration, exhaustion and confusion. I still often find myself wishing my computer were a person I could talk to about the problems I am having with some my JavaScript or PHP. Wouldn’t it be nice if I could just tell my computer exactly what I want it to do when I click on this specific button?
That is precisely how I felt the first time I was challenged with building my own modal. For those of you who don’t know, a modal is a box that pops up on the screen above the main content of the website. Most times, the user must first click a button that opens the modal, this modal usually displays information related to this button and then the user may close the modal. It is very common that there is also a closing button for the modal, for instance a small ‘x’ in the top right corner. I added the small ‘x’ to my modal, but I also wanted the user to be able to close the modal by clicking outside of it and essentially on top of the main content of the website.
Making this specific closing action as a very new coder was something I really had to wrap my head around. Looking back on it now, the challenge doesn’t seem so difficult – but at first, I was genuinely overwhelmed! I turned to my boss to point me in the right direction as Google-ing “how to close modal with click outside of it on screen” came up with a wide array of tutorials but I didn’t really know where to start. He advised me to look into the click action on the body of my HTML through the use of JavaScript.
Since I am such a visual person, I find thinking in JavaScript logic to be extremely challenging for me. My brain can’t immediately encompass how to build the functions that give me the result I am looking for. So first I broke it down into steps and tackled each individually. My visual brain was able to build the modal with the help of CSS and HTML pretty easily. After that I had to create the open and closing click buttons with JavaScript which I had thankfully had a bit of experience with already due to the popularity and practicality of a Hamburger Menu.
Now onto the ‘outside click’. Finally, I was able to add an event listener that could understand if the user clicked anywhere outside of the modal or the ‘x’ button. That sentence was much easier to type then it was to realize. I spent far too many hours (5+) racking my brain, digging for an answer of how to pinpoint this specific action. Thank goodness for the world wide web, the resources are endless. I read many threads of people just like me asking questions almost like mine and was ultimately able to narrow down what I needed to do to achieve my goal.
Needless to say, learning a language is hard. Learning computer languages might just be a tiny bit harder. But it’s not in the pronunciation of words, whether the i goes before the e or if the j’s are hard or soft. It’s about the logic of the language and how you can use it best to maximize your workflow. Advancing step by step, no matter how small, has helped my career begin to flourish. I will continue to improve my HTML, CSS, JavaScript, PHP and of course, German. I will also continue to remind myself that teaching yourself programming languages will always seem like a large and sometimes impossible task; but, it isn’t as hard as I imagine it to be initially if I just remember to keep it simple (stupid) and work through each problem step by step.
You can read a more in depth tutorial about my first modal here!