My First Project and a Dive Into Dark Mode

Hello, world! My name is Trevor, and I'm a software engineering student at Flatiron School. I just wrapped up my very first project called "Worldwide Weather" and I'm pretty excited about how the project turned out!

For this project, our requirements were to use HTML, CSS, and JavaScript to create a front end, single page app that also utilizes an external API. Additionally, we needed to incorporate at least three different types of event listeners and allow for some level of interactivity.

I decided to build a weather app, because I find myself regularly having to search for the forecast since I go outside daily, if only to take my dog for a walk. I live in San Francisco, and while people say the weather here is the same year-round, I find that it's highly dependent on how fast the wind is blowing and from which direction it's blowing from. This makes knowing the forecast a requirement before leaving the apartment to venture into the world.

I also really like to travel and learn about new places. So in order to combine the two, I wanted to utilize a second API to pull a Wikipedia summary of the location the user searched and add it to the page in addition to the forecast. To further take advantage of this, I added a "random" button that pulls from a list of over 23,000 cities so that the user can learn about a new city, or potentially use the app to suggest a random destination for their next vacation if they're feeling adventurous.

One of the features I'd like to discuss in depth is the dark mode that I created for the app. Super quick background on that - I love dark mode everything. If it's an option, I will always select dark mode. On my laptop, on my phone, every time. Back to the app...

I wanted to use one of my required event listeners on a dark mode button. Specifically, since I used Bootstrap, I added a switch at the top of my page that's really just a checkbox but looks much more slick. I had many elements on the page change when this switch was toggled, but for simplicity's sake, I'll highlight just one of them to demonstrate how I utilized the switch.

First thing's first, since I'm using Boostrap, here's what the HTML looked like for the switch itself:

      <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
      <label class="form-check-label" for="flexSwitchCheckDefault">Dark Mode</label>

In the screenshot below, you'll notice that I have a "Random location!" button:

Let's use that as our example. In HTML, here is what that button looks like:

<button id="random-btn" type="button" class="btn btn-dark">Random location!</button>

Note that the class above, btn btn-dark, is what's making the default button appear as black when the page is first loaded.

Within my JavaScript, I need to do a few things next:

• Create variables for both the Dark Mode switch and the Random button
• Add an event listener to the Dark Mode switch so that, when the switch is changed, it will toggle the Random button's class (in accordance with Bootstrap) to make the button turn from its default color, black, to white
• Ensure the functionality above works both ways (as in, the button will go back to black when the switch is toggled a second time and Dark Mode is turned "off")

So I created the variable to store the value of the Dark Mode switch:
const darkSwitch = document.getElementById("flexSwitchCheckDefault")

Then I did the same for the Random button:
const randomBtn = document.getElementById("random-btn")

There are 3 main components to the event listener I added. Here's the code, and then I'll break it down:

darkSwitch.addEventListener("change", () => {
  if (darkSwitch.checked) {
    // remove and set attributes for dark mode
    randomBtn.removeAttribute("class")
    randomBtn.setAttribute("class", "btn btn-light")
  } else {
    // set attributes back to light mode
    randomBtn.setAttribute("class", "btn btn-dark")
  }
})

The first thing I did was add an event listener to the Dark Mode switch so that it detects a change event. A change event will run a function whenever the element is changed from its current state - in this case, when the switch is toggled by the user.

One of the other things I needed to do was to ensure that the button changes back to light mode when toggled a second time. Within my function, I'll address that with an if statement.

The function begins with the if statement. First, it's checking to see if the switch has been toggled to Dark Mode (in this case, if it's "checked," since, again, my switch is actually a checkbox that's appearing as a switch).

If it has, I'm actually removing any classes associated to the randomBtn using .removeAttribute and passing in the type of attribute I"m removing ("class"). Then I'll add a new class using .setAttribute which will change the color of the button from its original dark color to a light color. First I specify that I'm adding a class ("class"), then I'm specifying what class ("btn btn-light"). Thus changing it from the dark button you see when the page loads to a white button to contrast the now-darkened-page.

*Note that in this case, I probably don't need to remove the attribute, but it was added because other, similar elements were giving me trouble.

If the switch is no longer checked, the code will run the else statement; it'll set the randomBtn back to the dark switch that you saw when the page first loaded using the same setAttribute method described above.

Extrapolate that process to the other elements of the page, and you get a functional dark mode! See the gif below to see dark mode in action, or feel free to visit Worldwide Weather's GitHub page and download the app and play around with it yourself.

Since this app was small, it wasn't too much trouble to build a functioning dark mode by myself. However, there are alternatives! Tailwind CSS, for example, has a dark mode built in. Since I decided to use Bootstrap for this project, I needed to build it myself since there's not night mode included in Bootstrap. So, depending on your needs and the size of your app, you have options on whether dark mode is something you want to tackle by yourself or if you'd prefer to use another framework that has a built-in dark mode option.

I hope you enjoyed reading about this project and dark mode in particular. Don't hesitate to reach out to me if you have any questions, and thanks so much for reading.

-Trevor