I was using front-end Framworks as Vue Js and jQuery, but I discover that I have some problems that I must fix in JavaScript basics (and I’m proud to fix and learn new things always) because at all you will use Js in your Frameworks based project necessarily.

I decided to learn some principal in Js with deeply way because I’m not learned it correctly in the beginning, and I will share some simple Implementations as blog posts maybe it will help someone in somewhere.

Let’s start with creating a feature that is very common in websites this days, “Dark Mode functionality” .

The HTML page structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dark Mode</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
  </head>
  <body>
    <header>
      <button><i class="fas fa-sun"></i></button>
    </header>
    <main>
      <article>
        <h2>Pure Javascript Dark Mood</h2>
        <span class="date">May 7, 2021</span>
      </article>

      <article>
        <h2>Pure Javascript Dark Mood</h2>
        <span class="date">May 7, 2021</span>
      </article>

      <article>
        <h2>Pure Javascript Dark Mood</h2>
        <span class="date">May 7, 2021</span>
      </article>

      <article>
        <h2>Pure Javascript Dark Mood</h2>
        <span class="date">May 7, 2021</span>
      </article>
    </main>
  </body>
</html>

We will use this simple CSS style for the page:

body {
  text-align: center;
}

article {
  margin-bottom: 1rem;
  border-bottom: 2px solid #ccc;
  padding: 10px;
}

button {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 2rem;
}

.darking-mode {
  background: #374151;
  color: #fff;
}

The JavaScript function that will handle the click and switching between normal and dark mode, I will try to explain every line of code clearly. I used to comment my code so its already commented but I will try to explain it also.

// get the element to be clicked
const buttonToBeClicked = document.querySelector('button');

// addEventListener() method to execute the main function
buttonToBeClicked.addEventListener("click", darkMode);

// our dark mode function
function darkMode() {
  //console.log('Clicked!!');
  let theBody = document.body;
  theBody.classList.toggle('darking-mode');
    //console.log('switched to dark mode!');
  if (document.body.classList.contains('darking-mode')) {
     let icon = document.querySelector('i');
     //console.log(icon);
     icon.classList.remove('fa-sun');
     icon.classList.add('fa-moon');
  } else {
     let icon = document.querySelector('i');
     icon.classList.remove('fa-moon');
     icon.classList.add('fa-sun');
  }
}

Function explaining:

I used an addEventListener() method to handle click to execute the function that will do the work.

After that I stocked the body element in “theBody” variable.

And I used “Element.classList” a property that return a live class “darking-mode” that is responsible on changing elements color and body background color.

Finally I use an if statement to handle toggle fontawesome icons.

The blog post has originally posted on my personal blog. Hope that will helps someone, somewhere.

Create Dark Mode functionality with pure JavaScript

The HTML page structure:

We will use this simple CSS style for the page:

Function explaining: