JavaScript Hangman App Project

Hosted Project

JavaScript Hangman App Project (Hosted on Github Pages)

Source Files

https://js-beginners.github.io/hangman-ajax-app/ (Hosted on Github)

Project Objective

The objective of this JavaScript project is to create a hangman puzzle game that uses the JavaScript Fetch API to retrieve new puzzles from the given API endpoint.

JavaScript Used

• DOM manipulations
• conditionals
• eventListeners
• CSS style manipulations
• functions…
• …pretty much all of the language

My Personalize Summary

This is project number 3 in Andrew Mead's The Modern JavaScript Bootcamp course.

The project itself isn't bad if you simply create it using the XMLHttp request object. But, the solution in the project hosted on github uses the Fetch API along with ASYNC/AWAIT. Both are relatively new to the language and are built on Promises.

If you are unfamiliar with JavaScript Promises, you can simply build the project with the XMLHttp Request object. Otherwise, I highly recommend learning about Promises and the Fetch API on YouTube or through Andrew's course. In Andrew's AJAX section, he does a great job introducing each AJAX type sequentially.

He goes from the XMPHttp Request API with callbacks, to Promises, to Fetch, and then finally to the ASYNC/AWAIT modern day method.

New Things Learned or Refreshed

As stated above, Andrew goes through each of the ways one can request data from an endpoint. In this project specifically, I learned how to use the modern day Async and Await functions of JavaScript.

I see myself going through this section of Andrew's course again, though. I search around on YouTube last night but I can't confidently say I found anyone as good as Andrew who explained this seemingly complex topic.

Time to Code

I can't really time this project since it was a follow-along that also including lots of stopping and starting.

Your Turn!

What To Accomplish

1. Download the source code from the github repository above.
2. Delete the contents of the app.js and other JavaScript files.
3. Implement the JavaScript code in your own files.
4. If you think you need to see a video solution first, be sure to pick up Mead's Modern JavaScript course.
5. Add a link to your finished project below!

What You Should See

Visit the hosted github page to see this JavaScript Hangman App Project in action.

Need to see the video solution for this project? Get Andrew's The Modern JavaScript Course Now!