{"id":34730994,"url":"https://github.com/tgaff/angular_hangman_lab","last_synced_at":"2026-01-20T17:20:33.998Z","repository":{"id":149220452,"uuid":"51028758","full_name":"tgaff/angular_hangman_lab","owner":"tgaff","description":null,"archived":false,"fork":false,"pushed_at":"2016-02-09T19:50:34.000Z","size":122,"stargazers_count":0,"open_issues_count":1,"forks_count":41,"subscribers_count":0,"default_branch":"master","last_synced_at":"2023-03-30T17:02:58.136Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tgaff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-03T20:36:18.000Z","updated_at":"2023-04-29T23:02:05.486Z","dependencies_parsed_at":"2023-04-29T23:24:16.822Z","dependency_job_id":null,"html_url":"https://github.com/tgaff/angular_hangman_lab","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"purl":"pkg:github/tgaff/angular_hangman_lab","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tgaff%2Fangular_hangman_lab","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tgaff%2Fangular_hangman_lab/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tgaff%2Fangular_hangman_lab/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tgaff%2Fangular_hangman_lab/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tgaff","download_url":"https://codeload.github.com/tgaff/angular_hangman_lab/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tgaff%2Fangular_hangman_lab/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28607626,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T16:10:39.856Z","status":"ssl_error","status_checked_at":"2026-01-20T16:10:39.493Z","response_time":117,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-12-25T02:57:25.054Z","updated_at":"2026-01-20T17:20:33.983Z","avatar_url":"https://github.com/tgaff.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cpre\u003e\n_________\n|/      |                               _\n|      (_)       __ _ _ __   __ _ _   _| | __ _ _ __\n|      \\|/      / _` | '_ \\ / _` | | | | |/ _` | '__|\n|       |      | (_| | | | | (_| | |_| | | (_| | |\n|      / \\      \\__,_|_| |_|\\__, |\\__,_|_|\\__,_|_|\n|                           |___/\n|___                                        hang-man\n\u003c/pre\u003e\n\n# Purpose\n\nThis lab is a chance to use the skills you've developed so far and play with angular.\nYou'll be making an in-browser [hang-man game](https://en.wikipedia.org/wiki/Hangman_(game)).\n\nMuch of the game code is provided for you.  We won't concern ourselves with drawing the\nhang-man itself.\n\n## Concepts\n\n* ng-model\n* angular controllers\n* ng-repeat\n* ng-change\n* object oriented javascript\n\n# Getting started\n\n1. clone this repo (or fork \u0026 clone)\n1. open index.html and app.js\n1. open hangman.js and read it's contents\n\n\n### hangman.js\n\nMost of the game code itself has been given to you.  Let's check it out using dev tools.\nOpen index.html and in the browser console try the following:\n\n```js\nhangman = new HangmanGame('test');\n```\nYou should have a new instance of a game. Now try running:\n\n```js\nhangman.guess('x');\nhangman.guess('t');\nhangman.checkGameWinStatus();\n```\n\nNote what is returned, and what changes on `hangman`.  You'll use this inside your angular controller.\n\n\n### Step 1: angular\nLet's get angular setup in our app.  \n\n* add `data-ng-app` in the appropriate location\n* add your controller using `data-ng-controller=hangmanController as hangman`\n* in `app.js` add your controller to the angular module at the top\n  * note that an initial function for the controller is provided for you\n\nIf this went OK, then when you refresh you should see the `console.log`\nstatement from the controller and the `Controller:` status in the lower left should\nbe a check-mark.  If it's an `X`, things are partially working.  If empty, angular is not setup.\n\n\u003cdetails\u003e\u003csummary\u003eHint:\u003c/summary\u003e\n```html\n\u003chtml data-ng-app='hangmanApp'\u003e\n....\n\u003cdiv class='container' id=\"container\" data-ng-controller='hangmanController as hangman'\u003e\n```\n```js\nangular.module(\"hangmanApp\", [])\n  .controller('hangmanController', hangmanController);\n```\n\u003c/details\u003e\n\n### Step 2: display game properties\n\n* in the controller instantiate a new game instance and store it: `new HangmanGame('elephant')`\n* `HangmanGame` provides `guesses`, `completedWord` and `triesRemaining` properties.\nAdd these in the appropriate parts of the html using `{{ }}` syntax.  Get the values from the hangmanGame to display on the page.\n  * You might not be able to see the guesses until you make some.  We don't have\n  an interface for that yet, but we can add a couple of guesses right in the controller\n  Try calling `SOMETHING.guess('f')` inside the controller.  `console.log as needed`\n  * Note: `completedWord` is a string containing guessed characters that match, in their\n    correct positions.  E.g. if you guessed 'b' and 'r' for 'rabbit', it shows: 'r_bb__'\n\n\nIt should look something like this once you've got it:\n![after step 2](assets/after_step2.png)\n\n\n### Step 3: user input\n\n* use `ng-model` to track the input field's value\n * you can display it on the page somewhere if you want to verify\n* use `ng-change` to call a function when the input changes\n  * write a function in your controller for this\n  * for now you can just console.log the value of the input\n    * make sure to make the function publicly available on a controller instance\n      * e.g. `this.checkGuess = yourFunctionName`\n  * the input should be cleared after each character is typed\n\n### Step 4: winning\n\n* check guesses using `HangmanGame#guess`\n* add some logic in your controller to check if the player has won or lost\n* alert them or find another way to let them know\n\n### Step 5: looking better\n\nThat array on the page is kinda ugly.  Let's fix it.\n\n* change the array to display using `ng-repeat`\n* improve the looks of anything else as desired\n\n### Challenges\n\n* find a way to restart the game after win/lose\n* when starting the game use a random word from a list of words\n* should it be case insensitive?\n* keep score.\n* TOUGH: listing \"X tries remaining\" is boring: develop a way to visualize the drawing of the hangman as the game progresses\n\n\n# Sample\n\n![screenshot](assets/screenshot.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftgaff%2Fangular_hangman_lab","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftgaff%2Fangular_hangman_lab","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftgaff%2Fangular_hangman_lab/lists"}