Day 4 of 5

Day 4: Static Mini Project — Aircraft Maintenance Checklist

Welcome to Day 4 — your graduation project! Over the past three days you learned HTML structure (Day 1), CSS styling (Day 2), and JavaScript interactivity (Day 3). Today you will combine ALL of those skills to build a complete Aircraft Maintenance Checklist website from scratch. This is a real-world aviation tool that maintenance crews would use to track inspection tasks on an aircraft. You will create the project file by file, adding structure, styling, and interactivity step by step. By the end of today, you will have built something impressive — a professional-looking maintenance checklist that works on mobile and desktop. You already know everything you need. Let's put it all together!

Step 1

Create the maintenance.html project file with basic HTML boilerplate

Concept

Every web project starts with an HTML file. Today you are creating a brand new project — the Aircraft Maintenance Checklist. Just like on Day 1 when you created index.html for your first page, you will create maintenance.html as the main file for this project. The boilerplate gives you the basic HTML structure that every web page needs.

Apply

Create a new file called maintenance.html in your aviation-project folder with the basic HTML boilerplate.

Prompt

I am building an Aircraft Maintenance Checklist website as my graduation project. I have completed Days 1-3 of a web development course. Please help me create a new file called maintenance.html with: (1) The standard HTML boilerplate (DOCTYPE, html, head, body). (2) A <title> tag that says "Aircraft Maintenance Checklist". (3) A <meta charset="UTF-8"> and a viewport meta tag for mobile. (4) A comment at the top saying "Day 4 Project: Aircraft Maintenance Checklist". (5) An empty <h1> tag with id="main-title" inside the body — I will add the heading text next. Do not add any content yet, just the structure.

Expected Result

You should have a file called maintenance.html with the HTML boilerplate. When you open it in your browser, you see a blank white page with the tab title "Aircraft Maintenance Checklist". There is an empty h1 element ready for content.

Troubleshooting

• If the tab title does not show "Aircraft Maintenance Checklist", make sure the <title> tag is inside the <head> section, not the <body>.

Step 2

Create and link the maintenance.css stylesheet file

Concept

Remember from Day 2 — we keep CSS in a separate file for clean organization. Just like you created style.css for your safety notice project, you will create maintenance.css for this project. Linking it in the <head> tells the browser to apply your styles.

Apply

Create a new CSS file and link it to your HTML file.

Prompt

In my maintenance.html project, I want to create a separate CSS file. Please tell me: (1) Create a new file called maintenance.css in the same folder. (2) Add a CSS comment at the top: /* Aircraft Maintenance Checklist Styles */. (3) Show me the exact <link> tag to add inside the <head> of maintenance.html to connect the CSS file. Do not add any CSS rules yet.

Expected Result

You now have two files: maintenance.html and maintenance.css. The HTML file has a <link> tag in the <head> that connects to maintenance.css. The CSS file has a comment at the top. Nothing visible changes on the page yet since there are no CSS rules.

Troubleshooting

• If styles do not apply later, check that the filename in the <link> href matches exactly — including capital letters. "Maintenance.css" is different from "maintenance.css".

Step 3

Create and link the maintenance.js JavaScript file

Concept

Remember from Day 3 — we keep JavaScript in a separate file too. Just like you learned with checklist.html, the <script> tag goes at the bottom of the body so the HTML loads first. This ensures your JavaScript can find all the HTML elements it needs.

Apply

Create a JavaScript file and link it to your HTML file.

Prompt

In my maintenance.html project, I want to create a separate JavaScript file. Please tell me: (1) Create a new file called maintenance.js in the same folder. (2) Add a JavaScript comment at the top: // Aircraft Maintenance Checklist Script. (3) Add a console.log("Maintenance checklist script loaded!"); line. (4) Show me the exact <script> tag to add just before the closing </body> tag of maintenance.html. Do not add any other JavaScript yet.

Expected Result

You now have three files: maintenance.html, maintenance.css, and maintenance.js. When you open maintenance.html in your browser and press F12, the Console tab shows "Maintenance checklist script loaded!" confirming the script is connected.

Troubleshooting

• If you do not see the console message, make sure the script tag src path matches the filename exactly. The script tag should be <script src="maintenance.js"></script> — do not use a self-closing tag.

Step 4

Create the hero section with heading and subtitle

Concept

A hero section is the first thing visitors see — like the welcome display at an airport terminal. It has a big heading and a short description. In HTML, we wrap related content in a <section> tag for organization. Using semantic tags like <header> and <section> helps screen readers and search engines understand your page.

Apply

Add a hero section inside the body of maintenance.html with a heading and subtitle.

Prompt

In my maintenance.html file, inside the <body> (after the empty h1), please add: (1) A <header class="hero"> section. (2) Inside the hero, change the empty <h1 id="main-title"> to contain "Aircraft Maintenance Checklist". (3) Below the h1, add <p class="subtitle"> with the text "Boeing 737-800 — Registration PK-GML — Complete 500-Hour Inspection Checklist". Do not change anything else. Keep the existing structure.

Expected Result

Your page now shows a large heading "Aircraft Maintenance Checklist" with a subtitle below it mentioning the aircraft type and registration. The page still looks plain (no styling yet) but the content structure is in place.

Troubleshooting

• If the heading does not appear, check that the <header> section is inside the <body> tags, not inside the <head> tags.

Step 5

Add an aircraft information card section

Concept

Information cards organize key data in a compact, readable format — like an aircraft data plate that shows the registration, type, and serial number. We use a <section> tag with a <div> for the card container, and a description list (<dl>, <dt>, <dd>) for label-value pairs. This is more semantic than a regular list because it pairs terms with their descriptions.

Apply

Add an aircraft information card below the hero section with realistic aviation data.

Prompt

In my maintenance.html file, after the </header> closing tag, add a new <section class="aircraft-info"> containing a <div class="info-card">. Inside the card, add: (1) An <h2> with text "Aircraft Information". (2) A <dl> (description list) with these items: <dt>Aircraft Type</dt><dd>Boeing 737-800</dd>, <dt>Registration</dt><dd>PK-GML</dd>, <dt>Operator</dt><dd>Garuda Indonesia Training Fleet</dd>, <dt>Last Inspection</dt><dd>2025-11-15</dd>, <dt>Total Flight Hours</dt><dd>12,450 hours</dd>, <dt>Next Inspection Due</dt><dd>500-hour check (estimated: 2026-06-15)</dd>. Do not change existing content.

Expected Result

Below the hero heading, you now see a section labeled "Aircraft Information" with six data items showing the aircraft type (Boeing 737-800), registration (PK-GML), operator, last inspection date, total flight hours, and next inspection due date. The data appears as a plain list without styling.

Troubleshooting

• If the description list looks odd, check that each <dt> (term) is followed by a <dd> (description). They must be paired correctly inside the <dl>.

Step 6

Add the maintenance checklist section heading and container

Concept

The checklist section is the heart of your project — where all the inspection items will live. Using a container div with an ID lets JavaScript find and interact with it later. Think of it as the binder that holds all your maintenance checklists together.

Apply

Add the checklist section with a heading and empty container div below the aircraft info card.

Prompt

In my maintenance.html file, after the aircraft-info section, add a new <section class="checklist-section">. Inside it, add: (1) An <h2> with text "Maintenance Inspection Checklist". (2) A <div id="progress-container"> containing: a <div id="progress-bar"> and a <span id="progress-text">0 of 7 items checked</span>. (3) A <div id="checklist-container"> — leave it empty for now, I will add checklist items next. Do not change existing content.

Expected Result

Below the aircraft information card, you see a heading "Maintenance Inspection Checklist", a progress bar area showing "0 of 7 items checked", and an empty container where checklist items will go. Nothing is styled yet.

Troubleshooting

• Make sure the progress bar div and checklist container div have the exact IDs shown. JavaScript will use these IDs later to update content.

Step 7

Add the first three checklist items with checkboxes

Concept

Checklist items use checkboxes — just like you learned on Day 3 with the pre-flight checklist. Each item has an <input type="checkbox"> with a unique ID and a <label> that describes the task. We group items by category (Engine, Landing Gear, Avionics) using div containers with class names. This keeps the checklist organized like sections in a real maintenance manual.

Apply

Add the first three checklist items inside the checklist container, grouped by Engine category.

Prompt

In my maintenance.html file, inside the <div id="checklist-container">, add the following content. First, add a <h3 class="category-header">Engine Inspection</h3>. Then add three <div class="check-item"> elements. Each check-item should contain: (1) <input type="checkbox" class="checklist-checkbox" id="check-engine-1">. (2) <label for="check-engine-1"> with text "Verify engine oil quantity and pressure readings". (3) The second item: id="check-engine-2", label "Inspect turbine blade condition and clearances". (4) The third item: id="check-engine-3", label "Check fuel filter status and drain samples". Do not change anything outside the checklist-container.

Expected Result

Inside the checklist area, you now see a category heading "Engine Inspection" followed by three checkboxes with labels: oil quantity check, turbine blade inspection, and fuel filter check. You can click the checkboxes to check and uncheck them, but nothing else happens yet.

Troubleshooting

• If clicking a checkbox also checks another one, make sure each checkbox has a unique id and each label has a matching for attribute.

Step 8

Add four more checklist items covering additional categories

Concept

A real maintenance checklist covers all aircraft systems. Beyond the engine, we need to inspect the landing gear, avionics, safety equipment, and hydraulic systems. Each category gets its own heading and checkboxes. Organizing by system is how real maintenance crews work — they go through each system methodically.

Apply

Add four more checklist categories with items below the Engine section.

Prompt

In my maintenance.html file, inside the <div id="checklist-container">, after the last Engine check-item, add these four categories. Each category has an <h3 class="category-header"> heading and one <div class="check-item"> with a checkbox. Use this data: (1) Category "Landing Gear" — item: "Inspect main landing gear tires, brakes, and hydraulics", id="check-landing-1". (2) Category "Avionics and Electrical" — item: "Test navigation instruments, radios, and electrical systems", id="check-avionics-1". (3) Category "Safety Equipment" — item: "Verify fire extinguisher, oxygen masks, and emergency exits", id="check-safety-1". (4) Category "Hydraulic System" — item: "Check hydraulic fluid levels, pressures, and line integrity", id="check-hydraulic-1". Do not change existing items.

Expected Result

Your checklist now has five category headings (Engine Inspection with 3 items, Landing Gear, Avionics and Electrical, Safety Equipment, and Hydraulic System — each with 1 item). Seven checkboxes total. All are clickable but not interactive beyond basic checking.

Troubleshooting

• If new items appear outside the checklist area, make sure you placed them inside the <div id="checklist-container"> and not after its closing tag.

Step 9

Style the body and hero section with aviation-themed colors

Concept

Remember from Day 2 — CSS controls colors, fonts, and spacing. For an aviation maintenance tool, we want a professional look: a dark blue header (like an airline brand color), clean white content area, and subtle gray background. CSS custom properties (variables) in :root let you define colors once and reuse them throughout your stylesheet — like having a standard color palette for an airline.

Apply

Add CSS rules to maintenance.css for the body, hero section, and color variables.

Prompt

In my maintenance.css file (currently empty except for the comment), add these styles. First, add CSS custom properties in :root with aviation-themed colors: --primary-blue: #1a3a5c; --primary-blue-light: #2c5f8a; --bg-light: #f5f7fa; --text-dark: #1a1a2e; --text-medium: #4a5568; --accent-amber: #d4880f; --success-green: #2d8a4e; --white: #ffffff. Then style the body: font-family Arial, sans-serif; background var(--bg-light); color var(--text-dark); margin 0; padding 0. Then style .hero: background var(--primary-blue); color white; padding 40px 20px; text-align center. Then style .hero h1: margin 0; font-size 2rem. Then style .subtitle: font-size 1.1rem; opacity 0.9; margin-top 10px. Use the CSS variables everywhere instead of raw colors.

Expected Result

Your page now has a dark blue hero banner at the top with white text "Aircraft Maintenance Checklist" and the subtitle in a slightly lighter white. The rest of the page has a light gray background with dark text. The page already looks much more professional!

Troubleshooting

• If the styles do not appear, check that the <link> tag in the HTML head points to "maintenance.css" and that you saved the CSS file. Try pressing Ctrl+F5 to hard-refresh the browser.

Step 10

Style the aircraft information card with a bordered card layout

Concept

Card layouts are everywhere in web design — like the data cards in a cockpit instrument panel. A card has padding (space inside), a border or shadow (to make it stand out), and rounded corners (for a modern feel). On Day 2 you styled the safety notice card. Here you apply the same pattern with aviation-specific colors.

Apply

Add CSS rules for the aircraft info card, description list, and section spacing.

Prompt

In my maintenance.css file, after the hero styles, add these new rules. Style .aircraft-info: padding 20px. Style .info-card: background white; border-radius 8px; box-shadow 0 2px 8px rgba(0,0,0,0.1); padding 20px; max-width 600px; margin 20px auto. Style .info-card h2: color var(--primary-blue); border-bottom 2px solid var(--primary-blue); padding-bottom 10px; margin-top 0. Style the description list: dt font-weight bold; color var(--primary-blue); margin-top 12px. dd margin-left 0; color var(--text-medium); margin-bottom 4px. Add a comment /* Aircraft Information Card */ above these styles.

Expected Result

The aircraft information now appears inside a white card with a subtle shadow, centered on the page. The heading "Aircraft Information" is in dark blue with an underline. Each data label (Aircraft Type, Registration, etc.) is bold and blue, with the values in medium gray below. The card has rounded corners and looks clean and professional.

Troubleshooting

• If the card is not centered, make sure you have margin 20px auto on the .info-card class. The "auto" value centers block elements horizontally.

Step 11

Style the checklist items with spacing, alignment, and hover effects

Concept

Good checklist styling makes items easy to scan — like a well-organized maintenance log. We want consistent spacing between items, aligned checkboxes, and a hover effect so users know which item they are about to click. On Day 2 you learned about hover effects with :hover. Here we combine spacing, borders, and hover for a professional interactive feel.

Apply

Add CSS rules for the checklist section, category headers, and check items.

Prompt

In my maintenance.css file, add these checklist styles. Add comment /* Checklist Section */. Style .checklist-section: padding 20px; max-width 600px; margin 0 auto. Style .category-header: color var(--primary-blue); border-left 4px solid var(--accent-amber); padding-left 12px; margin-top 24px; margin-bottom 8px; font-size 1.1rem. Style .check-item: display flex; align-items center; padding 12px; background white; border-radius 6px; margin-bottom 8px; border 1px solid #e2e8f0; transition background 0.2s. Style .check-item:hover: background #f0f4f8. Style .checklist-checkbox: width 20px; height 20px; margin-right 12px; cursor pointer; accent-color var(--primary-blue). Style .check-item label: cursor pointer; flex 1. Do not change existing styles.

Expected Result

Each checklist item now appears in its own white card with a light border. Category headings have an amber accent bar on the left. When you hover over a checklist item, the background changes to a light blue-gray. Checkboxes are larger (20px) and styled in the primary blue color when checked.

Troubleshooting

• If items are not aligned horizontally, make sure you used display: flex and align-items: center on .check-item. The checkbox and label should be on the same line.

Step 12

Add progress bar styling and percentage display

Concept

A progress bar gives visual feedback on how much is done — like a fuel gauge showing how full the tank is. The outer container sets the total width, and an inner bar fills up proportionally. We use background color transitions to show progress visually: gray when empty, amber in the middle, and green when complete.

Apply

Add CSS rules for the progress bar container and fill bar.

Prompt

In my maintenance.css file, add progress bar styles. Add comment /* Progress Bar */. Style #progress-container: max-width 600px; margin 20px auto; padding 0 20px. Style #progress-bar: background #e2e8f0; border-radius 10px; height 24px; overflow hidden; position relative. Also add a #progress-bar::after pseudo-element with content ""; position absolute; top 0; left 0; height 100%; width 0%; background var(--accent-amber); border-radius 10px; transition width 0.5s ease, background 0.5s ease. Style #progress-text: text-align center; color var(--text-medium); margin-top 8px; display block; font-size 0.95rem. Do not change existing styles.

Expected Result

Above the checklist items, you see a rounded gray bar (the progress track) with the text "0 of 7 items checked" centered below it. The bar is currently empty (0% filled) because no items are checked. The bar will fill when JavaScript is added later.

Troubleshooting

• If the progress bar is not visible, make sure it has a height set (24px). A div with no content and no height will collapse to zero pixels tall.

Step 13

Add category accent colors and section spacing

Concept

Different maintenance categories can use different accent colors — like color-coded sections in an aircraft maintenance manual. This makes the checklist visually scannable: engine checks in one color, safety equipment in another. We can use CSS classes or nth-child selectors to vary the category header colors. Adding consistent section spacing prevents the page from feeling cramped.

Apply

Refine CSS with section spacing and visual consistency.

Prompt

In my maintenance.css file, add these refinements. Add a general section style: section padding 20px; max-width 700px; margin 0 auto. Also add a style for h2 in the page: font-size 1.5rem; color var(--primary-blue). Add a body style for line-height: 1.6. Add a .checklist-section h2 style: text-align center; margin-bottom 20px. Do not change existing styles — just add these new rules at the bottom.

Expected Result

The page now has consistent spacing between all sections. Text is more readable with a line-height of 1.6. The "Maintenance Inspection Checklist" heading is centered above the checklist. The overall layout feels balanced and professional.

Troubleshooting

• If sections overlap or look cramped, check that you added padding to the section rule and that max-width is set. Clear your browser cache with Ctrl+F5 if styles seem stuck.

Step 14

Set up JavaScript: select key elements and verify script runs

Concept

Just like Day 3 where you started by selecting elements with getElementById, we begin our JavaScript by grabbing references to the elements we need. We need the checkboxes, the progress text, and the progress bar. Storing them in variables at the top of the script (like organizing your tools before starting a job) makes the rest of the code cleaner.

Apply

In maintenance.js, select the key HTML elements and log them to verify.

Prompt

In my maintenance.js file (which currently has the console.log line and the comment), add the following code below the console.log. (1) Add a comment: // Select key elements. (2) Select all checkboxes: const checkboxes = document.querySelectorAll(".checklist-checkbox"); (3) Select the progress text: const progressText = document.getElementById("progress-text"); (4) Select the progress bar: const progressBar = document.getElementById("progress-bar"); (5) Log them to verify: console.log("Found", checkboxes.length, "checkboxes"); (6) Save and refresh your browser, then check the Console tab. Do not remove the existing console.log.

Expected Result

When you open the browser console (F12), you see two messages: "Maintenance checklist script loaded!" and "Found 7 checkboxes". This confirms JavaScript can find all the checkboxes and the progress elements.

Troubleshooting

• If the console shows "Found 0 checkboxes", the querySelector could not find elements with the class "checklist-checkbox". Check that each checkbox in your HTML has class="checklist-checkbox".

Step 15

Add change event listeners to all checkboxes

Concept

Remember from Day 3 — addEventListener tells JavaScript to "listen" for events on elements. The "change" event fires when a checkbox is checked or unchecked. We loop through all checkboxes and attach the same listener to each one. When any checkbox changes, we call our updateProgress function (which we will create in the next step).

Apply

Add event listeners to all checkboxes that trigger when any checkbox changes.

Prompt

In my maintenance.js file, after the element selection code, add: (1) A comment: // Add event listeners to checkboxes. (2) A forEach loop that goes through each checkbox: checkboxes.forEach(function(checkbox) { checkbox.addEventListener("change", updateProgress); });. (3) Below that, add a placeholder function: function updateProgress() { console.log("A checkbox changed!"); }. Save and test by clicking checkboxes — you should see the console message each time you check or uncheck one.

Expected Result

Every time you click a checkbox (check or uncheck), the console shows "A checkbox changed!". This confirms the event listeners are working. The checkboxes still work normally — you are just detecting their changes.

Troubleshooting

• If nothing appears in the console when you click checkboxes, check that the forEach loop runs after the checkboxes are selected. The script must be at the bottom of the body so HTML loads first.

Step 16

Create the updateProgress() function that counts checked items

Concept

The updateProgress function is the core logic — like the flight computer that calculates based on inputs. It needs to: count how many checkboxes are checked, update the status text, and calculate the percentage. We use Array.from() to convert the checkbox list into an array we can filter, then .filter() to count only the checked ones.

Apply

Replace the placeholder updateProgress function with real counting and text update logic.

Prompt

In my maintenance.js file, replace the placeholder updateProgress function with this real version: function updateProgress() { const checked = Array.from(checkboxes).filter(function(cb) { return cb.checked; }); const total = checkboxes.length; const count = checked.length; progressText.textContent = count + " of " + total + " items checked"; }. Save and test — when you check boxes, the text below the progress bar should update from "0 of 7 items checked" to "1 of 7 items checked", "2 of 7 items checked", etc.

Expected Result

As you check and uncheck boxes, the text below the progress bar updates in real time. "0 of 7 items checked" changes to "1 of 7 items checked" when you check one, goes back to "0 of 7 items checked" when you uncheck it. The progress bar itself does not fill yet — that comes next.

Troubleshooting

• If the text does not update, make sure progressText was selected correctly (check the ID in HTML matches getElementById). Also ensure the function is called by the event listener.

Step 17

Calculate and display the completion percentage in the progress bar

Concept

To show a visual progress bar, we calculate a percentage (checked / total * 100) and set the width of the bar's fill element. In our CSS we used a ::after pseudo-element for the fill. Since pseudo-elements cannot be styled directly with JavaScript, we will use a CSS custom property (--progress-width) that the ::after reads. This is a common pattern: JavaScript sets a CSS variable, and CSS uses it.

Apply

Add percentage calculation and progress bar fill logic to the updateProgress function.

Prompt

In my maintenance.js file, inside the updateProgress function, add these lines after the progressText.textContent line: const percentage = Math.round((count / total) * 100); progressBar.style.setProperty("--progress-width", percentage + "%");. Then update the CSS: in maintenance.css, change the #progress-bar::after rule so width uses the variable: width: var(--progress-width, 0%);. Save both files and test. When you check boxes, the amber bar should fill proportionally.

Expected Result

The progress bar now fills with an amber color as you check items. Checking 1 out of 7 items fills about 14% of the bar. Checking all 7 fills it to 100%. The fill animates smoothly with a half-second transition. Unchecking items shrinks the bar back.

Troubleshooting

• If the bar does not fill, make sure the CSS variable name matches exactly: --progress-width in both JavaScript and CSS. Check that the ::after pseudo-element has position absolute.

Step 18

Show conditional messages based on completion status

Concept

Remember from Day 3 — conditional logic (if/else) lets your code make decisions. We want to show different messages depending on how many items are checked: "Not started" at 0%, encouraging messages as they progress, and a celebratory "All checks passed!" at 100%. This is just like pre-flight status indicators: red for not ready, amber for in progress, green for good to go.

Apply

Add if/else conditional logic to show different status messages based on progress.

Prompt

In my maintenance.js file, inside the updateProgress function, after the percentage calculation, add conditional logic. Create a variable let statusMessage = ""; then use if/else if/else: if count === 0: statusMessage = "Not started — begin your inspection"; else if percentage < 50: statusMessage = "In progress — keep going!"; else if percentage < 100: statusMessage = "Almost complete — final checks remaining"; else: statusMessage = "All checks passed! Aircraft cleared for service.". Then update progressText.textContent to: statusMessage + " (" + count + "/" + total + ")". Save and test by checking boxes at different levels.

Expected Result

The progress text now shows contextual messages. With no boxes checked: "Not started — begin your inspection (0/7)". With a few checked: "In progress — keep going! (2/7)". With most checked: "Almost complete — final checks remaining (6/7)". With all checked: "All checks passed! Aircraft cleared for service. (7/7)".

Troubleshooting

• If the message does not change, check that you used === (three equals signs) for comparison, and that the if/else chain is inside the updateProgress function.

Step 19

Change progress bar color based on completion level

Concept

Color-coded progress is intuitive — green means go, amber means caution, gray means not started. We use JavaScript to change the progress bar color by updating the CSS custom property that controls the bar's background color. The transition in our CSS makes the color change smooth.

Apply

Add color-changing logic to the progress bar based on percentage.

Prompt

In my maintenance.js file, inside the updateProgress function, inside the same if/else chain where we set statusMessage, also set a color variable. Add let barColor = ""; before the if/else. In each branch: if count === 0: barColor = "#e2e8f0" (gray). else if percentage < 50: barColor = "#d4880f" (amber). else if percentage < 100: barColor = "#2c5f8a" (blue). else: barColor = "#2d8a4e" (green). After the if/else, add: progressBar.style.setProperty("--progress-color", barColor);. Then update the CSS: in maintenance.css, change the #progress-bar::after background from var(--accent-amber) to var(--progress-color, var(--accent-amber)). Save both files and test.

Expected Result

The progress bar color changes with progress: gray when nothing is checked, amber when 1-3 items are checked, blue when 4-6 items are checked, and green when all 7 items are checked. The color transitions are smooth.

Troubleshooting

• If the bar stays the same color, check that --progress-color matches in both JavaScript and CSS. Make sure you are calling style.setProperty on the progressBar element.

Step 20

Add a "Reset Checklist" button with confirmation

Concept

A reset button lets users start over — like clearing a completed maintenance form for the next inspection cycle. The confirm() function shows a browser dialog asking "Are you sure?" before resetting. This prevents accidental resets. We also call updateProgress() after resetting so the UI updates immediately.

Apply

Add a reset button to the HTML and JavaScript to handle clearing all checkboxes.

Prompt

In my maintenance.html file, inside the .checklist-section, after the #checklist-container, add: <button id="reset-btn" style="display:block; margin:20px auto; padding:12px 24px; background:#dc3545; color:white; border:none; border-radius:6px; cursor:pointer; font-size:1rem;">Reset Checklist</button>. Then in maintenance.js, at the bottom, add: const resetBtn = document.getElementById("reset-btn"); resetBtn.addEventListener("click", function() { if (confirm("Reset all checklist items? This cannot be undone.")) { checkboxes.forEach(function(cb) { cb.checked = false; }); updateProgress(); } });. Save both files and test the reset button.

Expected Result

Below the checklist items, there is a red "Reset Checklist" button. Clicking it shows a confirmation dialog. If you click "OK", all checkboxes are unchecked, the progress text resets to "Not started", and the progress bar empties and turns gray. If you click "Cancel", nothing changes.

Troubleshooting

• If clicking the button does nothing, check that the button ID "reset-btn" matches in both HTML and JavaScript. Also make sure the event listener is added after the button element exists in the DOM.

Step 21

Add a safety notice section below the checklist

Concept

Safety notices are critical in aviation documentation — they draw attention to important warnings. We create a styled caution box with a yellow background and orange border (like a "CAUTION" placard in a maintenance hangar). The notice reminds users that this is a training project and lists important safety protocols.

Apply

Add a safety notice section with important maintenance warnings, styled as a caution box.

Prompt

In my maintenance.html file, after the checklist-section and before the closing </body> (but before the script tag), add a new <section class="safety-notice"> containing a <div class="caution-box">. Inside the caution box: (1) An <h3> with text "Important Safety Notice". (2) A <ul> with three <li> items: "This checklist is for training purposes only — always follow official maintenance manuals.", "Never sign off on maintenance tasks you have not personally verified.", "Report any discrepancies to your maintenance supervisor immediately.". Do not change existing content.

Expected Result

Below the reset button, there is a safety notice section with the heading "Important Safety Notice" and three bullet points about training-only use, verification requirements, and reporting discrepancies. The section is unstyled for now — just plain text with bullets.

Troubleshooting

• Make sure the safety notice section is inside the body but before the <script> tag. If it appears after the script, check your HTML structure for misplaced closing tags.

Step 22

Add a professional footer with safety disclaimers

Concept

A professional footer adds credibility — like the fine print on an official aviation document. It typically includes copyright, disclaimers, and identification. In HTML, the <footer> tag is the semantic element for this content. We keep it simple with a "For training purposes only" notice and a copyright line.

Apply

Add a footer element with safety disclaimers and a notice.

Prompt

In my maintenance.html file, after the safety-notice section and before the script tag, add a <footer class="page-footer"> containing: (1) A <p> with text "For Training Purposes Only — Not for Actual Aircraft Maintenance". (2) A <p> with text "Aviation Web Learning Lab — Built by Students, for Students". (3) A <p> with id="copyright" and text "2026 Aviation Maintenance Training Program". Do not change existing content.

Expected Result

At the very bottom of the page, below the safety notice, there is a footer with three lines of text: the training disclaimer, the project attribution, and a copyright line. The footer is unstyled for now — just plain text.

Troubleshooting

• Make sure the footer is the last content element before the <script> tag. The <footer> tag should not be inside any section.

Step 23

Style the safety notice, footer, and add a dynamic timestamp

Concept

The caution box needs distinctive styling so it stands out — yellow background, orange border, and a warning icon. The footer should be subtle and professional with smaller text. We also add JavaScript that shows the current date dynamically in the copyright line using the Date object, just like real maintenance logs show when they were last updated.

Apply

Add CSS for the safety notice and footer, plus JavaScript for a dynamic year.

Prompt

First, in maintenance.css, add these styles. Add comment /* Safety Notice */. Style .safety-notice: padding 20px; max-width 600px; margin 20px auto. Style .caution-box: background #fff8e1; border-left 4px solid #f57c00; border-radius 6px; padding 16px 20px. Style .caution-box h3: color #e65100; margin-top 0. Style .caution-box ul: margin-bottom 0; padding-left 20px. Style .caution-box li: margin-bottom 8px; color #4a5568. Add comment /* Footer */. Style .page-footer: text-align center; padding 20px; color #718096; font-size 0.85rem; border-top 1px solid #e2e8f0; margin-top 30px. Then in maintenance.js, at the bottom, add: const copyrightEl = document.getElementById("copyright"); if (copyrightEl) { const year = new Date().getFullYear(); copyrightEl.textContent = year + " Aviation Maintenance Training Program"; }. Save all files.

Expected Result

The safety notice now appears in a yellow caution box with an orange left border and the heading in orange. The bullet points are readable in gray text. The footer is at the bottom with smaller, gray text, a subtle top border, and the year dynamically shows the current year (e.g., "2026 Aviation Maintenance Training Program").

Troubleshooting

• If the year does not update dynamically, check that the copyright element has id="copyright" in HTML and that the JavaScript code runs after the DOM loads (script tag at bottom of body).

Step 24

Add a CSS media query for mobile screens

Concept

Remember from Day 2 — media queries apply different styles based on screen size. Maintenance crews might use phones or tablets to view checklists. At widths below 768px, we stack everything vertically, increase touch target sizes, and adjust font sizes for smaller screens. This makes the checklist usable on any device.

Apply

Add a responsive media query for screens under 768px wide.

Prompt

In my maintenance.css file, at the very bottom, add a media query: @media (max-width: 768px) { }. Inside it, add these rules: .hero h1 font-size 1.5rem. .hero padding 20px 16px. .info-card, .checklist-section, .safety-notice padding 16px. .check-item padding 10px. .checklist-checkbox width 24px; height 24px (larger for touch). .category-header font-size 1rem. .page-footer font-size 0.8rem. }. Save and test by resizing your browser window narrower than 768px or using browser DevTools mobile view (F12 > toggle device toolbar).

Expected Result

When you narrow the browser window below 768px (or use mobile view in DevTools), the heading gets smaller, padding reduces, checkboxes get larger (easier to tap on touch screens), and everything stacks nicely for a mobile screen. The page is now responsive!

Troubleshooting

• If nothing changes when you resize, make sure the media query is at the bottom of the CSS file (it needs to override earlier rules) and that the max-width value is correct.

Step 25

Final code review: ask Gemini to review the complete project

Concept

A code review is the final quality check — like the final walk-around inspection before a flight. You ask another developer (or in this case, Gemini) to look at your complete code for bugs, style issues, and improvements. This is a professional habit that all good developers practice. Be proud of what you have built — you combined HTML, CSS, and JavaScript into a real project!

Apply

Ask Gemini to review your complete Aircraft Maintenance Checklist project.

Prompt

Here is my complete Aircraft Maintenance Checklist project. I built this as my graduation project combining HTML (Day 1), CSS (Day 2), and JavaScript (Day 3). Please review all three files for: (1) Any bugs or issues. (2) HTML structure quality — semantic tags, accessibility. (3) CSS organization and consistency. (4) JavaScript logic — any edge cases I missed? (5) Suggestions for improvement. Be encouraging — I am a beginner! [Paste your maintenance.html code] [Paste your maintenance.css code] [Paste your maintenance.js code]

Expected Result

Gemini should review your complete project, point out any issues, and suggest improvements. Apply any fixes that make sense. Your Aircraft Maintenance Checklist is now complete — a professional-looking, responsive, interactive web application that tracks inspection progress with color-coded feedback!

Troubleshooting

• When pasting code to Gemini, make sure to include all three files (HTML, CSS, JavaScript) so the review covers the complete project. If the response is too long, ask Gemini to focus on the top 3 most important improvements.