Irish Whistles is a simple website, built using humble HTML, CSS, a bit of Bootstrap to smooth out the rough bits, and JavaScript. It provides users with the opportunity of reading a bit about the instrument, the irish low whistle.
Irish Whistles was a personal project I built on the side, to further test my knowledge, and to also demonstrate one of my own side hobbies.
The goal of the project was to obtain another small project to add to my portfolio. The problem I desired to solve was to build a simple website, using the above mentioned technologies, that not only showcased the instrument, but also could be viewed in dark mode.
The client side is built with simple HTML, CSS, JS, and Bootstrap. It provides one main page, that contains headings and their corresponding paragraphs and images. I desired to add dark mode to this site, and so I built that from scratch, using only simple JS to wire up a toggle button with the CSS to invert the color scheme. Also, as part of the project planning, I only wanted a menu to appear on mobile, to help guide users to the correct paragraphs when their screen size is smaller. To build the mobile menu and hide it on desktop, I used the CSS "display: none" property in conjunction with media queries.
This project proved to be fairly simple, however, I did run into a few unexpected issues and quirks. One of these was that when toggled to dark mode, on mobile, the little hamburger menu wasn't displaying correctly. I knew this was probably because I was using document.querySelector in the JS to grab the menu, and since I was using mutiple divs to build the menu, it wasn't grabbing them all correctly. I knew that if I tried to use document.querySelectorAll, it wouldn't display at all, because when you use that method it returns a node list, not an array, and it doesn't work the same. Eventually however, with the help of StackOverflow, I figured out a solution. I added a for loop, so that when using document.querySelectorAll it would toggle the class I wanted on each div in the list.
The development of the application took about the time expected, perhaps a little slower than I first imagined it to be, because of the above mentioned challenges.
Role: Lead Developer