Giter Club home page Giter Club logo

trrapp12 / slap-happy Goto Github PK

View Code? Open in Web Editor NEW
1.0 2.0 0.0 9.99 MB

Game of Hangman built with JavaScript. Correctly applies functions, conditionals, loops, arrays. Properly sequences JavaScript statements. Changes the DOM based on application state (win/loss, valid/invalid guess). Selects a random word from a dictionary of words. Displays all previous guesses on the user's screen, a visual indication for each letter's placement in the word, and the number of turns remaining. Decrements the number of turns remaining. Includes a GitHub Repo url, containing an index.html, one or more CSS files, one or more JavaScript files (e.g. js/main.js).

CSS 47.52% HTML 19.61% JavaScript 32.87%
javascript loops-and-iterations array-manipulations webapp

slap-happy's Introduction

Slap Happy

Contributors: Trevor Rapp

all work is completely my own



View Project


slaphappy



HTML5

CSS3

JavaScript



DESCRIPTION:


Lt. Jake 'Hangman' Seresin: [after destroying the plane that almost killed Maverick and Rooster] Good afternoon, ladies and gentleman, this is your savior speaking. Please fasten your seat belts, return the tray tables to their locked an upright positions and prepare for landing. Bradley 'Rooster' Bradshaw: Hey, Hangman, you look good. Lt. Jake 'Hangman' Seresin: I am good, Rooster. I'm very good. I'll see you back on deck.

-- Hangman, Top Gun: Maverick


The game of hangman revisited.



QUICKSTART GUIDE

  1. The app starts by choosing a random word
  2. The player can guess a single letter at a time
  3. The player has a fixed number of turns in which to guess all of the letters in the word
  4. The app should indicate when the player has won or lost


PROJECT DEMONSTRATES THE FOLLOWING

  • Correct use of functions, conditionals, loops, arrays.
  • Properly sequence JavaScript statements.
  • Change the DOM based on application state (win/loss, valid/invalid guess).
  • Select a random word from a dictionary of words.
  • Display all guesses on the user's screen so the user knows what letters he/she has already guessed.
  • Display a visual indication for each letter in the word.
  • Display the number of turns remaining.
  • Decrement the number of turns remaining.
  • Display letters guessed in the position that they are contained in the word.
  • Include a. GitHub Repo url, containing at least: b. index.html c. One or more CSS files (e.g. css/main.css) d. One or more JavaScript files (e.g. js/main.js)


CHALLENGES I OVERCAME

  • Use JavaScript to trigger audio on state changes(i.e. win/lose).
  • Use onclick functionality to start game.
  • Incorporate video into CSS.
  • Refactor with @media query to make mobile ready
  • Responsive design


MY OWN PERSONAL CONTRIBUTIONS INCLUDED:

  • all work is completely my own. The only directions were user stories the assignment needed to complete.


ATTRIBUTIONS:

Project created by TREVOR RAPP



YOU CAN FIND ME AT:

*For more information see my LinkedIn or return to my Github

slap-happy's People

Contributors

trrapp12 avatar

Stargazers

 avatar

Watchers

 avatar  avatar

slap-happy's Issues

Feature: number display

  • Create a feature to display numbers of guesses and subtract it for how many guess you get wrong to display how many tries are left

User Experience: list of rules

  • user should get a list of rules to know how to play the game
  • rules should appear before they start playing the game
  • rules should state how many tries they have
  • rules should state if a turn is counted against them if they get it right/wrong
  • user should have a way of knowing how many turns they have left

CSS: letter's guessed box

  • Letter's guessed box should extend further across, or numbers should appear in a list. Do not make it so you have to get a scroll bar to see all the letters at once.

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.