Survey Form

A project from compass uol trainee program. This was our first chalenge, within some specifications.

🔑 Mandatory requirements

Using HTML, CSS, Java Script
Layout according to Figma (Pixel Perfect)
Responsive Layout

🔑 Additional Functionality (NOT MANDATORY)

Validation of inputs with Java Script.
User data stored in localStorage.
Indication of the number of characters remaining in the TextArea.
Use of TypeScript.
Creation of a success screen, signaling that the registration was completed successfully.

FIGMA LINK:

https://www.figma.com/file/lb8YnlygMTI3RiAY8KKDCB/survey-form---desktop-type-(Community)?node-id=0%3A1

💻 Development setup

Git clone.

git clone https://github.com/RebecaBaruch/Survey_Form.git

Install all development dependencies and how to run.

npm install
npm install typescript
npm start

For compiling the TypeScript.

tsc
tsc -w

You can see the running application by live server on VSCode.

🛠️ Features

Radio Button + select validation

Checkbox + select validation

TextArea validation

User Validation

This functionality was the one wich most got me pround. I used two classes for making this functionality: UserInput, for getting input values and catch errors on validation and userOutput to the success page. For validation, regex:

        let nameRegex = /^(([A-Za-z]+[\-\']?)*([A-Za-z]+)?\s)+([A-Za-z]+[\-\']?)*([A-Za-z]+)?$/; 
        let nameResult: any = nameRegex.test(userName);

        let emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        let emailResult: any = emailRegex.test(email);

        let ageRegex =  /^[0-9]+\.?[0-9]*$/;
        let ageResult: any = ageRegex.test(age);

🤯 Issues

Select validation

My function to validate the 'Next' button verifying if the select value is null only works if you click on a radio button.

The same to checkbox:

I need to fix this in the future.

🚀 Technologies

HTML3
CSS3
JavaScript
TypeScript.

RebecaBaruch/survey-form