Run and Inspect the Starter

Before implementing anything, establish a known-good starting point.

1. Download the starter

Use the prepared starter project:

Download the starter project from GitHub

Unzip it and open the folder in your editor. The course package also contains the same prepared starter as starter.zip for local use.

2. Run the page

Open index.html in a browser. You should see the complete SecureGen interface: password output, strength area, length slider, four character cards, Generate button, Dice Mode button, history panel, privacy card, theme control, and Tips control.

Do not change the HTML or CSS. The UI is the fixed starting point for the entire course.

3. Inspect app.js

The starter already provides:

• $() for getting elements by ID
• DOM references such as output, lengthRange, and generateButton
• the sets object containing uppercase, lowercase, numbers, and symbols
• the length-slider listener that keeps the visible number synchronized

Everything else will be added gradually.

4. Establish a baseline

Click the visible controls and notice which ones do not yet have their completed behavior. Open the browser console and confirm there are no startup errors.

Make a short note of the controls you expect to become functional. You will use that list as a checklist throughout the course.

Test

Reload the page twice. The layout should remain stable, the slider should move, and the console should not report an error.

Checkpoint

You have a clean running starter, know that app.js is the implementation file, and have a clear baseline before writing application logic.