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.
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
Num | Test | Action | Outcome image | Result |
---|---|---|---|---|
1 | Navigation bar links work correctly | Click on each nav icon | Image of navigation bar working | Pass |
2 | The spawn button on the interactive game spawns blocks when pressed and held | Click and hold spawn button | Image of spawn button working | Pass |
3 | The compact button compacts the blocks and ejects a compacted block | Click compact button | Image of compact button working | Pass |
4 | The instructions button displays the instructions modal when clicked | Click instructions button | Image of user instruction modal working | Pass |
5 | The contact form does not a blank submission | Attempt to submit blank form | Image of form failing to submit while blank | Pass |
6 | The contact form inputs only accept valid inputs | Attempt to enter invalid data types | Image of form requiring correct data format | Pass |
Num | Browser | Test result |
---|---|---|
1 | Chrome | Passed |
2 | Opera | Passed |
3 | Mozzilla | Passed |
-
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
-
Create a Github account at github.com
-
Click on the 'New' button in the top left corner
-
Enter a name for the repository, check the 'Add a README file' box
-
Click 'Create repository'
-
Open the repository in preferred integrated development environment
-
Save changes by clicking the save button
-
Once a feature has been successfully created using the 'git add .' command to stage the changes made
-
Then use the command 'git commit -m"[enter commit title here]"'
-
All meaningful changes to the code should have its own commit
-
To push the commits to Github use the command 'git push'
-
Once the website is ready for deployment return to github.com
-
Click on the 'settings' tab
-
Scroll down to the 'GitHub Pages' section
-
Click the 'None' dropdown button
-
Select the master branch
-
Click save
-
After a few minutes, the site will be published to GitHub pages and can be accessed using the URL at the GitHub Pages section
-
Follow this link to my Github Repository.
-
Click 'Clone or Download'.
-
In the Clone with HTTPs section, click the 'copy' icon.
-
In your local Integrated Development Environment open Git Bash.
-
Change the current working directory to where you want the cloned directory to be located.
-
Type 'git clone', and paste the URL you copied before.
-
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.