25/11/20 Displaying a Calendar & Selecting Gender

Calendar

We’ve created our sign up page and users are able to enter their details. Currently the birthday field allows users to enter free text. In order to make this consistent across all users, we have decided to implement a calendar dropdown for this field.

How did we do it?

We changed the input type for the Birthday field from ‘text’ to ‘date’.

Code for our views/signup.hbs (similarly with our views/edit.hbs) showing input type=”date”

Using the date input on HTML5 generates a drop down calendar which satisfied our requirements to standardise the date format.

We noticed that the change did not get implemented correctly on the Safari browser, but as we are working with Chrome, we have decided to keep the current functionality and we may revisit this later.

Working calendar on our sign up page.

Gender Selection

We added the option for users to select ‘Other’ for their gender classification as well as an option to not declare their gender with the “I’d rather not say” option.

As a social media app, we want to avoid putting people in to boxes and thought this would be a great way to be more inclusive. Here is how our gender selection box appears:

Gender selection functionality on our signup & edit page(s)

When the user selects “Other” they have the option to enter their own classification:

Gender selection (Other) functionality on our signup & edit page(s)

The way that we added the functionality to input your own Gender (via the new text box create through selecting ‘Other’ was through our ‘CreateUser’ function and only showing the ‘hidden’ text box that appears after selecting ‘Other’ through a ternary operator within this function and accessing it through calling the specific indexes of the array.

Ternary operator on line 39 of our /controllers/home.js showing how the ‘Other’ text box is called

Written by Bhupesh, Deborah & Rhianna