Link to code:
https://codepen.io/dcode-software/pen/orXrXQ
In this video I’ll be showing you how to create a sleek PIN pad login screen using plain HTML, CSS & JavaScript – no libraries or frameworks such as jQuery or Vue.js were used in this tutorial.
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:
https://google.github.io/material-design-icons/#icon-font-for-the-web
Support me on Patreon:
https://www.patreon.com/dcode – with enough funding I plan to develop a website of some sort with a new developer experience!
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
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!!!
Can i get a link to download visual studio code editor