• Project purpose
• UX
  • User stories
  • Strategy
  • Scope
  • Surface
    • Color Scheme
    • Typography
    • Imagery
  • Wireframes
• Features
• Technologies Used
  • Languages used
  • Frameworks, Libraries & Programs Used
• Testing
  • Code Validation
  • Functionality test
  • Problems during development
  • Browser Compatibility
  • Responsiveness Testing
  • Google Lighthouse Scores
• Deployment to Github Pages
• Clone
• Credits
  • Media
  • Acknowledgments

Table of contents generated with markdown-toc

Waste matters Ltd. offers waste and recycling solutions to Irish businesses. The interactive demo aims to advertise and sell polystyrene compactors. The demo will guide the user through a mini-game in which they will drag and drop polystyrene blocks into a compactor machine before turning it on. While interacting with the demo, the user will receive key facts about polystyrene recycling and waste matters. On completion of the demo, the user will have the option to ‘learn more’ which will lead them to the current waste matters website.

• As a user, I would like the user experience on the website to be intuitive.

  • The interactive demo guides users using clear instructions

• As a user, I want to learn about polystyrene compactors and how they work.

  • The demo demonstrates how the polystyrene compactors work

• As a user, I want to learn about polystyrene recycling in an engaging manor.

  • The interactive demo requires user engagement while the website provides key information

• As a user, I want my experience on the website to be enjoyable.

  • The interactive demo is built on a rigid body physics engine. Interacting with the polystyrene blocks can elicit a positive emotional response.

Goal: To inform users about polystyrene recycling in an engaging manor and sell polystyrene compactors through waste matters Ltd.

• An interactive demo utilizing Matter.js, a 2D rigid body JavaScript physics engine.

• Font color: #f0f8ff
• background color: #14151F
• User instructions: #ff0000

Roboto Mono is the font used on the webpage with monospace as the fallback font in the case of the default font failing to load correctly. The default font weight of 400 is used throughout the page.

• The imagery is cartoon-like in style.

• Mobile View

• Tablet View

• Desktop View

This project is an interactive game built on the 2d physics engine matter.js. It allows users to place polystyrene objects into a compactor and turn it on. This game serves the purpose of engaging the user and allowing for an alternative way of imparting information. Facts about polystyrene recycling, polystyrene compactors and waste matters appear as the user interacts with the demo.

• HTML5
• CSS3
• JavaScript

• Matter.js
• Visual Studio Code
• Google Fonts
• Font Awesome
• Git
• Github
• Balsamiq Wireframes
• Microsoft PowerPoint
• Microsoft Word
• Google Chrome Developer Tools
• jQuery

• HTML was validated using W3C Markup Validation Service.

• CSS was validated using W3C CSS Validation Service - Jigsaw

• JavaScript was passed through the linter jshint with no warnings

• Chrome developer tools was used to test a wide variety of device sizes and resolutions.

• The website has been tested on an iPhone 5, Samsung Galaxy s10, Acer swift 3 and a desktop PC with a 1080p and 4k monitor.s

• Lighthouse mobile result
• Lighthouse desktop result

1. Create a Github account at github.com

2. Click on the 'New' button in the top left corner

3. Enter a name for the repository, check the 'Add a README file' box

4. Click 'Create repository'

5. Open the repository in preferred integrated development environment

6. Save changes by clicking the save button

7. Once a feature has been successfully created using the 'git add .' command to stage the changes made

8. Then use the command 'git commit -m"[enter commit title here]"'

9. All meaningful changes to the code should have its own commit

10. To push the commits to Github use the command 'git push'

11. Once the website is ready for deployment return to github.com

12. Click on the 'settings' tab

13. Scroll down to the 'GitHub Pages' section

14. Click the 'None' dropdown button

15. Select the master branch

16. Click save

17. After a few minutes, the site will be published to GitHub pages and can be accessed using the URL at the GitHub Pages section

1. Follow this link to my Github Repository.

2. Click 'Clone or Download'.

3. In the Clone with HTTPs section, click the 'copy' icon.

4. In your local Integrated Development Environment open Git Bash.

5. Change the current working directory to where you want the cloned directory to be located.

6. Type 'git clone', and paste the URL you copied before.

7. Press enter and your local clone will be available.

• Compactor image: https://wastematters.ie
• Styrofoam texture: https://3dtextures.me/2019/03/21/styrofoam-001/
• Floor block image: https://webstockreview.net/image/brick-clipart-super-mario/125781.html
• Green pipe: https://publicdomainvectors.org/en/free-clipart/Green-pipe/39369.html

• Web Dev Simplified for the instruction modal.
• Stackoverflow as a resource for learning and troubleshooting.
• Matter.js documentation
• The coding train YouTube channel
• A special thanks to my mentor Brian Macharia for his invaluable guidance throughout this project.
• Thanks to Simen Daehlin for his very helpful feedback on the project.