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 :( )

Link to code:
https://codepen.io/dcode-software/pen/orXrXQ

Google Material Icons:
https://google.github.io/material-design-icons/#icon-font-for-the-web

Subscribe: https://www.youtube.com/c/dcode-software/featured

#javascript #html #css