Giter Club home page Giter Club logo

hangman's Introduction

Purpose of the project

  • Creating a hangman game to develop javascript skills. This will be achieve by using the most common actions, iterated through objects, flow control and using OOP principles, etc..

User stories

Features

  • Able to select the source of the challenge (Movies or books)
  • Keep track of the letter used.
  • Keep track of the number of lives left.
  • Able to play as many times as desired by clicking in the Play again button.

Future features

  • Adding more sources of challenge, ie: Books, Series, etc..
  • Moving hint to a future release Issue16

Typography and color scheme

  • I have decided for a grey and back colours for the game for accesibility and rather than use plenty of graphics I wanted something that could load quite easily and didn't have troubles with responsiveness.
  • Background colour : rgb(228 226 226);
  • Font colour: #151515;

Wireframes

  • Wireframes for the project can be found HERE.

Technology

  • CSS
    • CSS was used to sytle the page. We are using a external CSS file to style the pages.
  • HTML
    • The website was build using HTML.
  • Javascript
    • Javascript was used to build the logics and code the game. It was also used to manipulate the DOM using CSS
  • Github
    • Github was selected as the version control.
  • Balsamiq Desktop
    • This was used to create the wireframes included in this readme.md

Testing

  1. Code validation

    • CSS validation
      • CSS validation wihtout errors. Report HERE
    • HTML Validation
      • No Error found. Report can be found HERE
    • Lighthouse mobile report HERE Desktop report HERE
    • JavaScript Validation using JShint. No errors were founds HERE

  2. Test Cases

    1. A visiting user wants to play hangman.

      • User navigate to the live Hangman site HERE.
        • Expected result: The welcome page will be displayed.
        • Test successful. Page displayed correctly results Mobile Here Desktop Here

    2. A visiting user can choose the type of challenge to play in hangman.

      • User click in the movies or comic buttons located in the welcome page.
        • Expected Result: The buttos will disappear and the game will start with the correct source for the challenge Movies or Comics
        • Test successful. Selection buttons disappeared and the game stars. Results Mobile Here Desktop Here

    3. A visiting user click in the interactive keyboard to guess the challenge.

      • User click in the interactive keyboard.
        • Expected Result:
          • The key pressed will change the background colour
          • If the key letter pressed is present in the challenge it will change from a dash to the clicked key letter.
          • If the key letter is not present one live will be deducted and the hangman drawing move forward 1 step.
        • Result successful:

    4. A visiting can play as many games as they want by clicking in the play again button.

      • Once the lives reached 0 or the challenge is resolved a pop up will present the user with a play again button.
      • Expected Result:
        • The user will click in the play again button.
        • The page will reload directing the use to the welome page to choose the challenge source
        • Clicking in the challenge source will start a new game.
      • Result Successful

  3. Fixed bugs

    • Issue23 Add else statement to IF loop inside newGame Function for error handling.
    • Issue 24 Code refactoring to improve readability and fix bug introduced in issue #23.
    • Issue 25 Prevent to click again if the key has already being clicked.

  4. Supported screens and browsers

    • Iphone 6,7,8
    • Ipad Pro
    • Macbook pro 13inches.

Deployment

  • Github pages
    • Github pages is the selected method to deploy this site.
      • To deploy this site to the internet follow the steps below:
        • Navigate to project repository
        • Click in Settigs at the repository navigation bar.
        • In Code and Automation click in Pages
        • Under Source select Main or the correct branch and click in save.
        • The website will take a few minutes to be live.
        • A 404.html was created to handle browsers error.
  • Gitpod
    • Gitpod can be used to deploy the site locally for testing purposes. To deploy the site follow the steps below:
      • Navigate to project repository
      • Click in the Gitpod button in the right.
      • This will launch the workspace in Gitpo. Select use browser or local VS Code Studio.
      • Navigate to the terminal, at the bottom by default, and enter the following command: python3 -m http.sever
      • Enter the following URL in your browser http://localhost:8000/ . By default gitpod uses port 8000

Credits

hangman's People

Contributors

rfpotrero avatar

Watchers

avatar

Forkers

code-institute-submissions

hangman's Issues

Add else statement to IF loop inside newGame Function for error handling

function newGame(sourceType) {
// The below block re-Style the page after the user selection.
document.querySelectorAll('.selection').forEach(function (hide) {
hide.style.display = "none";
});
document.querySelector('.box-graphic').style.height = "30em";
document.querySelector('.box-graphic').style.width = "25em";

livesNumber = 10;
hangmanParts = 0;
document.getElementById("number-lives").innerHTML = `<span>${livesNumber} lives left</span>`;

document.getElementById("draw-graphic").innerHTML = '<img style="height:100%;width:100%;" src="assets/images/hangmanDrawing/0.jpg" />';

if (sourceType === "Movies") {
    document.getElementById("phrase-selection").innerHTML = `<h2> You have selected the ${sourceType} category </h2>`;
    let challengeRandomIndex = getRandomInt();
    let challengeTitle = SOURCE_MOVIES[challengeRandomIndex];
    generateChallenge(challengeTitle);
    interactiveKeyboard(challengeTitle);
} else if (sourceType === "Comics") {
    document.getElementById("phrase-selection").innerHTML = `<h2> You have selected the ${sourceType} category </h2>`;
    let challengeRandomIndex = getRandomInt();
    let challengeTitle = SOURCE_COMICS[challengeRandomIndex];
    generateChallenge(challengeTitle);
    interactiveKeyboard(challengeTitle);
}

}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.