Forem: Trevor Vardeman

React-Archer: Drawing Arrows Between DOM Elements

Trevor Vardeman — Mon, 13 Mar 2023 09:42:59 +0000

For my latest project, I built a trip-tracking app called Trip Tracker. While coming up with the idea of the app, I used Miro to draw out concepts of what the UI would look like.

Since I'm allowing users to create trips, the trips themselves would naturally have many cities within them. I wanted a way to graphically show the user where their trip was starting, all the cities they're visiting in order, and where their trips ends. I drew this up with arrows in Miro to show the flow of the trip.

But how would I code this? Or would I have to insert images to show these arrows? It turns out, there was a nifty little package out there waiting to be installed called react-archer.

react-archer lets you easily create arrows between DOM elements. Perfect! Let's dive in to how I was able to make this work.

First, I installed the package.
npm install react-archer --save

Next, I needed to import ArcherContainer and ArcherElement:
import { ArcherContainer, ArcherElement } from "react-archer"

ArcherContainer is what it sounds like -- a container for all of the ArcherElements. ArcherElements are the DOM elements that the arrows will start from and point to. All of your actual DOM elements will be inside of an ArcherElement.

Let's add an ArcherContainer to our app:



    return (
      <ArcherContainer>
      </ArcherContainer>
    )

Let's add two test elements as well. First, you'll need to open and close each ArcherElement, and then you need to give each ArcherElement some content. For the sake of simplicity, let's just use a <p> tag for each. Here's how it should look now:



    return (
      <ArcherContainer>
        <ArcherElement>
          <p>Test 1</p>
        </ArcherElement>
        <ArcherElement>
          <p>Test 2</p>
        </ArcherElement>
      </ArcherContainer>
    )

Now it's time to add attributes that will create the lines and arrows for us.

First, each ArcherElement needs an ID. IDs are used as the destination for an arrow.



    return (
      <ArcherContainer>
        <ArcherElement id="test1">
          <p>Test 1</p>
        </ArcherElement>
        <ArcherElement id="test2">
          <p>Test 2</p>
        </ArcherElement>
      </ArcherContainer>
    )

Next, let's add a "relations" attribute to the first ArcherElement. This is what will create our line and arrow. Here's what the code looks like:



  return (
    <ArcherContainer>
      <ArcherElement
        id="test1"
        relations={[
          {
            targetId: "test2",
            targetAnchor: "top",
            sourceAnchor: "bottom",
            style: { strokeColor: "black", strokeWidth: 1 }
          }
        ]}
      >
        <p>Test 1</p>
      </ArcherElement>
      <ArcherElement id="test2">
        <p>Test 2</p>
      </ArcherElement>
    </ArcherContainer>
  )

Let's break down some of those attributes:

targetId: This is the ID of the ArcherElement that the arrow will point to
targetAnchor: This tells the arrow where on the target ArcherElement to point to
sourceAnchor: This is the side of the source ArcherElement the line will begin from
strokeColor: Controls the color of the arrow
strokeWidth: Controls how wide the arrow is

Those attributes are highly customizable, and there are many more that are not utilized in this example.

After centering the code with some CSS, it looks like this:

Here's the full code from my example:



import Stack from 'react-bootstrap/Stack'
import { ArcherContainer, ArcherElement } from "react-archer"

function ArcherTest() {
  return (
    <Stack className="centered">
      <ArcherContainer>
        <ArcherElement
          id="test1"
          relations={[
            {
              targetId: "test2",
              targetAnchor: "top",
              sourceAnchor: "bottom",
              style: { strokeColor: "black", strokeWidth: 1 }
            }
          ]}
        >
          <p>Test 1</p>
        </ArcherElement>
        <ArcherElement id="test2">
          <p>Test 2</p>
        </ArcherElement>
      </ArcherContainer>
    </Stack>
  )
}

export default ArcherTest

For my project, a user can create many cities, and I didn't limit them. They could have just 2, but they could also have 10. Not knowing how many ArcherElements to create, I had to create each ArcherElement by mapping an array of objects and setting each of their IDs/targetIDs dynamically. That result ended up looking like this:

Please go check out the react-archer documentation on the GitHub page to see all of the possibilities and get some inspiration on how to use this spectacular package!

react-archer made my project look so much better and it was extremely easy to use, I'm so happy I found it.

Happy coding!

Rails - A Hidden Gem: Seed Dump

Trevor Vardeman — Thu, 20 Oct 2022 05:01:37 +0000

Intro

Phases 3 and 4 at Flatiron School's software engineering program are based on Ruby and Rails, respectively. During the past couple of phases, we've learned a lot about gems and how beneficial they can be.

A Ruby gem is basically a small program you can insert into the application you're creating in order to make your life easier. For example, installing the BCrypt gem allows you to use incredible password encryption nearly effortlessly. If you were to build this yourself, it would be its own, large program. Since it's a gem, we don't need to reinvent the wheel, we can install the gem and use the program effectively with a few lines of code.

One of the gems that was covered in class is Faker. Faker is fantastic because it allows you to create and show off fake records with real-looking data. It's helpful for both practical testing, but also for taking screenshots and/or video for your amazing readme or demo.

Seed Dump

I want to highlight another gem I found while working on my phase 4 project, which I had previously never heard of. This gem is called Seed Dump.

What makes Seed Dump different from Faker is that, instead of using the gem to create fictional data, which has its place, Seed Dump allows you to boost your seed file with some of the data you've already been testing on.

In my most recent project, I have full CRUD on one object, CRD on two objects, and CR on another. Since there are a lot of interactions that take place between these objects, testing is actually easiest while using my own app. It's easiest to test while actually creating a new user, a new post, viewing a community, deleting a comment, etc.

During the testing of this functionality, you're adding data to your database. Rather than resetting your database, what if you utilized the information you entered? What if this is how you could build your seed file, rather than creating it from scratch? Or what if you do some testing and just want to add a couple of live examples to your seed file? Enter Seed Dump.

Installation

Installing Seed Dump is as easy as installing other gems you're used to. Simply add it to your Gemfile by adding:
gem 'seed_dump'

and then running bundle install.

You may also install it on the CLI by typing:
gem install seed_dump

Utilization

There are a few things you can do with Seed Dump that I'll discuss here. Most notably, you can dump your entire current database into the seed file, you can add the current database entries to your existing seed file, you can dump the existing database to a separate file, you can exclude certain tables, and you can limit the results.

Let's look at a just a few examples of how easy Seed Dump is to use.

Dumping the Current DB to Seed File

To use the following commands, ensure your server is currently shut down.

If you simply want to dump the entire existing database directly into your db/seeds.rb file, you can run the following command:

rake db:seed:dump

Note: If your seed file already has data in it, it will be overwritten. Only use this option if your db/seeds.rb file is completely empty.

Adding the Current DB to Seed File

This is my favorite use case for Seed Dump. Generally speaking, when I start building, I'll have to create a few custom entries in db/seeds.rb just to get started. However, after setting up a few models, I'm ready to do testing on a larger scale, and the new database entries come fast. This is where adding more entries to your seed file becomes helpful.

If you've already created the entries, and you know you'll need to reset the database for x or y reason(s), why not incorporate the current test database you've created directly to your seed file? I found this incredibly useful. In order to do so, you simply run:
rake db:seed:dump APPEND=true

Note: Seed Dump will create objects alphabetically, so if you have objects that use foreign keys, you may need to rearrange the order in which objects are being created.

Saving Current DB to Separate File

If you'd prefer to save the database you've been testing to a separate seed file instead of db/seeds.rb, there's a short two step process for you to follow.

First, you need to create a new file that you want to save the existing database to. For example, if I wanted to save my database to create db/second-db.rb, I just need to create the second-db.rb file within the db folder. After that, I just need to run the following command to dumb the entire existing database into that file:

rake db:seed:dump FILE=db/second-db.rb

Voila, the current database has been saved into a separate file.

Conclusion

When I was working on this project, I came across this gem naturally. I had the feeling that some other coder out there in the world had the same idea as I had -- to easily create a seed file based on the existing database. Sure enough, after a quick Google search, I found Seed Dump. I immediately installed and utilized it myself.

There are multiple ways to create a good seed file, including both Faker and Seed Dump. For me, Seed Dump was too easy not to use, and worked so well for my latest project. Now that I'm about to be working on my capstone project, I can guarantee you that Seed Dump will be installed early on to help me with my testing. I hope it helps you too.

Happy coding.

Intro to Regular Expressions

Trevor Vardeman — Mon, 08 Aug 2022 06:24:00 +0000

What are Regular Expressions?

Regular Expressions, or RegEx for short, are expressions written to find specific patterns. They can be used for things such as validation (think email address validation) or for searching for specific patterns in text.

Why RegEx?

When I was going through phase 3, learning Ruby at Flatiron School, we had a very small section based on RegEx. At first, it was really hard to wrap my mind around. The syntax, of course, is not near as clean as reading something like Ruby. It was something I felt like I could spend a week on. However, there are a lot of use cases for RegEx, and it can be a powerful tool when wielded wisely.

Interestingly, shortly after I read about RegEx for the first time at Flatiron, it actually came in handy at work. The first example I saw of it being utilized was when watching one of our engineers search for something specific in a large block of code. He used RegEx to find exactly what he was looking for, and he found it quickly.

The second example was actually something I was able to use personally. I work in Sales Operations, and we recently acquired a piece of software that we can use to help de-dupe our Salesforce instance. In order to do so, I had to set up the rules that would be used in order to match two Leads as being duplicates.

The problem I was running into was that we wouldn't always collect clean data on our Leads. For example, if someone was to go through our Lead-capturing flow on our website, we ask them for a lot of data in a step-by-step manner, but we don't ask for their name or company name up front. We gather the important data first, such as data that qualifies them to do business with us and their email address.

The result is that a lot of Leads come in with a first name, last name, and/or company name of "unknown." When trying to deduplicate these Leads, we'd like to be able to fuzzy match first names, last names, and company names, but we can't effectively do that if a good chunk of our database has "unknown" in those fields.

Enter RegEx.

In our deduplication tool, we have the option of using RegEx as a field in our matching rules which are used to match two Leads as duplicates. We don't have the option to simply exclude specific strings in the first name, last name, or company name fields, but we do have the ability to use a regular expression. With RegEx, I can very easily weed out any first names, last names, or company names that include "unknown" or "test." The code I used to do this is as follows:
/\b(?!\bunknown|Unknown|test|Test\b)\w+\b/

What this does is actually removes any Leads from being matched as duplicates that contain the words "unknown," "Unknown," "test," and "Test." You can see this in effect by using Rubular:

What you see in this paragraph is that the only words the are excluded are "unknown," "Unknown," "test," and "Test," everything else is selected. Note that there are instances of "test" and "unknown" that are attached to other words that are not excluded, which is by design. We only want to remove exact matches.

Let's break down this code.

RegEx always starts and ends with slashes, which is why you see those at the beginning and end:

Next, the "\b" begins the word boundary. It says that everything that follows is a word of its own, until the final "\b" that ends the boundary. Note that there's a set of inner boundaries inside of this one.

Next, you have the opening and closing parentheses. These are saying that anything contained within are supposed to be evaluated together.

After that, you have the "?!" which is a look-forward statement saying that what follows is not true. It makes the rest of the statement that follows flip from truthy to falsey.

Next, you have the aforementioned inner word boundary. This is saying that the word that follows is the word (or words, in this case) that we're searching for. It's closed out after all the words in our or statement.

After that are the words that we're actually searching. The first is "unknown," but you may notice a familiar operator after that which is the vertical pipe. In RegEx, it means the same thing as it does in a lot of coding languages, it's an "or" statement. So the following line is saying that we're searching for "unknown," "Unknown," "test," or "Test."

The final piece is the "\w+" near the end of the expression. This matches one or more word or numerical characters, such as a-z, A-Z, 0-9, and _.

There's an excellent RegEx quick reference guide that can help you navigate RegEx on the Rubular site, here's what it looks like:

Conclusion

This rather confusing-looking piece of code has a lot of power behind it. There are two things I learned that require a high level of knowledge and precision during phase 3 at Flatiron School. The first is RegEx which we covered a bit of today, and the second is scraping using Nokogiri. More on that second topic another day. I hope you enjoyed this small tutorial about RegEx!

[React] Passing State to a Sister Component

Trevor Vardeman — Thu, 09 Jun 2022 06:14:03 +0000

Intro

There are times in React when you'll need to use state between two sister components. You cannot directly pass state between those two sister components, so how can you use state between them? The answer is you need to host the state on the shared parent component. I'll illustrate this while using a controlled form!

Getting Started

First thing's first, you'll need to set up a React app. This is easiest by creating a new directory in your terminal, then by using these commands:

npx create-react-app my-app
cd my-app
npm start

Open the code in your code editor of choice. You can go ahead and open the App component in the "src" folder, and remove all the code inside the return() except for the top level div, so it looks like this:

import './App.css'

function App() {
return (
    <div className="App">
    </div>
  );
}

export default App;

Adding Components

Let's go ahead and create a couple of sister components. Create two new files called "Form.js" and "Greeting.js." If you're using Visual Studio Code, in each of them, use the keyboard shortcut "rfce" which creates some boilerplate code in the format of a React functional export component.

Those two components should now look like this:

function Form({ updateName }) {
  return (
    <div>test</div>
  )
}

export default Form

function Greeting({ name }) {
  return (
    <div>test</div>
  )
}

export default Greeting

(Small note that I removed the import React from 'react' line from these components as it's not necessary on components other than App.)

Now, let's go back to our App component and import the two sister components and add them to our page. After doing so, your App component will look like this:

import './App.css'
import Form from './Form'
import Greeting from './Greeting'

function App() {
return (
    <div className="App">
      <Form />
      <Greeting />
    </div>
  );
}

export default App;

Now that we have both components appearing on the DOM, let's focus on one at a time.

Form.js

Let's create a controlled form in which we ask a user to type in their name so that we can use their name in our Greeting component in order to say hi to them!

Within the div, we can create a simple form:

      <form>
        <label>Enter your name: </label>
        <input type="text"></input>
      </form>

So now, on the DOM, we can see a simple form in which a user can type. But how do we store the value of whatever the user is typing as it changes? As I mentioned previously, we want this to be a controlled form.

In order for the form to be controlled, the value of the form needs to be equal to the value we're storing in state. Basically, as the user types, state will update along with what they're typing, and the value of the input itself is the state variable, not technically what the user has typed.

Since we know we want to pass this state the Form's sister component, Greeting, we need to store state in their collective parent component, App.

App.js

Back in our App component, let's import state by adding this line at the top:

import { useState } from 'react'

Now, inside the functional component, let's create our state variable:

const [name, setName] = useState("")

Now we need to set up a function in order to set the state. We're going to pass this function, along with the variable we declared, down to our Form component as props. Every time the user types something in the form, we'll call the function (onChange). The function will simply set state to be equal to the change event's target.value:

  function updateName(input) {
    setName(input.target.value)
  }

Now, pass the function as a prop to the Form component along with the variable itself:

<Form name={name} updateName={updateName} />

While we're here, let's go ahead and pass down our name variable to our Greeting component since we're know we're going to make use of it:

<Greeting name={name} />

Back in the Form component, make sure to accept the props:

function Form({ name, updateName }) {

Next, add the onChange event and set the value to be equal to our variable. These are the final steps to ensure this is a controlled form:

<input type="text" value={name} onChange={updateName}></input>

The final Form component should look like this:

function Form({ name, updateName }) {
  return (
    <div>
      <form>
        <label>Enter your name: </label>
        <input type="text" value={name} onChange={updateName}></input>
      </form>
    </div>
  )
}

export default Form

We're now done with both our Form and App components!

Greeting.js

Now, we have our Form component all set up, and with every keystroke, the name state field is being saved in state on our App component. Let's put that on the DOM so we can greet our user! We already passed down the name field as a prop to our Greeting component, so we need to make sure to accept it as a prop:

function Greeting({ name }) {

Next, let's just add a paragraph with a short greeting with our user's name! The component should now look like this:

function Greeting({ name }) {
  return (
    <div>
      <p>{`Hello, ${name}!`}</p>
    </div>
  )
}

export default Greeting

Great, we've got the greeting on the DOM! You may notice, however, that before the user types anything, the greeting reads, "Hello, !" This is obviously less than ideal, so let's add a ternary operator to clean this up:

{name ? <p>{Hello, ${name}!}</p> : <p>Hello!</p>}

Now, when the name field is truthy, or, has a value, it will show the code you see between the question mark and the colon, which will include the user's name. When name is falsey, or has no value, we'll just show the user, "Hello!"

Conclusion

Nice and tidy. Here's what the final product should look like:

So in this post, we actually learned how to send state to a sister component, how to create a controlled form, and how to use the ternary operator. I hope you can use some of these in your future projects! Thanks for reading.

-Trevor

Creating a Simple Counter Using HTML/JavaScript

Trevor Vardeman — Fri, 15 Apr 2022 05:42:24 +0000

The Intro

I recently completed my first project at Flatiron School, which I'm very proud of! Feel free to read more about there here. During the review of my project, I was given a live coding task. The task was simple: to add a counter on the DOM that would add 1 to a number when a button was clicked.

Sounds easy, right? Especially after having completed a fairly large project. Well, unfortunately, it gave me a litle trouble. I knew what pieces of the solution were fairly quickly, but putting them together on-the-spot proved challenging.

After feeling just a little down with how I performed on this exercise, I realized how important it was to have been given such a task. While the task itself was simple, there was more to the challenge than meets the eye.

It was the first time I had to really explain my thought process out loud to someone that I didn't know, and it was also the first time I had to perform a coding task in front of someone I had never met before.

After graduating from Flatiron, I'm certainly going to have to code in front of people while explaining my thought process - it's going to happen in every programming interview. This was really my first foray into what that would potentially feel like, even though this task was far simpler than any job interview.

It was great practice, and practice makes perfect.

So, today, let's talk about the task I was given and how to solve it. Hopefully there's someone out there who will stumble across this post in a time of need!

The Task

Here were the deliverables:

Add a button to the web page
Add a counter on the page
When the button is clicked, add 1 to the counter

I was allowed to hard-code the number 0 to begin the exercise.

The Pieces

So, how can we break this down in terms of steps we need to take to solve the problem? Here is how I broke it down:

We need to create the button in HTML
We also need to create a place for the counter in HTML
We'll add an event listener to connect the JavaScript we're going to write to the HTML
We will need a JS click event to trigger the counter
When clicked, we'll update the counter

The HTML

In our index.html file, we'll start by doing the following, which is far more detail regarding the first 2 items above.

Within our HTML's body, create a div to house everything
Create a button
Write some text to describe our number
Create a span with an ID of "counter" so that we can store it as a variable in our index.js file
Include our starting number of 0

NOTE: I'm not covering it here for simplicity, but in your HTML file, don't forget your boilerplate HTML and to point to your JavaScript file!

Here's what the HTML steps above look like:

    <div>
      <button type="button">Click Me!</button>
      Number of Clicks: <span id="counter">0</span>
    </div>

The JavaScript

Next we need to add the JavaScript portion. This consists of steps 2 - 6 in the "The Pieces" section above. In more detail, this is what we'll do:

Create a variable for the HTML button
Create a variable for the HTML counter
Add an event listener to be able to track when the button is clicked, and then to use a callback function to...
Add 1 to the existing number

First, we need to store a reference to the button from our HTML in JavaScript. I used querySelector to find the button by its "type" attribute. Then I added an event listener to my button variable:

const button = document.querySelector("button")

Next, we need to store the counter as a variable so that we can increment it when it's clicked. Instead of using querySelector, let's store this variable by using getElementById:

const counter = document.getElementById("counter")

Next, I added an event listener to that button:

button.addEventListener("click", () => clickHandler())

When the button is clicked, I'm calling a callback function titled clickHandler which will house the code that tells the program what action to take when the button is clicked. This is the part where I got tripped up in the live-coding exercise. I find that very often, I accidentally overcomplicate things.

The first thing I tried to do was take the number within the counter, using the innerHTML property, and add 1 to it, which looked like this:

function clickHandler() {
  counter.innerHTML + 1
  console.log(counter)
}

The problem here is that the number that I'm trying to increment, 0, isn't actually an integer (number) at all. I found this out by using the typeof operator:

console.log(typeof counter.innerHTML)

Turns out, that the number 0 I had added to HTML was actually a string. So when trying to add 1 to it, it wasn't working because the data types didn't match.

The solution is more elegant because it solves two problems at once. It will use the classic increment operator (++), and at the same time, will convert the string of "0" to an integer, alleviating our data inconsistency! The new function will look like this:

function clickHandler() {
  counter.innerHTML++
}

Try it out for yourself!

While we're here, though, let's look at how we can simplify this just a little bit further.

The Refactor

We can refactor this 3 line function into a single-line arrow function:

const clickHandler = () => counter.innerHTML++

Excellent! This still works and trims our code while not making it any harder to read. But can we go even further?

Of course we can.

Remember the event listener we created that looked like this?

button.addEventListener("click", () => clickHandler())

Well, since we were able to shorten our function down to one line of code, we can just go ahead and execute the function's action directly within the event listener itself! Here's what it looks like when you edit the event listener to perform this action immediately:

button.addEventListener("click", () => counter.innerHTML++)

The Final Product

Now we've successfully created a functional counter button that our users can interact with on the DOM in about 10 lines of code including both HTML and JavaScript (minus the boilerplate)!

To recap what the final code looks like altogether, see below!

HTML body:

  <body>
    <div>
      <button type="button">Click Me!</button>
      Number of Clicks: <span id="counter">0</span>
    </div>
    <script src="./index.js"></script>
  </body>

JavaScript:

const button = document.querySelector("button")
const counter = document.getElementById("counter")
button.addEventListener("click", () => counter.innerHTML++)

Gif Demonstration:

I hope you found this post helpful in your coding journey, feel free to reach out if you have any questions or comments. :)

-Trevor

My First Project and a Dive Into Dark Mode

Trevor Vardeman — Tue, 05 Apr 2022 02:40:44 +0000

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