Interactive Frontend Development Milestone Project - Code Institute
The layout of the game (or what users see on screen) was designed using HTML. CSS was used to create the colours of the boxes and to change the colour of the stopwatch from green to orange to red. The stopwatch function was created with Jquery The game was programmed using JavaScript
- HTML
- CSS
- JavaScript
- jQuery
This game can be further developed by creating different levels to make it more difficult for the user to completed. A shorter count of just 20 seconds is one option or a bigger game of 16 squares is another.
This game was tested across multiple browsers including Chrome, Opera, Internet Explorer, Firefox and on multiple movie devices including iPhone 4, 5, and 7. Also on Samsung and Xaomi to ensure compatibility and responsiveness.
The game is hosted using GitHub pages, deployed directly form the master branch. The deployed site will update automatically upon new commits to the master branch. In order for the site to deploy correctly on GitHub pages, the landing page must be named index.html The game is in a Repository that is called InteractiveMilestoneProject and within this folder there are 2 other folders and a file. This file is called index.HTML and the first folder within is called CSS, inside this there is a file called Style.css. The second folder is called JS and inside this is a file called Script.js.
The frame with the squares was complete by me from a previous web development course exercise.
The stopwatch with its colour changes were coded from inception using JQuery.
I took the idea for this game from the module list of recommend ideas for project.