Giter Club home page Giter Club logo

word-guessing-game's Introduction

Word Guessing Game

Word guessing game is for everyone who are curios and quick performer. they can play this game simply by filling the given blank squer with requierd word according to thier own intuitive and guesses. the user will be ask for example to fill in the blank a city of ireland wich incoporate 4 words, if they guess accordingly and write down the exact work they will pass the game if not they will bw failed.

Word guessing game is developed in purpose to improve memory and has a memory boosting fuction.

image

Features

Existing Features

There are many feature available in this app that can help the player to guess faster and better like:

  • Hint The Hint option provides a clue to guess accodingly.
  • Remaining Guess The Remaining Guess show the chance of making wrong guess.
  • Worng letter Worng letter option which assist player to avoid wrong guess.
  • Reset Button The Reset button , it restart the game.
  • Answer Another features is that when the game is over the answer will appear on inputs squer.

image

Features Left to Imlement

When there is time ,I'd like to expand this Game to include player score and timing.

Testing

  • I tested that this game works in different browsers : Chrome , Firefox , Safari .
  • I confirmed that this project is responsive , looks good and functions on all standard screen sizes using the devtools device toolbar .
  • I confirmed that the reset button works correct.

Note: This game has been written with Javascript knowledge I possess at this moment in time. I am, aware that there might be more better ways/functions I could use, so I'm planning on revisiting this at a later stage when I have a better and more in-depth grasp of the subject.

Bugs

Solved Bugs

  1. When I deployed my project on Github page , I discovered there are few errors on console that caused every time the page loads I see the unstyled content for a split-second, then everything settles in.
  • I discovered the flash of unstyled content was in Firefox only. I'm not seeing this issue in any other browser that I've tested - IE, Chrome, Opera .. I just add few lines of code on the head of html file.

      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Spinnaker&display=swap" rel="stylesheet">
    
  1. When I deployed my project on Github page , I noticed that there is also another error in console because I had forgotten to add favicon, however this error didnt affect the application proformance but I added it just in case to not have any errors in console.
  • I just added this line of code in the head of html file.

      <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    

Validator Testing

HTML

  • No errors were returned when passing through the official W3C validator.

html report

CSS

  • No errors were found when passing through the official (Jigsaw) validator.

css report

JS

  • No issues were found through JS Hint.

JS report

Lighthouse

The page achieved great performance.

report

Libraries & Programs

- Github, to store my repository
- Gitpod, to create my project files
- Google Fonts, for my font family 'Source Sans Pro'
- Favicon, for my project icons
- Am I Responsive?
- Dev Tools, to ensure the site looked good across different devices

Unfixed Bugs

No unfixed bugs have been found.

Deployment

The site was deployed to GitHub pages. The steps to deploy are as follows:

In the GitHub repository, navigate to the Settings tab. On the left-hand side under ‘Code and automation’, select ‘Pages’ and from the source section drop-down menu, select the Main Branch. Once the main branch has been selected, the page will be automatically refresh with a detailed ribbon display to indicate the successful deployment. The live link can be found here Word Guessing Game

Credits

For JavaScript issues I encountered these sites have been used for reference:

Media

  • Background image have been taken from Pexel site.
  • Image for favicon taken from iconfinder

word-guessing-game's People

Contributors

sediqa01 avatar

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.