Exercise - Add interactivity with JavaScript - Training

10 minutes

JavaScript (or ECMAScript) is a programming language that helps you add interactivity to your web pages.

For example, you can use JavaScript to define the behavior that will happen when a user selects a button; for example, open a pop-up window. Using JavaScript, you can add or remove content from a web page without reloading it.

In this unit, you'll set up an example JavaScript file for your web page. You'll create a button to switch between light and dark themes. Then you'll attach the button to JavaScript code that performs the actual theme switching. Finally, you'll check the finished project using your browser's developer tools.

Link to JavaScript

Like CSS, you could add JavaScript directly to the HTML file, but a recommended best practice is to save your JavaScript in a separate file. Adding your JavaScript code to a separate file makes it easier to reuse it across several web pages. For example, you could create a pop-up alert by adding <script>alert('Hello World')</script> anywhere within the body of your web pages; however, it's better to add your JavaScript code to a separate file that can be linked to every file that needs your custom functionality.

The HTML script tag <script> will let us link to an external JavaScript file, which is how you'll configure your web app in this exercise.

In VS Code, open your index.html file.
On a new line before the closing </body> element, enter script:src, and then select Enter. The opening and closing tags for a script are added to your code.

Modify the <script> element to load your app.js file as shown in the following example, and ensure that it's located after the closing </ul> element for the list.

...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<script src="app.js"></script>
...

The <script> element could be placed in the <head> or elsewhere in the <body>. However, putting <script> element at the end of the <body> section enables all the page content to display on the screen first, and then load the script.

Add fault tolerance

In your HTML file, add a <noscript> element after the closing </script> tag, which can be used to show a message if JavaScript is deactivated.
```
<script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site.</noscript>
```
Adding the <noscript> element is an example of fault tolerance or graceful degradation. By using the <noscript> element, your code can detect and plan for when a feature isn't supported or available.
Save your changes with the keyboard shortcut Control+S on Windows or Command+S on macOS.

Set strict mode

JavaScript was designed to be easy to learn and allows certain mistakes to be made by the developer. For example, JavaScript does not throw an error when you use a misspelled variable, and instead creates a new global one. While having fewer errors is tempting when you start learning JavaScript, it can lead to writing code that is harder for browsers to optimize and harder for you to debug.

Switch to strict mode to get more useful errors when you make mistakes.

In VS Code, open the app.js file, and enter the following.
```
'use strict';
```

Add a button

You need a way to let your users switch between the light and dark themes in your web page. In this exercise, you'll implement that functionality with an HTML <button> element.

In your HTML file, add a <button> element. Put the button at the end of the list inside of a <div> element.

...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<div>
  <button class="btn">Dark</button>
</div>
<script src="app.js"></script>
...

Notice that the <button> element in this example has a class attribute that you'll use to apply CSS styles.

In your CSS file, add a new rule with a .btn class selector for your HTML button. To make the button colors different from the general light or dark theme colors, set the color and background-color properties in this rule. They'll override the default ones set in the body rule of your CSS file.
```
.btn {
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
```

Next, modify the .btn rule to add some styles for the size, shape, appearance, and placement of the button. The following CSS creates a round button to the right of the page heading.

.btn {
  position: absolute;
  top: 20px;
  left: 250px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: none;
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}

Next, update the CSS for the light and dark theme. Define some new variables, --btnBg and --btnFontColor, to specify the button-specific background color and font color.

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
  --btnBg: var(--black);
  --btnFontColor: var(--white);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
  --btnBg: var(--white);
  --btnFontColor: var(--black);
}

Add an event handler

To make the button do something when you select it, you need an event handler in your JavaScript file. An event handler is a way to run a JavaScript function when an event happened on the page. For the button, let's add an event handler for the click event; the event handler function runs when the click event occurs.

Before you can add the event handler, you need a reference to the button element.

In your JavaScript file, use document.querySelector to get the button reference.
```
const switcher = document.querySelector('.btn');
```
The document.querySelector function uses CSS selectors, just like the ones you used in your CSS file. switcher is now a reference to the button in the page.
Next, add the event handler for the click event. In the following code, you add a listener for the click event and define an event handler function to be executed by the browser when the click event occurs.
```
switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');
});
```

In the preceding code, you used the toggle method to modify the <body> element's class attribute. This method automatically adds or removes the light-theme and dark-theme classes. This code applies the dark styles instead of light styles on click, and then light styles instead of dark if you click again.

However, the label for the button also needs to be updated to show the correct theme, so you need to add an if statement to determine the current theme, and update the button label.

Here's what the complete JavaScript code should look like.

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }
});

It's a JavaScript convention to use camel case for variable names with more than one word; for example: the variable className.

Console message

As a web developer, you can create hidden messages that won't appear on your webpage, but that you can read in the Developer Tools, in the Console tab. Using console messages is helpful for seeing the result of your code.

Add a call to console.log after the if statement, but inside the event listener.

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }

    console.log('current class name: ' + className);
});

In VS Code, when in a JavaScript file, you can use autocomplete for console.log by entering log, and then pressing Enter.

You can define a text string with single or double quotes around the text.

Open in the browser

To preview, select index.html, and select Open In Default Browser, or reload the same browser tab by pressing F5.
Select the new Dark button to switch to the dark theme.
Make sure that everything looks correct and behaves as expected. If not, you should review the preceding steps to see if you missed something

Check the page in the developer tools

Open Developer Tools.
- Right-click and select Inspect, or use the keyboard shortcut F12. Alternatively, use the Ctrl+Shift+I shortcut on Windows or Linux, and Option+Command+I on macOS.
Select the Elements tab and, inside the Elements tab, select the Styles tab.
Select the <body> element. In the Styles tab, look at the applied theme. If the current theme is dark, the dark-theme styles are applied.

Make sure the dark theme is selected.
Select the Console tab to see the console.log message, current class name: dark-theme.

Using the console, you can get interesting insights from your JavaScript code. Add more console messages to understand which parts of your code are getting executed and to know the current values of other variables.

To learn more about the console, check out the Console overview article.

Continue