Practice for my soft 166 module
This is the demonstration of the application
RockYou password list - https://www.kaggle.com/wjburns/common-password-list-rockyoutxt
Common words list - https://gist.github.com/deekayen/4148741
Bootstrap - https://getbootstrap.com/
jQuery - https://jquery.com/
The script for the youtube video is in script.txt
This application is designed to act as a password strength checker that uses the philips hue lights api to control philips hue bulbs.
This application contains 4 pages: Index, Lights, About, and Key.
The pages are designed using the same nav bar and card divs to give a uniform look. All the cards are the same width so that there is a more consistent feel throughout the website.
The cards have all been designed with shadow and bg-light to help provide focus to the foreground.
This application has 3 main features:
- Ability to control Philips Hue lights
- Password strength checker
- Function designed to search arrays created from word lists
Index is the main page and provides access to the other pages while providing a brief explanation of their purpose.
Lights is the password strength checker and has the ability to change the colour of the lights. This contains 6 requirements to be met by the user for all 6 lights to be turned on. Once all 6 requirements have been met, the lock icon next to the input box will also be locked and turned green.
About is designed to show and explain the JavaScript functions used. This also contains the disclaimer disclaiming responsibility for misuse of the application.
Key provides indication for the lights and what they mean. This also shows what the colours mean as well.
These tests are screenshots of the webpages with the input boxes empty, and then with a password given which meets the input requirements.
This will be a comparison against the Web Content Accessibility Guidelines (Quick Reference) as shown here
- Perceivable
- Text Alternatives
All non text items are replaced by text when icons are not available.
- Time Based Media
There is no time based media in this application. - Adaptable
The use of bootstrap allows the application to be viewed on different devices and at different orientations. It is also simply structured meeting the requirements.
Previous screenshots have all been taken in desktop format. Below has been taken in mobile format using firefox's developer settings.
- Distinguishable
Color is not solely used to represent information and there is distinct contrast between background and foreground.
Use of this is demonstrated within the application screenshot of the lights page.
- Text Alternatives
- Operable
- Keyboard Accessible
The website can be navigated using the keyboard and input boxes can be left using the keyboard. - Enough Time
There are no timing elements in this applicaiton. - Seizures and Physical Reactions
The application contains no content that will cause seizures or physical reactions against the guidelines. - Navigable
The applications has page titles and allows for navigation within the webpage compared against the guidelines.
Use of page titles is demonstrated within multiple browser testing, due to the view of the tab aswell as the navbar view. - Input Modalities
The application supports the functionality required in the guidelines for this section.
- Keyboard Accessible
- Understandable
- Readable
Common english words are used in the application and is of a low reading level. - Predictable
Navigation methods are consistent and changes of context are not initiated unexpectedly.
The application screenshots section demonstrates this with the same navbar being used throughout the application - Input Assistance
No error correction is provided because a password is expected and is not required to be in a specific format.
- Readable
- Robust
- Compatible
No status messages are provided, elements are complete, and roles can be programmatically determined.
- Compatible
