⚡ Module 3: Deep Dive into JavaScript
With structural HTML and beautiful CSS, your webpage is ready for action.
JavaScript (JS) adds logic, behavior, and data handling. It allows your
website to think, calculate, and respond to what the user does.
1. The Core Building Blocks of JS
Before making a webpage interactive, you need to understand how
JavaScript handles information.
Variables: Containers for storing data (using let for values that
change, and const for values that stay constant).
Functions: Reusable blocks of code that perform a specific task.
Conditionals (if/else): Code that makes decisions based on whether
a condition is true or false.
JavaScript
// Variable
const price = 20;
let tax = 0.05;
// Function
function calculateTotal(p, t) {
return p + (p * t);
// Conditional logic
if (calculateTotal(price, tax) > 15) {
[Link]("Expensive item!");
}
2. Interacting with the Page: The DOM
The browser translates your HTML code into a tree-like structure called the
DOM (Document Object Model). JavaScript can talk to the DOM to change
text, swap colors, or add elements dynamically.
The 3 Steps of Interactivity
To make an element interactive, developers follow a simple pattern:
1. Target: Find the element in the DOM.
2. Listen: Sit and wait for a specific user interaction (like a click).
3. React: Execute code when that interaction happens.
3. Practice Assignment: Build a Dark Mode Toggle
Let's expand the profile card you built in the previous modules. We will use
JavaScript to let the user switch between light mode and dark mode.
Step 1: Update your HTML ([Link])
Add a toggle button inside your <header> tag:
HTML
<header>
<h1>Alex Code</h1>
<p>Front-End Developer in Training</p>
<button id="theme-btn">Toggle Dark Mode</button>
</header>
Step 2: Update your CSS ([Link])
Add a new CSS class at the very bottom of your file. When this class is
applied to the page, it will invert the colors:
CSS
/* Dark mode styles */
[Link]-theme {
background-color: #1e1e24;
color: #f0f2f5;
[Link]-theme header {
background-color: #2a2a35;
color: #ffffff;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
Step 3: Create your JavaScript ([Link])
Create a new file called [Link] in your folder. Link it at the very bottom of
your HTML file, right before the closing </body> tag, like this: <script
src="[Link]"></script>.
Inside [Link], add the following interactivity:
JavaScript
// 1. Target the button
const themeButton = [Link]('theme-btn');
// 2. Listen for a user click
[Link]('click', () => {
// 3. React by toggling the .dark-theme class on the body element
[Link]('dark-theme');
// Optional: Change the button text based on the state
if ([Link]('dark-theme')) {
[Link] = "Switch to Light Mode";
} else {
[Link] = "Switch to Dark Mode";
});
Open your [Link] file in a browser, click the button, and watch your
JavaScript alter the entire mood of the page instantly!
Ready to look at the final piece of the puzzle and see how professional
engineering frameworks tie everything together? Let me know when you're
ready for the next module.