Key Pad Creation

Using JavaScript with Hype
1

Hi all,

I’m trying to make a key pad for a login system which is similar to the login screen of a iPhone. I’m struggling to work out how to actually achieve this. I’m a javascript novice and I know there’s a way to easily achieve this but I’m really not sure where to start. Could anyone point me in the right direction? I’ve included my template to this post.

I’ve considered having a javascript function for each button and then use if/else statements to correctly place a number in each selection box however it just seams a long winded way to achieve this.

I’m wondering if there is some javascript that can take a button press as an action, take a value from the button which is pressed then place the value in the correct box?

I’m just really unsure how to achieve this. Thanks in advance again for all you help,

Chris

key pad.zip (22.0 KB)

2

A very simple example.
Each number uses the Additional HTML Attributes in the Identity Inspector.
We give them the key of data-number and the value that corresponds to the given number.

The code has a global counter that will be used to put the number in the next box and stop when the last box is reached.

	//-- global
	if (typeof hypeDocument.customData.counter	=='undefined'){
	
	hypeDocument.customData.counter = 0
	}
	
		//-- plus 1
		hypeDocument.customData.counter++
		
		
	var num  = hypeDocument.customData.counter
	
	//stop when 4 boxes are filled.
	if (num < 5){


	hypeDocument.getElementById('box' + num).innerText =  element.dataset.number
	
	}

key pad.hype 2.zip (26.2 KB)

3 Likes
3

Excellent! Thanks so much for this. I wasn’t even aware of the additional HTML attributes in the identity inspector. Going to have a look over some of my other projects to see if it can be used! thanks again :slight_smile:

1 Like
4

It goes without saying for sensitive data or controls and as a matter of practice that any passwords
should not be embedded in the javascript/ html export.
Anyone with a little bit of savvy can access them.
Passwords should be server side and not client side

1 Like
5

I’ve be working with MySQL and php to create a login system so no passwords will be embedded in JavaScript/ html. I just needed to work out how to start to create the interface in hype then I’m going to just ajax to communicate between the two. I’ve managed to use hype with this method to send and retrieve from a database but I’ve not yet managed to include password login to retrieve data

1 Like