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

Подписаться 133 тыс.

Просмотров 28 тыс.

50% 1

Link to code:
codepen.io/dcode-software/pen...
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:
google.github.io/material-des...
Support me on Patreon:
/ 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

Опубликовано:

4 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 57

@MrDataWolf 3 года назад

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!!!

@nate1988 2 года назад

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!

@jamestownsend9954 Год назад

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

@moisescastillo3447 5 лет назад

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

@dcode-software 5 лет назад

No worries mate I'm glad you enjoyed this vid!

@michaelpeltz 5 лет назад

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

@dcode-software 5 лет назад

No worries, yeah I can't say I use jQuery often, a lot of the time using the regular DOM methods do the job just fine 😁

@khalidkhan5308 4 года назад

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

@dcode-software 4 года назад

Awesome mate :)

@isabelphillips451 4 года назад

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

@sulaimonraji9240 4 года назад

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

@dcode-software 4 года назад

All good man!

@vipinkrishna6536 5 лет назад

Skillfull effort!

@dcode-software 5 лет назад

👍😃

@ChrisCushley 2 года назад

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 3 года назад

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?

@pursleymbc9515 2 года назад

inline style of the material icons seemed to fix it. here is the code style="display: inline-flex; align-items: center; justify-content: center;"

@itsme-vs4uz 2 года назад

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

@aubisoka 10 месяцев назад

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....)

@blackpointimperial4529 4 года назад

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

@dcode-software 4 года назад

Definitely - you'll just need to setup another end point (PHP file for example) that will return user data once you make a request to it.

@norexus007 5 лет назад

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

@dcode-software 5 лет назад

Sure, thought I did this already. I'll do this now. I use CodePen usually.

@dcode-software 5 лет назад

Sorry mate, I just got around to doing it! codepen.io/dcode-software/pen/orXrXQ

@galihridhoutomo 3 года назад

how many passwords to input to make it work?

@adkastorr532 3 года назад

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

@harivatsasuresh4347 3 года назад

Can i get a link to download visual studio code editor

@dcode-software 3 года назад

You can Google it, shouldn't be too hard to find :)

@ersinsen6190 4 года назад

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?

@d1stinct_ 4 года назад

same problem bro

@dcode-software 4 года назад

If you guys are using something like a built in server in your text editor it could be the issue. I'd recommend using something like XAMPP.

@ersinsen6190 4 года назад

Thanks your fdback. I will try to fix it

@deepaksinghmudila614 3 года назад

@@ersinsen6190 Did you fix the issue.?

@ersinsen6190 3 года назад

@@deepaksinghmudila614 The important part of the project is HTML, CSS & JavaScript for me. I didn't want to deep into PHP and XAMPP for a video project. Also, MySql and MongoDb are enough for me. So, i gave up fixing the issue. But if you find the solution, I'll be happy if you share it.

@davidcordero9864 5 лет назад

Something went wrong because I get a error. GET file:///D:/assets/dcode.css net::ERR_FILE_NOT_FOUND . Seems like everything is working ok except for that what can I do about this?

@dcode-software 5 лет назад

You won't need that CSS file, that's hosted locally on my PC. Feel free to remove it

@davidcordero9864 5 лет назад

@@dcode-software Thank you for this lesson! It did get rid of the error but I must have something wrong still. The calculator seems to actually work but I do not see the numbers of pressed keys as you do in console?? Edit: I had removed the console.log so now I am able to see the values.

@davidcordero9864 5 лет назад

@@dcode-software I feel I am SOOO close but I am not getting the 200 and 400 in console. I checked the login.php file and it looks correct. But something is not linking correctly with the .php file I get the following error. Fetch API cannot load /PIN-LOGIN/login.php. URL scheme must be "http" or "https" for CORS request. Also Uncaught (in promise) TypeError: Failed to fetch at PinLogin._attemptLogin (pin-login.js:64) at PinLogin._handleKeyPress (pin-login.js:45) at HTMLDivElement. (pin-login.js:31) Any help would be greatly appreciated and then I can sleep well knowing I finished this project successfully! Thanks for your time and work!

@dcode-software 5 лет назад

Hey man, you need to make sure the PHP file is on the same server as where your HTML is on. It's giving you errors about cross origin because the PHP file is on a different origin to your HTML file

@davidcordero9864 5 лет назад

@@dcode-software I have dashboard.html, index.html and login.php all in the same folder like you show. I have pin-login.css and pin-login.js in a folder next to them