Week 5: Hangman

To Do This Week

Work on Interactive Website.

Project 1: Interactive Website (5%)

This first assignment brings together syntax, variables, conditionals, arrays, functions, and loops in JavaScript. Start with a simple idea for a website, just the basic elements and their interactions, and describe it in English. Use the Custom JS Mentor app to work out the logic steps based on your description and the line-by-line syntax. The site should be designed with CSS, but the majority of grading will be based on your documentation in GitHub of building a simple but dynamic website with user interaction that changes content on the page.

Suggested Ideas:

Interactive Quiz
Dynamic Media Gallery
To-Do List
Customizable Timer
Generative or Digital Art Work
Branching Narrative

Working with JS Mentor:

Describe your idea and layout for HTML structure.
Detail your JavaScript steps in plain language.
Develop the logic steps.
Start coding with the GPT’s guidance.
Iteratively refine and troubleshoot.

Project 2: Hangman Game (5%)

Design a Hangman game using JavaScript, HTML, and CSS. Start with the in-class Logic Steps and the use JS Mentor to work of syntax for JavaScript. The goal of this pproject is to understand the logic steps required for the game, to get experience translating logic steps into syntax, and then to style your game with CSS and to showcase how JavaScript interacts with HTML elements. Add a visual hangman figure using HTML, and control visibility with JavaScript. Get creative with your style and theme!

Hangman Project Steps

Work out the logic steps for Hangman.
Set up HTML
Begin JS syntax with JS Mentor
Test at each stage
Add JS to change CSS display of the hangman
Design with CSS your own themed hangman game.

Download this file for the exercise.

Hangman Demo

In-Class Work: The Hangman Logic Steps

What are the main action and processes of Hangman?

What is the user doing? (clicking buttons, typing text, choosing options)
What changes on the page when they interact?
What needs to be stored?
What is the “win,” “result,” or “end state” of the experience?

Write the Logic in Natural Language (Numbered Steps)

Write the program logic as a numbered list, ideally grouped in the function areas. Each line should be one clear action or decision. Avoid code words at first—just describe what happens.

Set-up: What are the HTML/DOM elements? What variables and arrays are need?
Start state: what does the page show when it loads? What processes are needed to start the game?
Inputs: what does the user provide (click, input text, choice)?
Process: what does the program calculate, compare, or decide?
Output: what changes appear on the page?
Repeat or End: what happens again until the game stops? What needs to be checked?

Add the numbered list of logic steps as commented-out text at the top and inside the script tag.

Mark the Steps That Need Variables, Conditionals, Arrays, Loops, and Functions

Take your numbered steps and label them using simple tags:

[LET/CONST] stored variable for DOM elements as well as values that are tracked in the game?
[ARRAY] what lists or potential (empty) lists are needed
[FUNC] what stored steps are going to be used multiple times in the game? Remember that funtion can be called within other functions.
[IF] a decision tree (if correct, if count is 0, if something matches) for responses to certain checked conditions.
[LOOP] repeated actions, to check an array for example

NOTE: Your Hangman game will likely need to use the following JavaScript actions:

Math.floor() / Math.random() — select a random word from an array
secretWord.split("") — turn a word into an array of letters
shownWord.push("_") — add underscores to build the hidden word array
input.value — get the letter typed by the user
shownWord.join(" ") — combine array into spaced string for display
triedLetters.join(", ") — display guessed letters as a comma list

As you label your steps, think carefully: Is this storing data? Repeating something? Making a decision? Updating the screen? That thinking process is more important than the final syntax.

Translate to “Code-Like” Pseudocode

Rewrite your steps so they sound closer to code, but still readable. Use short lines that map cleanly into JavaScript later.

Example: “Set score to 0.”
Example: “When user clicks Submit, check answer.”
Example: “If answer is correct, add 1 to score.”
Example: “Show the next question.”

JS Mentor

JS Mentor is a Custom GPT created for this class. Think of it like your personal JavaScript tutor — it helps you learn by guiding you step by step (without jumping straight to the full solution).

How we’ll use it for the Hangman assignment:

Build the Logic as a Class (First)
In class, we will write the Hangman logic steps together and label each step with JS terms (variables, arrays, conditionals, loops, and functions).
Translate Steps into Syntax (You + JS Mentor)
After class, you will take your numbered steps and turn them into JavaScript one line at a time. Use JS Mentor to help you convert each step into correct syntax. If you get stuck, ask for a hint.
Work Function-by-Function
Focus on one function area at a time (Start Game, Guess, Update Display, Check Win/Lose, Reset). Get each function working before moving on to the next.
Test as You Go
After adding a new line or small block of code, run the game and check what changed. If something breaks, use JS Mentor to help you debug by describing what you expected vs. what happened.
Goal for Next Class
Arrive with a complete, very basic working Hangman script: it can pick a word, accept guesses, reveal letters, track tried letters, count guesses left, and detect win/lose.

Coming next:

Add a hangman visual that builds as wrong guesses increase.
Improve the CSS design (aim for a simple theme that matches your word list).

Function Areas


     A) startGame()  // setup a fresh round

     B) guessLetter()  // handle the user's action (click or Enter)

     C) updateGameState(letter)  // modify the core game data based on the guess

     D) updateDisplay()  // reflect current state in the UI

     E) checkWinLose()  // determine end conditions

     F) resetGame()  // start over

Function Areas & Logic Steps


SET-UP (Before the game starts)
1. Create an array of possible words (wordsArray).
2. Store DOM elements in variables (so you can update the page):
   - wordDisplay (where the underscores/letters show)
   - message (where feedback shows)
   - lettersTriedDisplay (where tried letters show)
   - remainingDisplay (where guesses left show)
   - input (text box for the letter)
   - guessBtn (Guess button)
   - resetBtn (New Word / Reset button)
3. Create game-state variables (values that will change during play):
   - secretWord (string)
   - secretLetters (array)
   - shownWord (array)
   - triedLetters (array)
   - guessesLeft (number)
4. Connect event listeners:
   - guessBtn click -> guessLetter()
   - resetBtn click -> startGame()
   (optional) input keydown Enter -> guessLetter()

A) startGame()  // setup a fresh round
1. Pick a random secret word from a list.
2. Split the word into a letters array.
3. Create a revealed array of underscores (same length).
4. Reset letters tried and guesses left.
5. Update the display (initial state: underscores, guesses, tried list cleared).
6. Clear input and focus the input box.

B) guessLetter()  // handle the user's action (click or Enter)
1. Wait for user click or Enter key.
2. Read the single letter from input.
3. Validate it is a–z and only one character.
4. If already tried, show message and stop.
5. Add letter to letters tried.
6. Call updateGameState(letter).
7. Call updateDisplay().
8. Call checkWinLose().
9. Clear input and focus for the next guess.

C) updateGameState(letter)  // modify the core game data
1. Loop through the secret letters array.
2. If letter matches, reveal it in the shownWord array.
3. Track whether at least one match was found.
4. If no match, subtract one from guessesLeft.

D) updateDisplay()  // reflect current state in the UI
1. Show shownWord (with spaces between letters).
2. Show triedLetters (as a comma list).
3. Show remaining guesses.
4. Show any status messages.

E) checkWinLose()  // determine end conditions
1. If shownWord.join("") equals secretWord, player wins.
2. If guessesLeft equals 0, player loses (show the word).
3. If win or lose, disable input or Guess button.

F) resetGame()  // start over
1. Clear input field.
2. Clear messages.
3. Call startGame() to begin a new round.

Get GitHub Account & Download GitHub Desktop

Watch this video for assistance: Git, GitHub, & GitHub Desktop for beginners

Sign-up or Sign-in to a GitHub account.
Install & Sign In Download GitHub Desktop and install it. Sign in with your GitHub account.
Create a Repository Go to File → New Repository. Choose a name like "DTC477" and a local folder that just holds your class projects. Click Create Repository.
Add Project Files You will be adding all class project folders and files to this local folder (you will also upload projects to your server!). GitHub Desktop will detect automatically all new folders and files in this local folder you set up. For now, add a test file to this local folder.
Commit Changes After adding a file or folder, review the changes in GitHub Desktop. Write a short summary message (e.g., “Initial commit”). Click Commit to main.
Publish to GitHub Click Publish Repository. Choose Public or Private. Click Publish. Your project is now on GitHub.com.
Make & Push Updates Edit files as needed. Return to GitHub Desktop, write a commit message, commit, then click Push origin to update GitHub.
Check on GitHub.com Go to your GitHub repository online. You’ll see your files and commit history.