Day 3 of 5

Day 3: Vanilla JavaScript — Interactive Pre-flight Checklist

Welcome to Day 3! Today is where your web page truly comes alive. You will add JavaScript to create an interactive pre-flight checklist — a tool that real pilots and aviation crew would use. JavaScript makes web pages respond to user actions: clicking buttons, checking items, showing progress, and updating text. Think of it as installing the electrical systems and switches in a cockpit — suddenly everything works! No frameworks, no libraries, just plain vanilla JavaScript that teaches you the fundamentals.

Step 1

Create the pre-flight checklist HTML structure

Concept

Before adding JavaScript, you need a solid HTML structure — like designing the cockpit layout before installing instruments. You will create a checklist page with checkboxes for safety items. Each checkbox is an <input type="checkbox"> element that users can check and uncheck.

Apply

Create a new HTML file called "checklist.html" with a pre-flight checklist structure.

Prompt

I am learning JavaScript by building an interactive pre-flight checklist. Please help me create a new HTML file called checklist.html with: (1) Basic HTML boilerplate with title "Pre-flight Checklist". (2) An <h1> heading "Boeing 737-800 Pre-flight Checklist". (3) A <p> paragraph "Complete each check before departure." (4) A <div id="status"> with text "Status: 0 of 5 checks completed". (5) A <div class="checklist"> containing 5 checklist items. Each item should be a <div class="check-item"> containing: <input type="checkbox" id="check1"> (increment the id for each: check1, check2, etc.) and <label for="check1"> with the check description. Use these 5 checks: "Verify fuel quantity and grade", "Check engine oil level", "Inspect landing gear tires", "Test navigation lights", "Confirm emergency equipment". Do not add any JavaScript yet — just the HTML.

Expected Result

You should see a heading, a paragraph, a status line saying "0 of 5 checks completed", and 5 checkboxes with labels next to them. You can click the checkboxes to check and uncheck them, but nothing else happens yet — that is what JavaScript will add.

Troubleshooting

• If checkboxes don't appear, make sure you used type="checkbox" inside the input tag. Also check that each <label for="..."> matches the corresponding <input id="...">.

Step 2

Add a script tag and verify JavaScript works

Concept

The <script> tag connects HTML to JavaScript, like wiring connects cockpit instruments to the electrical system. You can put JavaScript in a separate file (like CSS) or directly inside <script> tags. For learning, we will use inline script tags at the bottom of the body. The console.log() function writes messages to the browser's developer console — your debugging best friend.

Apply

Add a <script> tag at the bottom of your HTML body with a simple console.log message to confirm JavaScript is working.

Prompt

In my checklist.html file, add a <script> tag just before the closing </body> tag. Inside the script, add: console.log("Pre-flight checklist script loaded!"); — this writes a message to the browser console. Then tell me how to open the browser console (F12 or right-click > Inspect > Console tab). Show me where to place the script tag.

Expected Result

When you open checklist.html and press F12 to open the developer console, you should see the message "Pre-flight checklist script loaded!" in the Console tab. This confirms your JavaScript is running correctly.

Troubleshooting

• If you don't see the message in the console, make sure the script tag is inside the body (not the head) and that you refreshed the page after saving. Check for red error messages in the console.

Step 3

Select an HTML element with getElementById

Concept

The DOM (Document Object Model) is how JavaScript sees your HTML page — like a map of all the cockpit instruments. Each HTML element becomes a "node" in the DOM tree. getElementById() finds a specific element by its ID, like calling a specific aircraft by its registration number. This is the first step to making elements interactive.

Apply

Use getElementById to select the h1 heading and log it to the console.

Prompt

In my checklist.html, first add id="main-title" to the <h1> tag. Then in the <script> section (after the console.log), add: let heading = document.getElementById("main-title"); console.log(heading); — this selects the h1 element and logs it. Explain what the DOM is and what getElementById does. Use an aviation analogy.

Expected Result

In the browser console, you should see the h1 element logged (it will look like <h1 id="main-title">Boeing 737-800 Pre-flight Checklist</h1>). This proves that JavaScript can find and access HTML elements by their ID.

Troubleshooting

• If the console shows "null", the ID doesn't match. Check that the id in HTML exactly matches the string in getElementById — they are case-sensitive.

Step 4

Select elements by ID and read their properties

Concept

Once you select an element, you can read its properties — like reading the fuel gauge after finding the right instrument. .textContent gives you the text inside an element, .id gives you its ID, and .checked tells you if a checkbox is checked. These properties let JavaScript understand the current state of the page.

Apply

Select each checkbox by ID and log whether it is checked.

Prompt

In my checklist.html script section, add code that selects the first checkbox by ID and logs its state: let check1 = document.getElementById("check1"); console.log("Check 1 checked:", check1.checked);. Initially it should show false. Explain what .checked does. Keep it simple — just one checkbox for now.

Expected Result

In the console, you should see "Check 1 checked: false" — showing that the first checkbox is not checked when the page loads. This is your first time reading a property from a DOM element!

Troubleshooting

• If you see an error like "Cannot read property 'checked' of null", the element was not found. Double-check the ID spelling in both HTML and JavaScript.

Step 5

Use querySelector to select elements

Concept

querySelector() uses CSS selectors to find elements — like using a flight number to look up a route. You can pass any CSS selector: "h1" for tags, ".check-item" for classes, "#check1" for IDs. querySelector returns the first match, while querySelectorAll returns all matches.

Apply

Use querySelector to select the first checkbox on the page.

Prompt

In my checklist.html script, add: let firstCheckbox = document.querySelector("input[type='checkbox']"); console.log("First checkbox:", firstCheckbox);. Also try: let statusDiv = document.querySelector("#status"); console.log("Status:", statusDiv.textContent);. Explain the difference between getElementById and querySelector. When would you use each?

Expected Result

The console should show the first checkbox element and the status text. You now know two ways to select elements: getElementById (fast, by ID only) and querySelector (flexible, by any CSS selector).

Troubleshooting

• If querySelector returns null, check that your CSS selector is correct. Use # for IDs, . for classes, and tag names without any prefix.

Step 6

Select multiple elements with querySelectorAll

Concept

querySelectorAll() finds all elements that match a selector — like getting a list of all flights at a gate. It returns a NodeList, which is similar to an array. You can loop through it with .forEach() to do something with each element.

Apply

Use querySelectorAll to select all checkboxes and log how many there are.

Prompt

In my checklist.html script, add: let checkboxes = document.querySelectorAll("input[type='checkbox']"); console.log("Total checkboxes:", checkboxes.length);. Then add a forEach loop: checkboxes.forEach(function(checkbox, index) { console.log("Checkbox " + (index + 1) + ":", checkbox.id); });. Explain what querySelectorAll does and how forEach works. Show me the complete code.

Expected Result

The console should show "Total checkboxes: 5" followed by each checkbox ID. You can now select and work with multiple elements at once — this is essential for building the interactive checklist.

Troubleshooting

• If checkboxes.length shows 0, your selector might not match. Open the console and type document.querySelectorAll("input") to see what inputs are found.

Step 7

Add a click event listener to a button

Concept

Event listeners wait for user actions and then run code — like air traffic control waiting for pilot calls on the radio. addEventListener() attaches a function to an element that runs when the event happens. Common events: "click", "change", "mouseover". The function that runs is called an "event handler".

Apply

Add a "Start Checklist" button and make it show a message when clicked.

Prompt

In my checklist.html, add a <button id="start-btn">Start Checklist</button> just before the checklist div. Then in the script, add: let startBtn = document.getElementById("start-btn"); startBtn.addEventListener("click", function() { alert("Pre-flight checklist started! Let's go through each item."); });. Explain what addEventListener does and what the "click" event means. Show me both the HTML button and the JavaScript.

Expected Result

You should see a "Start Checklist" button on the page. When you click it, a popup alert should appear saying "Pre-flight checklist started! Let's go through each item." Dismiss the alert by clicking OK.

Troubleshooting

• If clicking the button does nothing, check that the button id in HTML matches the getElementById in JavaScript. Also check for typos in addEventListener (capital L is important).

Step 8

Handle checkbox change events

Concept

The "change" event fires when a checkbox is checked or unchecked — like a sensor detecting that a door has opened or closed. By attaching a change event listener to each checkbox, your code can respond every time someone interacts with the checklist.

Apply

Add change event listeners to all checkboxes that log which item was checked.

Prompt

In my checklist.html script, add code that attaches a change event listener to every checkbox: checkboxes.forEach(function(checkbox) { checkbox.addEventListener("change", function() { console.log(checkbox.id + " is now " + (checkbox.checked ? "checked" : "unchecked")); }); });. Now when you check or uncheck any item, the console should log the change. Explain what the change event does and what the ternary operator (? :) means. Show me the complete code.

Expected Result

Open the browser console, then check and uncheck different items. Each time you change a checkbox, you should see a message in the console like "check1 is now checked" or "check3 is now unchecked". The code is responding to your actions!

Troubleshooting

• If nothing appears in the console when checking boxes, make sure the addEventListener code runs after querySelectorAll. Place the event listener code below the line that selects the checkboxes.

Step 9

Understand onclick vs addEventListener

Concept

There are two ways to handle events: onclick in HTML attributes and addEventListener in JavaScript. addEventListener is the professional approach — like using proper radio communication instead of shouting across the tarmac. It keeps your JavaScript separate from your HTML and allows multiple listeners on the same element.

Apply

Review your code to confirm you are using addEventListener (not onclick).

Prompt

Please explain to me the difference between using onclick="someFunction()" in HTML and addEventListener("click", function) in JavaScript. Why is addEventListener the better approach? Give me a short, clear explanation for a beginner. I just want to understand why I should use addEventListener instead of onclick.

Expected Result

You should understand that addEventListener keeps JavaScript separate from HTML, allows multiple handlers on the same element, and gives you more control. onclick is simpler but less flexible. For this project, we use addEventListener exclusively.

Troubleshooting

• If you have any onclick attributes in your HTML, remove them and use addEventListener in JavaScript instead. Mixing both approaches can cause confusing bugs.

Step 10

Make the Start button change the page heading

Concept

JavaScript can change the content of HTML elements using properties like .textContent — like updating a flight information display board at the airport. When you select an element and set its .textContent, the browser immediately updates what is shown on the page.

Apply

Update the Start button handler to change the heading when clicked.

Prompt

In my checklist.html script, update the startBtn event listener. Instead of just showing an alert, also change the heading text: heading.textContent = "Pre-flight Checklist — IN PROGRESS"; and change the heading color: heading.style.color = "#059669"; (green, meaning active). Remove the alert and just update the heading. This is your first time using JavaScript to change what appears on the page! Show me the updated event listener.

Expected Result

When you click "Start Checklist", the heading should change to "Pre-flight Checklist — IN PROGRESS" and turn green. The page updates instantly without reloading. This is JavaScript modifying the DOM in real time!

Troubleshooting

• If the heading doesn't change, make sure the "heading" variable was defined earlier in the script (using getElementById). Variables defined inside functions are not accessible outside.

Step 11

Change text content when checkboxes are checked

Concept

JavaScript can change the text inside an element — like updating a flight information display. When a checkbox is checked, you can update the label text to show it is complete, giving the user clear visual feedback.

Apply

When a checkbox is checked, add " [DONE]" to the label text. When unchecked, remove it.

Prompt

In my checklist.html script, update the checkbox change event listener. Inside the handler, get the label that belongs to the checkbox: let label = document.querySelector('label[for="' + checkbox.id + '"]');. Then add logic: if (checkbox.checked) { label.textContent = label.textContent + " [DONE]"; } else { label.textContent = label.textContent.replace(" [DONE]", ""); }. Now checking a box adds "[DONE]" and unchecking removes it. Show me the updated event listener code.

Expected Result

When you check a checkbox, the label text should show " [DONE]" at the end. When you uncheck it, " [DONE]" disappears. Each checkbox independently shows its completion status.

Troubleshooting

• If [DONE] appears multiple times, the code is adding it each time the checkbox fires a change event while checked. Add a check: only add [DONE] if it is not already there.

Step 12

Modify CSS styles with JavaScript

Concept

JavaScript can change CSS styles dynamically using the .style property — like a pilot adjusting cockpit lighting for different conditions. You set style properties the same way as in CSS, but in camelCase: backgroundColor (not background-color), fontSize (not font-size).

Apply

When a checkbox is checked, add a line-through style to the label text.

Prompt

In my checklist.html script, update the checkbox change handler to also change the label style. When checked, add: label.style.textDecoration = "line-through"; label.style.color = "#6b7280"; (grayed out). When unchecked, remove the style: label.style.textDecoration = "none"; label.style.color = ""; (back to default). Show me the updated handler.

Expected Result

When you check a checkbox, the label text should have a line through it and turn gray, showing the item is complete. Unchecking removes the strikethrough and restores the normal color.

Troubleshooting

• Remember that JavaScript style properties use camelCase: backgroundColor, fontSize, textDecoration — not the CSS kebab-case (background-color).

Step 13

Toggle CSS classes with classList

Concept

classList.toggle() adds or removes a CSS class — like switching a runway light on or off. This is cleaner than setting individual styles because you define the look in CSS and toggle the class in JavaScript. The separation of styling (CSS) and behavior (JavaScript) is a best practice.

Apply

Create a CSS class "completed" and toggle it on checklist items when checked.

Prompt

In my checklist.html, first add a <style> tag in the <head> with a CSS class: .completed { text-decoration: line-through; color: #6b7280; }. Then in the script, replace the individual style changes with: label.classList.toggle("completed"); — this automatically adds the class when checked and removes it when unchecked. Remove the label.style lines from before. Show me both the CSS class and the updated JavaScript handler.

Expected Result

The visual result is the same — checked items get strikethrough and gray color. But now the styling is defined in CSS and toggled by JavaScript. This is cleaner and more maintainable code.

Troubleshooting

• If the class doesn't toggle, check that the CSS class name matches exactly (including case). Also make sure the <style> tag is in the <head> section.

Step 14

Create and update a status message

Concept

A status message gives users real-time feedback — like the status board at an airport gate showing flight information. You can update the text of the status div every time a checkbox changes, showing how many items are checked out of the total.

Apply

Update the status message every time a checkbox is checked or unchecked.

Prompt

In my checklist.html script, create a function called updateStatus() that: (1) Counts how many checkboxes are checked using a loop or filter. (2) Updates the #status div textContent to show "Status: X of 5 checks completed". Call this function inside each checkbox change handler. Here is the function: function updateStatus() { let checked = document.querySelectorAll("input[type='checkbox']:checked").length; document.getElementById("status").textContent = "Status: " + checked + " of 5 checks completed"; }. Add updateStatus(); to the change handler. Show me the complete updated code.

Expected Result

The status message should update in real time as you check and uncheck items. Check one box: "Status: 1 of 5 checks completed". Check three: "Status: 3 of 5 checks completed". Uncheck one: "Status: 2 of 5 checks completed".

Troubleshooting

• If the count doesn't update, make sure updateStatus() is called inside the change event handler, not outside it. The function must run each time a checkbox changes.

Step 15

Build a progress counter with percentage

Concept

Counting and calculating are core programming skills — like counting passengers before boarding. You can calculate a percentage by dividing the completed count by the total and multiplying by 100. This gives users a clear sense of progress, like the fuel gauge percentage on a cockpit display.

Apply

Update the status function to also show a completion percentage.

Prompt

In my checklist.html script, update the updateStatus() function to also calculate and display a percentage. Change the status text to: "Status: X of 5 checks completed (XX%)". Calculate percentage like this: let percent = Math.round((checked / 5) * 100);. Math.round() rounds to the nearest whole number. Show me the updated function.

Expected Result

The status message should now show a percentage: "Status: 2 of 5 checks completed (40%)". Check all five and it shows "(100%)". The percentage updates in real time with each checkbox change.

Troubleshooting

• If the percentage shows as a decimal (like 40.00000001%), use Math.round() to round it. JavaScript sometimes produces tiny decimal errors in calculations.

Step 16

Show different messages based on completion percentage

Concept

Conditional logic (if/else) lets your code show different results based on conditions — like ATC giving different instructions based on weather conditions. if (condition) { ... } else { ... } runs different code depending on whether the condition is true or false.

Apply

Add conditional messages: "Keep going!" when incomplete, "Almost there!" when mostly done, "All checks complete!" when 100%.

Prompt

In my checklist.html script, update the updateStatus() function to show a motivational message based on progress. Add this after the percentage calculation: let message = ""; if (checked === 0) { message = "Ready to begin!"; } else if (checked < 3) { message = "Keep going!"; } else if (checked < 5) { message = "Almost there!"; } else { message = "All checks complete! Ready for departure!"; }. Update the status text to include the message. Show me the complete updated function.

Expected Result

The status should show different messages at different stages: "Ready to begin!" at 0%, "Keep going!" at 1-2 checks, "Almost there!" at 3-4 checks, and "All checks complete! Ready for departure!" at 100%. The messages update automatically.

Troubleshooting

• If the message doesn't change, check that your if/else conditions are in the right order. JavaScript checks them top to bottom and stops at the first true condition.

Step 17

Add visual feedback with dynamic styles

Concept

JavaScript can change styles based on conditions — like a traffic light changing from red to green. By combining conditional logic with style changes, you can create visual feedback that helps users understand the state of the checklist at a glance.

Apply

Change the status box background color based on progress: yellow when started, green when complete.

Prompt

In my checklist.html script, update the updateStatus() function to also change the status div style based on progress. Get the status div: let statusDiv = document.getElementById("status");. Add: if (checked === 5) { statusDiv.style.backgroundColor = "#d1fae5"; statusDiv.style.color = "#065f46"; statusDiv.style.padding = "15px"; statusDiv.style.borderRadius = "8px"; } else if (checked > 0) { statusDiv.style.backgroundColor = "#fef3c7"; statusDiv.style.color = "#92400e"; statusDiv.style.padding = "15px"; statusDiv.style.borderRadius = "8px"; } else { statusDiv.style.backgroundColor = ""; statusDiv.style.color = ""; }. Now the status box turns yellow when started and green when complete! Show me the complete function.

Expected Result

The status box should change color: no background at 0 checks, yellow background when any check is marked, and green background when all 5 are complete. The color change gives instant visual feedback.

Troubleshooting

• If the color doesn't change, make sure you are setting styles on the correct element. Check that the status div ID matches in both HTML and JavaScript.

Step 18

Detect when all checklist items are complete

Concept

Checking if all items are complete is like verifying every item on a pre-flight checklist — the aircraft is not going anywhere until every single item is confirmed. You can check all checkboxes in a loop, or use the querySelectorAll with the :checked pseudo-selector to count completed items and compare with the total.

Apply

Add logic that detects when all checklist items are checked and shows a special completion message.

Prompt

In my checklist.html script, I already have the completion detection in the updateStatus function (checked === 5). Now let me add something extra: when all 5 checks are complete, change the page heading to "Pre-flight Checklist — COMPLETE" and set heading.style.color = "#059669"; (green). Also add: document.body.style.backgroundColor = "#f0fdf4"; (very light green). This gives a full-page visual celebration! Add this code inside the if (checked === 5) block. Show me the complete updateStatus function now.

Expected Result

When you check all 5 items: the heading changes to "COMPLETE" in green, the status box turns green with a congratulations message, and the page background becomes a very light green. It should feel like a celebration of completing the pre-flight checklist!

Troubleshooting

• If the heading doesn't change when all items are checked, make sure the code is inside the if (checked === 5) block, not outside the function. Use curly braces correctly.

Step 19

Add a Reset Checklist button

Concept

Reset functionality clears all changes and returns the page to its initial state — like resetting instruments before a new flight. You loop through all checkboxes, set each one's .checked property to false, remove any "completed" classes, and reset the status message.

Apply

Add a "Reset Checklist" button that unchecks all items and resets the page.

Prompt

In my checklist.html, add a <button id="reset-btn">Reset Checklist</button> next to the Start button. In the script, add an event listener: let resetBtn = document.getElementById("reset-btn"); resetBtn.addEventListener("click", function() { checkboxes.forEach(function(checkbox) { checkbox.checked = false; let label = document.querySelector('label[for="' + checkbox.id + '"]'); label.classList.remove("completed"); label.textContent = label.textContent.replace(" [DONE]", ""); }); heading.textContent = "Boeing 737-800 Pre-flight Checklist"; heading.style.color = ""; document.body.style.backgroundColor = ""; updateStatus(); });. This resets everything back to the starting state. Show me the button HTML and the reset handler.

Expected Result

Click "Reset Checklist" and all checkboxes should uncheck, the labels should lose their strikethrough, the heading resets, the background color resets, and the status shows "0 of 5 checks completed (0%)". The page is back to its initial state.

Troubleshooting

• If reset doesn't work, check that the forEach loop is inside the click handler. Also make sure checkboxes variable is accessible — it should be defined at the top level of the script, not inside a function.

Step 20

Add a confirmation dialog before reset

Concept

The confirm() dialog asks the user to verify an action — like a pilot confirming a runway change with ATC. It shows a popup with OK and Cancel buttons. If the user clicks OK, confirm() returns true; if Cancel, it returns false. This prevents accidental resets that would lose all the user's progress.

Apply

Wrap the reset logic inside a confirm() dialog so users can cancel if they change their mind.

Prompt

In my checklist.html script, update the reset button handler to ask for confirmation: resetBtn.addEventListener("click", function() { let confirmed = confirm("Are you sure you want to reset the checklist? All progress will be lost."); if (!confirmed) { return; } // ... rest of the reset code stays the same ... });. Explain what confirm() does and what return does (it exits the function early). Show me the updated handler.

Expected Result

Clicking "Reset Checklist" now shows a confirmation popup. Click "Cancel" and nothing happens — your progress is safe. Click "OK" and the reset proceeds. This prevents accidental data loss.

Troubleshooting

• If the confirmation dialog doesn't appear, check that confirm() is spelled correctly (not "confrim"). If the reset still happens after clicking Cancel, check that the if (!confirmed) { return; } line is above the reset code.

Step 21

Add visual celebration when all checks are complete

Concept

Visual feedback makes the interface feel responsive and rewarding — like the green light when all systems are ready for takeoff. You can create a congratulatory message, change colors, and add emphasis when the user completes all checklist items.

Apply

Enhance the completion state with a prominent status message and visual emphasis.

Prompt

In my checklist.html script, enhance the completion celebration. In the if (checked === 5) block of updateStatus(), add: statusDiv.style.fontSize = "1.3rem"; statusDiv.style.fontWeight = "bold"; statusDiv.style.border = "3px solid #059669"; statusDiv.style.textAlign = "center";. Also make sure the status message ends with "All checks complete! Ready for departure!". This makes the completion state look like a real aviation confirmation. Show me the updated if block.

Expected Result

When all 5 items are checked, the status box should become prominent: larger text, bold, centered, with a green border. Combined with the green page background and updated heading, the entire page celebrates the completion of the pre-flight checklist.

Troubleshooting

• If the celebration styles don't appear, check that the reset handler clears these styles too (set fontSize, fontWeight, border back to empty strings or defaults).

Step 22

Final code review and polish

Concept

Reviewing your code is like doing a pre-flight walk-around inspection — checking every detail before declaring the aircraft ready. Ask Gemini to review your JavaScript for best practices, suggest improvements, and catch any issues you might have missed.

Apply

Ask Gemini to review your complete JavaScript code and suggest improvements.

Prompt

Here is my complete interactive pre-flight checklist page. Please review my JavaScript code for: (1) Any bugs or issues. (2) Best practices I should follow (variable naming, code organization). (3) Any improvements to make the code cleaner. (4) Common beginner mistakes I might have made. Be encouraging — I am a beginner and this is my first JavaScript project! [Paste your complete checklist.html code here]

Expected Result

Gemini should review your code, point out any issues, and suggest improvements. Apply any fixes that make sense. Your interactive pre-flight checklist is now complete — check items, see progress, get celebration when done, and reset to start fresh!

Troubleshooting

• Common issues to check: functions called before they are defined (hoisting), missing semicolons, wrong element IDs, event listeners attached to elements that don't exist yet. Make sure your script runs after the HTML is loaded by placing it at the bottom of the body.