PIN Pad Login Screen in JavaScript - HTML, CSS & JavaScript Tutorial (Project Video)

Link to code:

This login screen is able to fire off an AJAX/Fetch request to attempt a login and then handle success by redirecting or handle incorrect pin by displaying an error state. It works in Chrome, Firefox, Microsoft Edge and Safari (hopefully - I don't have a Mac to test it :( )

Google Material Icons:

Support me on Patreon:

Follow me on Twitter @dcodeyt!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#dcode #webdev #javascript

[moisescastillo]

Ajax, javascript, Awesome, ... what good video, working with pure and hard vanilla javascript is the best way to learn to program, keep sharing this type of material

[nate]

Really enjoyed working through this project. I'm clueless with PHP so I'm looking forward to reconfiguring the backend with Node/Express. This is exactly the kind of project I needed for my skills at the moment -- thanks!

[MrDataWolf]

Wonderful guide! Very clear and well presented. I used this to make a pin pad in Laravel. Removing loginEndpoint and redirectTo for a livewire emit event. Your clean code made this so simple!!!! Thanks!!!

[michaelpeltz]

Nice. Learned a lot of stuff that i would have normally had to do with jQuery.

[khalidkhan]

This is just a full pack of everything you need in one video !

[isabelphillips]

Wow!! Lovely video ... Really learnt a lot ... Love this JavaScript coding ... Already a subscriber... Any full beginner to pro JavaScript video ??

[jamestownsend]

This is brilliant, thank you for sharing and explaining throughout!

[sulaimonraji]

Amazing, keep it up bro, i really learn from you

[itsme-vsuz]

bro can you make automatic submit when reach maximum pin input ? without clicking the check button

[aubisoka]

Great video! Is there a possiblity to reset the input? Its empty when I start it again, but when I click on a button, the last four numbers appear (well, hidden with dots and only when clicking on a number, but this is useless, when you just have to press enter....)

[ChrisCushley]

awesome video. would there be a way to have a list of codes to pick from on a previous page that then become the correct code?

I'm trying to make a scavenger hunt type of game that someone picks a code from a list, the rest of the team have to then find out which code was used then enter it.

[MrJennilicious]

Thanks for your tutorial! For some reason, the material icons are not aligned properly inside the pin pad. Do you know how to fix this?

[ersinsen]

Hi dcode. I have done same as your video. but i get this error message.


'Failed to load resource: the server responded with a status of 405 (Method Not Allowed)'


What should i do to solve this issue?

[norexus]

Nice, good job! Do you mind sharing the source code on GitHub or using a gist?

[adkastorr]

ERROR 405 :/// what can I do about this? I tried using a live server but cant get through it

[galihridhoutomo]

how many passwords to input to make it work?

[blackpointimperial]

Hi great video is there a way that to make an Ajax request to bring back data to the same page like a user info

[AmariSharpe]

the password isn't showing up in my input fields, did i miss a step? the buttons are clicking but the password isn't showing

[sen]

I don't like this concept because when they can just copy the link where they login and paste it in and share

[rohangaonkar]

trying hard to match your typing speed