Giter Club home page Giter Club logo

javascript-portfolio-project's Introduction

Noughts & Crosses Game

image

For my Milestone Project 2 I decided to create a simple Noughts & Crosses game, that two people can play.

The game can be play on either desktop, tablet or mobile screens. Visit the webpage here: https://michaelletson.github.io/JavaScript-Portfolio-Project/

Who is the website for and its purpose?

The webpage is for two people looking to play a simple game of Noughts and Crosses. It is not a complicated game, therefore the webpage should be clutter free and enable the user to play with ease, and be able to play immediately.

User stories

  • To play a game of multi player noughts and crosses with ease.
  • Simply be able to use/nagivate the webpage.
  • To know who (player X or O) has won.

Fullfillment

  • Simple layout with message to state the game is multi-player.
  • A layout free of clutter to not distract the user from it's simplicity.
  • Only allow simple functions, of resetting the game.

Owner and improvements

  • The game own/designer could explore a option of playing against the computer.
  • The game own/designer could also explore the option of having a difficulty range for the computer player option.
  • The game could also include some more visuals, such as animations upon tile selection, and announcing the winner.

Testing

  • Website tested on Chrome, Edge, Samsung internet.
  • Moblie, Tablet and Laptop have all tested the website with no visual errors and maintains functionality.
  • Used Chrome Dev Tool to test site, including when testing styling for media queries and also looking at JavaScript code to ensure efficiency and look for errors.
  • The game was stress tested manually.
  • Console logs were carried out to ensure the code was efficiently running (checked in dev tools).

User stories - Tests

  • To play a game of multi player noughts and crosses with ease -> Manually testing the front end deployment of the site to ensure the code works in creating a multi player function and that it is user friendly.
  • Simply be able to use/nagivate the webpage -> Asked friends and family to try out the page, took feedback and made amendments where necessary.
  • To know who (player X or O) has won -> Manually tested functionality of code that displays the winner message, and ensured efficiency.

HTML Validator

The HTML code bounced just one error which was a stray element which was removed, the only result now is some warnings which can be overlooked as thsoe elements, should they not result with errors, are needed for CSS styling and JavaScript functionality. Validated at https://validator.w3.org/nu/

CSS Validator

CSS code passes through validator with no erros. Validated at https://jigsaw.w3.org/css-validator/

JavaScript Validator

JavaScript code checked and validated via https://jshint.com/

Lighthouse Report

image

Deployment

To deploy website, I followed the below steps on Github.

  • Go to 'Settings' in repository
  • On 'Source' of 'GitHub Pages', select 'Main' for Branch and click save
  • The website is now published on GitHub Pages and the link is provided on on the same section

Using Git

I created a respository and opened in gitpod to create my code. To move my code from gitpod to repository ready for deployment I followed these steps (which I did often to show a journey of creating my site):

  • git add .
  • git commit -m "message"
  • git push
  • git pull --rebase

Final notes

During the beginnign of this project I was struggling with understanding my own code, I was searching and looking at resources to come up with the best solution, and part way through realised I had gotten too confused, and went in search for a more streamlined approach for my code, something easier to understand with simpler logic. After some reseacrh for inspiration I restarted my code part way through and feel I developer a much better webpage due to the change.

javascript-portfolio-project's People

Contributors

michaelletson 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.