Prince of Persia Password Generator (JavaScript)

I initially made a C# version of this. That version allows the user to generate passwords that are compatible with the Master System and Super Nintendo versions of Prince of Persia. In order to run it, it requires the user to download the program and run it.

I have since made a JavaScript version of the Super Nintendo password generator that can be used online. It can be viewed by clicking here.

The JavaScript version of the Prince of Persia Password Generator in action.
The JavaScript version of the Prince of Persia Password Generator in action.

To understand how the password is generated, please see the C# entry here.

I selected JavaScript because the code runs client-side, which means there is not as much server load as there would be if I used PHP for example. However, it cannot be used if the web browser doesn’t support JavaScript, or if the user has disabled it.

The function that generates the password was easy to port across to JavaScript. Since both C# and JavaScript are C-based languages, it only needed minor syntactical changes to get it working.

The difficult part was getting the generator to operate correctly across all major web browsers.

The numbers next to the sliders originally used the <output> HTML tag. However, neither of the Microsoft internet browsers support it as of 2016. Instead, I needed to use the <span> tag, which is a generic inline tag that allows the developer to alter that part of the text, such as styling it and, in my case, altering the contents so that the values of the sliders can be displayed.

Another issue I came across was with getting the sliders to behave consistently between browsers. The Microsoft browsers were particularly troublesome. The oninput parameter is supposed to trigger a script as the slider gets dragged. Unfortunately, Internet Explorer’s sliders do not trigger oninput. The onchange parameter is intended to trigger a script when the user finishes dragging the slider. Instead, both Internet Explorer and Microsoft Edge acted as if it were an oninput trigger, meaning it updates as the slider gets dragged. In order to get the consistent behaviour, I needed to include both oninput and onchange in the <form> tag.

My experience of developing this program has made it easy for me to see why some web developers have chosen not to support the Microsoft web browsers for some of their applications. However, I don’t plan on following suit. If it is possible to make my web applications compatible with Internet Explorer, I will attempt to do so. May this good feeling last.

Leave a Reply

Your email address will not be published. Required fields are marked *