어린이를 위한 로그인 앱 만들기

도전

제 아들은 학교 프로그램에 로그인하는 방법을 배워야 했습니다. 이전에는 QR 코드 카드를 사용했지만 새 학년도에는 사용자 이름과 비밀번호를 수동으로 입력해야 했습니다. 그래서 집에서 연습할 수 있도록 로그인 페이지를 만들기로 했습니다.

빌드

그가 사용할 앱을 보니 인터페이스는 비밀번호를 표시하는 옵션이 있는 기본 로그인 양식이었습니다. 로그인 예시를 검색하여 필요한 것과 가까운 Python 및 플라스크 튜토리얼을 찾았습니다.

튜토리얼을 진행하면서 일부 코드 스니펫의 형식이 잘못되었음을 발견했습니다. 코드는 코드가 아닌 일반 텍스트로 나타났습니다. 대괄호 {} 를 표시하는 대신 대괄호에 대한 유니코드가 있었습니다. 모든 들여쓰기가 사라지고 모든 것이 왼쪽으로 정렬되었습니다.

올바른 구문을 작성하고 작동하는 기본 기능을 얻었습니다. 검은색 텍스트 형식의 기본 흰색이었습니다. 일부 스타일과 지침을 추가한 후 다음 이미지와 같이 표시되었습니다.



학교 앱에는 암호 표시 옵션이 있습니다. JavaScript와 확인란을 추가했습니다.



CSS 템플릿을 사용했습니다. 그런 다음 학교의 색 구성표로 수정했습니다. 이것은 앱에 대한 나의 초기 개념을 만족시켰지만 다시보기 가치를 추가하고 싶습니다.

보상 추가

아들에게 시험해보게 했더니 쉽게 로그인이 되더군요. 하지만 로그를 남기고 난 뒤에는 "책방에 오신 것을 환영합니다."라는 말밖에 없었습니다. 나는 그가 연습을 계속하고 싶었기 때문에 앱의 반복 사용을 장려하는 방법을 찾았습니다.

먼저 CSS 애니메이션을 사용해 보았습니다. 깔끔하긴 했지만 매번 똑같았다. 그런 다음 임의로 텍스트를 표시해 보기로 했습니다. 독서에 대한 영감을 주는 인용구 10개를 추가했습니다. 따옴표 배열을 만든 다음 Javascript를 사용하여 버튼을 클릭했을 때 표시했습니다.

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

견적 상자는 버튼을 클릭할 때까지 숨겨져 있으며, 한 번 더 클릭하면 견적이 대체됩니다.

나는 무엇을 배웠는가?

재미있고 만족스러운 빌드였습니다. Flask와 JavaScript로 비밀번호를 표시하는 방법을 배웠습니다.

-$JarvisScript 자식 푸시