Super Annoying Log In

A log in screen that is as annoying as possible to dissuade people from stealing your account.

Comment

What it does

This is a standard login page that wants to absolutely make sure that you remember your username and password. It will ask you several times to retype your username, backwards and forwards. It will also force you to type out your username letter by letter to make sure AGAIN, that you know your username. And as another measure to make sure your paying attention, you must hold down a button instead of pressing a button. Once your username has been verified, you must repeat the same process with your password. Once all information is verified, you must write a 50-word paragraph explaining why you want to log in (for auditing purposes). Simple as that.

How we built it

This project was made entirely in HTML/CSS for the design and structure, and JavaScript for the backend, "functionality" part. I first designed the UI portion and all the elements that would be needed. Once that was done, I made the scripting part in JavaScript to combine all the elements in a way that made it both annoying and aesthetic.

Challenges we ran into

The main challenge when making this was figuring out how HTML and JavaScript work together to make a website with complex functions. The JavaScript part was easier since it's in a familiar language that is similar to other code I've done in the past, however HTML was a learning curve, and required a lot of searching for formatting and structure.

Accomplishments that we're proud of

I am proud of making a design that has continuity throughout the whole thing, and also making sure the functional scripts accommodated the way the UI was made.

What we learned

From doing this I learned a lot about UI/UX design, what makes something both aesthetically good, but also functionally good. At the same time, I also learned what aspects of UI cause annoyances for users, which in this case I was trying to maximize. Combining both things, I was able to make something that both looked visually good, but also turns into a frustrating and annoying process for something that should be simple.

Youtube Link: https://youtu.be/EfQpteRd3pU

Google Drive Link: https://drive.google.com/file/d/1tgatfMZm1ii4b8jKkIM7M016Nz5U-pIm/view?usp=sharing

Built With

Share this project:

Updates