My First assignment for soft166 (web dev)
The purpose of this web-app is to test the strength of passwords. The web-app displays the strength of the password to the user in two ways:
- A table situated under the password entry field
- Changing the color of lights in SMB109.
This web application is made to evaluate the strength of a user password, based on six characteristics, and manipulate the lights in SOFT166 in ways dependent on those characteristics.
The web application has four pages: home, about, application, and the key. All pages on the web application have the same navigation bar. This navigation bar has links to the other three pages on the site. The navigation bar indicates to the user their current page by underlining that option on the navigation bar. All pages also have the footer. This footer contains the text “powered by w3.css” this is included to acknowledge that I have used the w3css tool to make the site. The “w3.css” part is a link to the w3css website.
The home page has two main items on it: The site title, and the creators name. Both these items are animated, with the title coming in from the top, and the creator name coming from the bottom. This can give the web application a sleek modern look. The application title will take the user directly to the application page when clicked, thus making the site easier to navigate.
The about page is made up of two major sections: about the application, and about the author. The both of these sections are made up of a title and a paragraph of text. All of these are animated and slide onto the page from the left and right.
The application page is the main page of the application. This is the page that contains both the password entry box and the table which tells the user what secure password characteristics are present in the password they entered. The password box is large and in the middle of the page. The users cursor is automatically set to type in that box. The table used to display the features is below this entry box. The table is updated in real time so that the user can see what part of there password affects the password strength. On the standard desktop view the results of the password strength are arranged in two columns of three, the same as the lights in SMB109. When in mobile mode the table is turned into a single column with six items. There is also a clear button on this page which can be used to clear the password entry. The items on this page are animated and fly in from the left and right to fit with the other pages which do the same.
The key page is used to show the user how each password characteristic will affect the lights in smb109. This page is made up of 7 containers which each contain an explanation and a diagram. These diagrams show all the lights on the wall and what color they should be. In desktop mode these containers are arranged in a grid but when shrunk to mobile mode the containers are in a column.
- Ability to control the lights in SMB109.
- Ability to display the strong password features present in the users password.
- Password length
- Multi-case (Upper and Lower case characters)
- Presence of Special characters
- Alphanumeric (Numbers and letters)
- Repeating characters
All pages have the navbar at the top. The navbar has been kept intentionally simple as it makes the web-app look cleaner in my opinion.
All pages contain a footer. This footer states that the page was created using w3.css. The footer also acts as a link to the w3.css site.
This is the first page that the user is greeted with upon opening the web-app. It contains the web-apps title (Password Strength Tester) and the creator's (my) name.
This is the about page for the web-app. The purpose of this page is to tell the user about the application and the creator. The page is split into two sections:
- About the application
- About the creator
These two sections are composed of a title, and a paragraph telling the user about that section.
This is the application page for the web-app. This page contains the main functionality of the site, it is on this page where the user is able to enter there password, and view the results. Both the password entry box and the results table are held on this page as that allows the table to be updated live.
This is the application key page. It contains the key for the lights in SMB109. The page takes the form of a brief page description, and 7 blocks which each contain a diagram; showing what the lights will look like, and an explanation of why this particular light will change color.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent