This project is a website where users can generate a love letter to their loved one.
EXPLAIN OTHER MAIN FEATURES HERE
DESCRIBE COLOUR SCHEME AND LAYOUT BRIEFLY
PICTURE of Main Page on all devices
Link to deployed site
This is joint project for the February 2024 Hackathon with Code Institute. Below are links to all authors' GitHub profiles:
Carl Ellis
Mohamed Ayman
Emmanuel Oluwadare
Diarmuid Henry
Theresa Wolff
Ahmad Jawed Hazrati
Kate McGuane
- Introduction
- Aim
- Potential Users
- Design & Development
- Technology & Resources
- Deployment
- Issues/Bugs
- Testing & Validation
- Future Improvements/Development
- Acknowledgments
- Generate a letter: The primary goal of users engaging with the website game is to write a love letter.
Create a simple, engaging Rock Paper Scissors Lizard Spock game site, including single and multiplayer experiences with user-friendly accessibility.
Include a Player v Player, as well as a Player v Computer part to the game. Use clear images to help show the user results, as well as to guide them through the process of the game.
A Home page where user/s can either choose to read instructions, or they can choose to start a game. Once they choose which game to start, they are guided through each round by messages and icons appearing on screen determined by their choice and either their friend's choice or the computer's choice, depending on the game. Once the game has been won/lost, the user returns to the Home screen, where the result is clearly shown, and they can start another game.
A simple title and 3 buttons(Instructions, Play against the computer and Play against a friend) appear when the pages loads. As gameplay commences, icons clealy representing the 5 choices appear for the user/s to choose from. All choices chosen are clearly shown, and results are clearly displayed for each round, as well as an overall score.
See Wireframes below.
A simple, two toned colour scheme is used throughout, to avoid distracting the user's focus from the game area. All clickable buttons and icons will highlight when hovered over, in order to show where the user can and cannot click. Icons will show frames to represent results: green symbolising a win, red symbolising a loss and grey symbolising a draw.
- IDE :
- Languages : HTML for basic page structure. CSS for styling. JavaScript for interactivity. Markdown for this readme.
- Template : The CodeInstitute Gitpod template was used in order to install all the relevant tools for the code to function.
- Github was used to host the project. Each author worked on their own self-titled branch before committing changes - after group approval - to the main branch.
- Balsamiq was used to create wireframes for mobile, tablet and desktop ???
- Favicon.io was used to find the page's favicon ???
- WAVE and PageSpeed Insights testing tools were used to locate minor issues and check both accessibility and performance.
Once the basic design of the website was finished, we deployed it to GitHub Pages. The history of all deployed versions of the site can be found here.
- Log in to GitHub.
- Select FebHackathon from the list of repositories, of any of the authors.
- Click Settings > Pages.
- Under Source, select Deploy from a branch.
- Under Branch, select main and /root, then click Save.
- Wait a couple of minutes for the site to deploy, then navigate back to the repository.
- Click Deployments, which now should have appeared on the main repository page.
- Under Active Deployments, click the link https://moabdelbasset.github.io/FebHackathon/. (The deployed page will open in the current tab).
- Go to the GitHub repository.
- Click the green Code drop-down button.
- Click HTTPS and copy the URL.
- Open your IDE, and open a terminal.
- Type
git clone url, replacingurlwith the URL copied in step 3.
The above testing is performed using Chrome as the browser. These tests were repeated on the following browsers, all of which also passed in all criteria.
WAVE revealed no errors and no contrast errors. As this needed to be tested throughout all moments of use, no single screenshot could show this.
JSHint returned no errors, (((only ____ warnings about functions being contained within other functions. This is deemed acceptable for this project and so does not need addressing))).
- Hackathon Staff