- 46
- 478 810
Lucas Paganini
เข้าร่วมเมื่อ 30 เม.ย. 2013
🧑💻 Developer and content creator
📚 Writing a book on FP
📚 Writing a book on FP
3D Numeric Input Animation with Vanilla HTML, CSS & JavaScript
🚨 Web animations course waiting list: www.lucaspaganini.com/web-animations
🚨 Unvoid - Experts in web development with Angular: unvoid.com
🚨 Subscribe to the newsletter: www.lucaspaganini.com/newsletter
🚨 Source code: codepen.io/LucasPaganini/pen/XWPMgzJ
In this video, I will teach you how to create a stylish and functional 3D numeric cart input that will make your online shopping experience easier and more enjoyable. We will walk you through each step of the process, from setting up the HTML and CSS to adding JavaScript functionality.
📧 Email: me@lucaspaganini.com
🐦 Twitter: lucaspaganini
📸 Instagram: lucaspaganini
----------
CHAPTERS
0:00 Introduction
03:19 References
04:05 Defining the HTML
10:28 Defining the CSS and Reseting the styles
13:15 Supportive Styles
18:47 Main Styles
32:10 Defining the JavaScript
32:37 JavaScript utils
33:10 Main Code
33:46 Init
37:26 Explaining the RegEx
38:55 Comming back to the JavaScript
50:22 Final Considerations
REFERENCES
1. Oleg Frolov (Codepen): lcodepen.io/Volorf/pen/QNrrGQ
#javascript #html #css
🚨 Unvoid - Experts in web development with Angular: unvoid.com
🚨 Subscribe to the newsletter: www.lucaspaganini.com/newsletter
🚨 Source code: codepen.io/LucasPaganini/pen/XWPMgzJ
In this video, I will teach you how to create a stylish and functional 3D numeric cart input that will make your online shopping experience easier and more enjoyable. We will walk you through each step of the process, from setting up the HTML and CSS to adding JavaScript functionality.
📧 Email: me@lucaspaganini.com
🐦 Twitter: lucaspaganini
📸 Instagram: lucaspaganini
----------
CHAPTERS
0:00 Introduction
03:19 References
04:05 Defining the HTML
10:28 Defining the CSS and Reseting the styles
13:15 Supportive Styles
18:47 Main Styles
32:10 Defining the JavaScript
32:37 JavaScript utils
33:10 Main Code
33:46 Init
37:26 Explaining the RegEx
38:55 Comming back to the JavaScript
50:22 Final Considerations
REFERENCES
1. Oleg Frolov (Codepen): lcodepen.io/Volorf/pen/QNrrGQ
#javascript #html #css
มุมมอง: 300
วีดีโอ
Material Design Button Ripple Effect in vanilla HTML, CSS & JavaScript
มุมมอง 12Kปีที่แล้ว
🚨 Web animations course waiting list: www.lucaspaganini.com/web-animations 🚨 Subscribe to the newsletter: www.lucaspaganini.com/newsletter 🚨 Source code: codepen.io/LucasPaganini/pen/eYLZPYY Learn how to create a ripple effect button with HTML, CSS and JS in this beginner-friendly tutorial. Add some interactivity and visual effects to your buttons with this popular design trend. Our step-by-ste...
How To Create an Animated Burger Menu with HTML, CSS and JavaScript
มุมมอง 14Kปีที่แล้ว
🚨 Web animations course waiting list: www.lucaspaganini.com/web-animations 🚨 Subscribe to the newsletter: www.lucaspaganini.com/newsletter 🚨 Source code: codepen.io/LucasPaganini/pen/oNMozPm In this video, I walk you through the process of creating a burger menu using HTML, CSS, and Javascript. This tutorial is perfect for both beginners and those with some experience in web development. You wi...
How To Create a Hover Animation with Only HTML & CSS
มุมมอง 6Kปีที่แล้ว
🚨 Web animations course waiting list: www.lucaspaganini.com/web-animations 🚨 Subscribe to the newsletter: www.lucaspaganini.com/newsletter 🚨 Source code: codepen.io/LucasPaganini/pen/KKBmvwo Discover the magic of hover animation with HTML & CSS! In this video tutorial, you'll learn how to create visually appealing and interactive hover effects for your website using only HTML and CSS. Whether y...
How To Create a Toggle Button with Pure HTML, CSS & Javascript
มุมมอง 4.2Kปีที่แล้ว
🚨 Web animations course waiting list: www.lucaspaganini.com/web-animations 🚨 Subscribe to the newsletter: www.lucaspaganini.com/newsletter In this video, we'll be creating a toggle button using HTML, CSS, and JavaScript. You'll learn how to design a sleek and modern toggle button, as well as how to add functionality to switch between the on and off states. Whether you're a beginner or an experi...
What's new in Angular 15?
มุมมอง 22Kปีที่แล้ว
📍Angular 15 mindmap: www.lucaspaganini.com/angular15 📍Web animations course: www.lucaspaganini.com/webanimations Angular 15 was recently released with a bunch of new features. There are nice tools in the functional programming field, improved error debugging, and many other functionalities that provide less boilerplate and more code usability! If you want to know what was changed, created, or i...
What is Mocking? - Concepts and Best Practices - Software Testing Series #2
มุมมอง 39K2 ปีที่แล้ว
To mock or not to mock? It's a good question that not everyone knows the answer to when developing tests. To answer that, you need to know the concepts around mocking, what fake data and fake interactions are, the pros and cons, etc. 🚨 Subscribe to the newsletter: www.lucaspaganini.com/newsletter 📧 Email: me@lucaspaganini.com 🐦 Twitter: lucaspaganini 📸 Instagram: lucas...
What's New in Angular 14 - A Game Changer
มุมมอง 34K2 ปีที่แล้ว
Angular 14 was released a few weeks ago, and we consider this version a game changer! So we took our time to do a great video on what we consider to be the most relevant features in this new version. In this video, we cover the eight new features of Angular 14 that we consider to be the most important ones! Including typed forms, the inject() function, and standalone components. 🚨 Subscribe to ...
Static, Unit, Integration, and End-to-End Tests Explained - Software Testing Series #1
มุมมอง 58K2 ปีที่แล้ว
"Prevention is better than cure." Ever heard that one before? Turns out that it also applies to software. You can either fix bugs as you find them or write tests to prevent them from happening. Writing tests has many benefits. Some of them are: 💤 You sleep better knowing that your system won't break overnight 🍻 Your colleagues feel more confident approving your code 💰 Companies want to hire you...
20 TypeScript Compiler Options for your TSCONFIG.JSON
มุมมอง 17K2 ปีที่แล้ว
Using TypeScript with the default options makes your code a lot safer than JavaScript, but did you know that the type safety can be improved? That's why I recorded a video this video showing the 20 TypeScript flags that me and my team use and you should set in your "tsconfig.json" too! 📚 Read the article: www.lucaspaganini.com/academy/20-typescript-compiler-options-for-your-tsconfig-json 🚨 Subs...
Autocomplete with Fuzzy Search & Fuse.js
มุมมอง 23K2 ปีที่แล้ว
Autocomplete with Fuzzy Search & Fuse.js
Learn TypeScript Narrowing - Full Course for Free - Basic to Advanced
มุมมอง 6K2 ปีที่แล้ว
Learn TypeScript Narrowing - Full Course for Free - Basic to Advanced
Tech Learning Goals for 2022 - Going Beyond Software
มุมมอง 4.2K2 ปีที่แล้ว
Tech Learning Goals for 2022 - Going Beyond Software
TypeScript Narrowing Library - TypeScript Narrowing #8
มุมมอง 4582 ปีที่แล้ว
TypeScript Narrowing Library - TypeScript Narrowing #8
Asynchronous Type Guards - TypeScript Narrowing #7
มุมมอง 7792 ปีที่แล้ว
Asynchronous Type Guards - TypeScript Narrowing #7
Higher Order Guards (Functions) - TypeScript Narrowing #6
มุมมอง 1.1K3 ปีที่แล้ว
Higher Order Guards (Functions) - TypeScript Narrowing #6
Assertion Functions or Assertion Guards - TypeScript Narrowing #5
มุมมอง 1.6K3 ปีที่แล้ว
Assertion Functions or Assertion Guards - TypeScript Narrowing #5
Discriminated Unions or Tagged Unions Types - TypeScript Narrowing #4
มุมมอง 2.2K3 ปีที่แล้ว
Discriminated Unions or Tagged Unions Types - TypeScript Narrowing #4
Custom Type Guards - TypeScript Narrowing #3
มุมมอง 2.5K3 ปีที่แล้ว
Custom Type Guards - TypeScript Narrowing #3
Fundamental Type Guards - TypeScript Narrowing #2
มุมมอง 3.2K3 ปีที่แล้ว
Fundamental Type Guards - TypeScript Narrowing #2
What is a Type Guard - TypeScript Narrowing #1
มุมมอง 8K3 ปีที่แล้ว
What is a Type Guard - TypeScript Narrowing #1
Null vs Undefined in JavaScript - Explained Visually
มุมมอง 22K3 ปีที่แล้ว
Null vs Undefined in JavaScript - Explained Visually
Intersection Observer & Infinite Scroll in a Visual Way
มุมมอง 20K3 ปีที่แล้ว
Intersection Observer & Infinite Scroll in a Visual Way
Scalable Front-end Architecture | How We Organize Our Projects
มุมมอง 40K3 ปีที่แล้ว
Scalable Front-end Architecture | How We Organize Our Projects
How to Use Docker for Development (and a VSCode Integration)
มุมมอง 19K3 ปีที่แล้ว
How to Use Docker for Development (and a VSCode Integration)
Advanced Approaches to Angular Form Validations
มุมมอง 20K3 ปีที่แล้ว
Advanced Approaches to Angular Form Validations
Angular Structural Directives and their Microsyntax
มุมมอง 6833 ปีที่แล้ว
Angular Structural Directives and their Microsyntax
Native Smooth Scroll with Pure CSS and JS
มุมมอง 26K3 ปีที่แล้ว
Native Smooth Scroll with Pure CSS and JS
Angular: Automatically Unsubscribe Observables on Destroy
มุมมอง 23K3 ปีที่แล้ว
Angular: Automatically Unsubscribe Observables on Destroy
thank you very much!!!
This is awsome thanks§!
"yay, the code does not compile! 🥳" funny how this experience is so universal.. Thanks for the great content, learnt a lot!
awesome css exlain, that's super helpful!!!!!👍👍👍👍
Thank you for this crystal clear information 👍
This is such a great video, it should have 100 of thousands of views!
Been searching for over an hour. This video is the best overview I’ve found. Thank you
This is fantastic)) But our project use Angular 7, how to achive that beautiful stack trace in ang 7?
В документации еще есть хороший пример, что если использовать это неправильно. Т.е. сделать все тоже самое за исключением общего свойства в интерфейсах, вот этого вот дискриминантного. Без него все может сломаться, потому что у интерфейсов поля разные. Обращаешься к полю, а его нет. Пытаешься уточнить, а не выходит. В документации пример с вычислением площадей различных фигур (квадрата и круга). Советую почитать
даже то, как сделано описание под видео, профессионально. Супер
Так мало лайков на такой полезный материал. Вы молодец, очень качественно все сделано. И анимации, и монтаж, и ваша речь, и объяснение, и субтитры, и даже ваш внешний вид. Продолжайте!
Mocking is stupid
Loved the series, thanks for taking the time to explain these concepts ❤
you are too sexy, i have to watch different video
fuuzy
Sadly your explanation is not correct, very incorrect in a non JavaScript world and very very very incorrect in a high level language as c# or java...
Nuuull? You mean null?
very clear explanation the best so far i found after seaching one hour
thanks for the knowledge sharing :)
One of the better methods is to use before property without additional div .
Extremely good explanation to a confusing concept
Great video for configuring tsconfig.json
Your explanations are extremely good. Thank you brother. God bless you.
Why does he look like a AI Generated person?
Already an obsolete strategy since there's an operator for that provided by angular. Also, there's cleaner things you can build now that the inject function and DestroyRef is a thing
Just wanted to let you know that you really helped out a fellow Angular dev here. Keep it up!
Cool way of teaching angular
Perfect video thanks!
Hey Lucas! Do you know if there is a way to apply ins css or JS a smooth scrolling effect to the entire page like when we scroll with the mouse wheel?
Explained simple and understandable.
nice, plz continue teaching angular
thanks
Amazing content
excpt you can't bind
KKKKKKKKKKKKKKKK, você me salvou e não foi pouco. Isso eu não sabia! TMJ!
TMJ 😎
Amassa muito não é pouco.
Valeu 😂
Thanks, very useful! You got yourself a new subscriber!
Skip to 3:00 to get to the actual content.
Can we have multiple selections here???
Damn bro, you so good Love ya
Thank you haha ❤️
I wonder how to add texts or words in between the switch such as on/off. Enabled/disabled. Any tips how to do it? Thanks
Hey Samantha! 🙂 If it's a small word, like on/off, I'd put it centered inside the white circle But if it's long, like enabled/disabled, I might show it in a tooltip In any case, this decision would have to come from the designers to make sure it complies with the brand's verbal and visual ID, makes sense?
Wbwbkw et kbttts
Wow this is just pure knowledge...great content ❤
Thank you 🙌
Great content and presentation.
Thanks! 🙂
Very nicely explained 😊
Thanks a lot 🙂
Subscribed!
Thanks for the support! 🚀
Excellent content, thank you.
Thanks for the feedback! 🙂
Nice video!!!
Thankssss! 🙂
Bravissimo! Grazie.
Thanksss 🙂
Try Flet, much simple
You mean Flet for Flutter? flet.dev/