Создание приложения для входа для детей

Соревнование

Мой сын должен был узнать, как войти в программу для своей школы. Ранее они использовали QR-код карты, но для нового учебного года ему придется вручную вводить имя пользователя и пароль. Поэтому я решил создать страницу входа в систему для него, чтобы практиковаться дома.

Сборка

Я посмотрел на приложение, который он будет использовать, интерфейс был основным файлом входа с опцией, чтобы показать пароль. Я искал примеры входа в систему и нашел учебник Python и Flask, который был рядом с тем, что мне нужно.

Когда я работал по учебнику, я заметил, что некоторые фрагменты кода были отформатированы неправильно. Код появился в простом тексте не в качестве кода. Вместо того, чтобы показывать кронштейны {}, был Unicode для скобок. Все отступы были потеряны , все было выровнено влево.

Я написал правильный синтаксис и получил основную функциональность для работы. Это был просто базовый белый с черной текстовой формой. После добавления некоторого стиля и инструкций он выглядел как следующее изображение.

Школьное приложение имело опцию Power Password. Я добавил какой-то JavaScript и флажок.

Я использовал шаблон для CSS. Затем изменил его в цветовую схему школы. Это удовлетворило мою первоначальную концепцию приложения, но я хочу добавить значение воспроизведения.

Добавление вознаграждения

У меня был мой сын проверить это Он смог легко войти в систему, но все, что у меня было после того, как журнал были слова «добро пожаловать в книгу Nook. «Я хотел держать его практикующим, поэтому я искал способ поощрять повторное использование приложения.

Во-первых, я попробовал некоторую анимацию CSS. Это было аккуратно Но то же самое каждый раз. Затем я решил попробовать случайным образом отображать текст. Я добавил 10 вдохновляющих цитатов о чтении. Я сделал массив кавычек, а затем использовал JavaScript для отображения их, когда кнопка нажала.

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

Коробка цитаты скрыта до нажатия кнопки, другой клик заменяет цитату.

Что я узнал?

Это была удовольствие, удовлетворяющая сборку. Я узнал некоторую колбу и как показать пароль с JavaScript.

– $ Jarvisscript Git push

Оригинал: “https://dev.to/jarvisscript/creating-a-login-app-for-children-3gnf”