Microinteractions: Awesome Password Validation Animation
👉 Become A VS Code SuperHero Today: https://vsCodeHero.com
Download the PDF front-end roadmap for FREE to keep you on track!
https://codestackr.podia.com/front-end-web-developer-roadmap-2020
Micro Interactions are small animations that let the user know something has happened or is happening. These are great for improved user experience in your user interface.
Today we are going to build an animation inspired by @frontendjoe, who collaborated with Miriam Isaac (@misaac85) on Instagram to break down the password validator. They built their version in Vue. We are going to recreate it using vanilla JavaScript.
Micro-interactions can bring websites and apps to life if used correctly.
Here is the link to the Instagram post that inspired this video: https://www.instagram.com/p/CBQRUt1A86_/
Source code: https://codepen.io/codeSTACKr/full/zYrqXEo
Chapters
00:00 – Intro
00:53 – Micro-Interactions Explained
01:26 – HTML
05:15 – CSS
13:39 – JavaScript Validation Message
28:40 – Show/Hide Password
_____________________________________
đź“š Learn to CODE in just a FEW months here:
Treehouse Discount Code: https://treehouse.7eer.net/codeSTACKr
_____________________________________
🛠️ Tools I use:
đźź Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
đźź Font: STACKr Code (Exclusive to my VS Code Course – https://vsCodeHero.com)
đźź SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions
🤖 I now use AI-powered code completions thanks to Kite. You should too so grab it FREE: https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=codestackr&utm_content=description-only
_____________________________________
🚀 Get 1 Year of FREE Hosting (Sponsor Link)
https://www.atlantic.net/Codestackr/
🚨 Use code: Stackr to get $25 in FREE Credit!!
_____________________________________
đź’– Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________
Watch Next:
Web Development – Beginners Roadmap (2020) – https://youtu.be/iogabydg2y0
Playlist: Web Development For Beginners – https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________
Connect With Me:
Website: http://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr/
Facebook: https://facebook.com/codeSTACKr
_____________________________________
** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.
#codeSTACKr #ux #ui
source
