Creating a Login App for children

The Challenge

My son needed to learn how to log in to a program for his school. Previously they had used QR code cards but for the new school year, he would have to manually type in a username and password. So I decided to build a login page for him to practice at home.

The Build

I looked at the app he would be using, the interface was a basic login form with an option to show the password.  I searched for  login examples and found a Python and flask tutorial that was close to what I needed.

As I worked through the tutorial, I noticed some of the code snippets were formatted incorrectly. The code appeared in plain text not as code. Instead of showing brackets {} , there was unicode for the brackets. All the indentation was lost, everything was aligned left.

I wrote the correct syntax and got the basic functionality to work. It was just a basic white with black text form. After adding some styling and instructions it looked like the following image.

The School app had a show password option.  I added a some JavaScript and a checkbox.

I used a template for the CSS. Then modified it to the school's color scheme. This satisfied  my initial concept for the app but I want to add replay value.

Adding a Reward

I had my son test it He was able to log in easily but all I had after log was the words "Welcome to book nook." I wanted to keep him practicing so I looked for a way to encourage repeated use of the app.

First, I tried some CSS animation. It was neat but the same thing every time. Then I decided to try randomly displaying text. I added 10 inspirational quotes about reading. I made an array of quotes, then used Javascript to display them when a button was clicked.

function inspireQuote() {
    var randomNumber = Math.floor(Math.random() * (quotes.length));
    document.getElementById('inspire').innerHTML = quotes[randomNumber];
    inspire.style.display = "block";
}

The quote box is hidden till the button is clicked, another click replaces the quote.

What did I Learn?

This was a fun satisfying build. I learned some Flask and how to show a password with JavaScript.

-$JarvisScript git push