- Program using fundamentals of JavaScript
GameOn is a website, where people interested in gaming are able to sign up and reserve tickets for a game-a-thon.
Aim of the project was to finish the existing layout and content for the landing page and the modal form. In addition to that, the form validation needed to be set up, as well as error messaging and a confirmation message.
- finalized markup and styling for the landing page
- finalized modal markup
- finalized form markup, including linking labels to input fields
- improved responsiveness (amongst others for navigation, font sizes and background image)
- positioning of the navigation in mobile view
The website content can be divided into three parts.
- Added functionality to close/x icon on modal to close modal
- Added functionality to form inputs
- Added form validation on submit (client-side and constraint validation)
- first name field has nim of 2 characters / is not empty
- last name field has min of 2 characters / is not empty
- email is valid
- for numbers of competitions, number value is entered
- one radio button is selected
- terms and conditions checkbox is checked, the other checkbox is optional / can be left unchecked
- form inputs are retained (i.e. not cleared), when form does not pass validation
- Added error messaging
- specific error messages appear under input that is not correct. Error messages display below associated nput field.
- Added confirmation message of successful submission
- After successful validation, confirmation message is included and replaces the form in the modal (functionality of submit button is changed to closing the modal)
- Manual testing
- only custom CSS and Vanilla JavaScript
- must pass W3C validation for HTML and CSS without errors
- must be fully responsive
- must be fully compatible with latest versions of Chrome and Firefox (Feb 2021)
- setup of constraint validation
