Lucas Paganini
Lucas Paganini
  • 46
  • 478 810
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
มุมมอง: 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
How to Choose a JavaScript Framework
มุมมอง 9K3 ปีที่แล้ว
How to Choose a JavaScript Framework
Angular: Automatically Unsubscribe Observables on Destroy
มุมมอง 23K3 ปีที่แล้ว
Angular: Automatically Unsubscribe Observables on Destroy

ความคิดเห็น

  • @harrykekgmail
    @harrykekgmail หลายเดือนก่อน

    thank you very much!!!

  • @MariaSchüller
    @MariaSchüller 2 หลายเดือนก่อน

    This is awsome thanks§!

  • @wgllgw
    @wgllgw 2 หลายเดือนก่อน

    "yay, the code does not compile! 🥳" funny how this experience is so universal.. Thanks for the great content, learnt a lot!

  • @zhangjinhui9370
    @zhangjinhui9370 3 หลายเดือนก่อน

    awesome css exlain, that's super helpful!!!!!👍👍👍👍

  • @SuhailkcOfficial
    @SuhailkcOfficial 3 หลายเดือนก่อน

    Thank you for this crystal clear information 👍

  • @Ithamir
    @Ithamir 3 หลายเดือนก่อน

    This is such a great video, it should have 100 of thousands of views!

  • @ArronTaylor-wm8es
    @ArronTaylor-wm8es 3 หลายเดือนก่อน

    Been searching for over an hour. This video is the best overview I’ve found. Thank you

  • @РинатРаот
    @РинатРаот 4 หลายเดือนก่อน

    This is fantastic)) But our project use Angular 7, how to achive that beautiful stack trace in ang 7?

  • @МБДомСемьи
    @МБДомСемьи 5 หลายเดือนก่อน

    В документации еще есть хороший пример, что если использовать это неправильно. Т.е. сделать все тоже самое за исключением общего свойства в интерфейсах, вот этого вот дискриминантного. Без него все может сломаться, потому что у интерфейсов поля разные. Обращаешься к полю, а его нет. Пытаешься уточнить, а не выходит. В документации пример с вычислением площадей различных фигур (квадрата и круга). Советую почитать

  • @МБДомСемьи
    @МБДомСемьи 5 หลายเดือนก่อน

    даже то, как сделано описание под видео, профессионально. Супер

  • @МБДомСемьи
    @МБДомСемьи 5 หลายเดือนก่อน

    Так мало лайков на такой полезный материал. Вы молодец, очень качественно все сделано. И анимации, и монтаж, и ваша речь, и объяснение, и субтитры, и даже ваш внешний вид. Продолжайте!

  • @internetexplorer7880
    @internetexplorer7880 5 หลายเดือนก่อน

    Mocking is stupid

  • @EmbeddedMastery
    @EmbeddedMastery 6 หลายเดือนก่อน

    Loved the series, thanks for taking the time to explain these concepts ❤

  • @Excellent226002
    @Excellent226002 7 หลายเดือนก่อน

    you are too sexy, i have to watch different video

  • @raunaquepatra3966
    @raunaquepatra3966 8 หลายเดือนก่อน

    fuuzy

  • @chrischy
    @chrischy 8 หลายเดือนก่อน

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

  • @chrischy
    @chrischy 8 หลายเดือนก่อน

    Nuuull? You mean null?

  • @MY-rl6pv
    @MY-rl6pv 8 หลายเดือนก่อน

    very clear explanation the best so far i found after seaching one hour

  • @AndreaPartenope
    @AndreaPartenope 10 หลายเดือนก่อน

    thanks for the knowledge sharing :)

  • @indianlion9652
    @indianlion9652 10 หลายเดือนก่อน

    One of the better methods is to use before property without additional div .

  • @pirategirl94best
    @pirategirl94best 10 หลายเดือนก่อน

    Extremely good explanation to a confusing concept

  • @m-falcon
    @m-falcon 11 หลายเดือนก่อน

    Great video for configuring tsconfig.json

  • @afairywithdemonwings
    @afairywithdemonwings 11 หลายเดือนก่อน

    Your explanations are extremely good. Thank you brother. God bless you.

  • @MDopBeats
    @MDopBeats 11 หลายเดือนก่อน

    Why does he look like a AI Generated person?

  • @PlerbyMcFlerb
    @PlerbyMcFlerb 11 หลายเดือนก่อน

    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

  • @vutruong4164
    @vutruong4164 ปีที่แล้ว

    Just wanted to let you know that you really helped out a fellow Angular dev here. Keep it up!

  • @LeoTriggered
    @LeoTriggered ปีที่แล้ว

    Cool way of teaching angular

  • @rennnn...
    @rennnn... ปีที่แล้ว

    Perfect video thanks!

  • @ricardopatta
    @ricardopatta ปีที่แล้ว

    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?

  • @touseef_baba_007
    @touseef_baba_007 ปีที่แล้ว

    Explained simple and understandable.

  • @mahdiandalib186
    @mahdiandalib186 ปีที่แล้ว

    nice, plz continue teaching angular

  • @codingroom928
    @codingroom928 ปีที่แล้ว

    thanks

  • @appedro2070
    @appedro2070 ปีที่แล้ว

    Amazing content

  • @user-zl5gi8sv7u
    @user-zl5gi8sv7u ปีที่แล้ว

    excpt you can't bind

  • @MolotovClipes
    @MolotovClipes ปีที่แล้ว

    KKKKKKKKKKKKKKKK, você me salvou e não foi pouco. Isso eu não sabia! TMJ!

  • @MolotovClipes
    @MolotovClipes ปีที่แล้ว

    Amassa muito não é pouco.

  • @vonderklaas
    @vonderklaas ปีที่แล้ว

    Thanks, very useful! You got yourself a new subscriber!

  • @herzogatomsprengkopfensen4696
    @herzogatomsprengkopfensen4696 ปีที่แล้ว

    Skip to 3:00 to get to the actual content.

  • @shahabnoor6576
    @shahabnoor6576 ปีที่แล้ว

    Can we have multiple selections here???

  • @Wraith090
    @Wraith090 ปีที่แล้ว

    Damn bro, you so good Love ya

  • @samanthasong6039
    @samanthasong6039 ปีที่แล้ว

    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

    • @LucasPaganiniWeb
      @LucasPaganiniWeb ปีที่แล้ว

      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?

  • @gulvantmakwana1368
    @gulvantmakwana1368 ปีที่แล้ว

    Wbwbkw et kbttts

  • @mohasinkr
    @mohasinkr ปีที่แล้ว

    Wow this is just pure knowledge...great content ❤

  • @anupsingh24
    @anupsingh24 ปีที่แล้ว

    Great content and presentation.

  • @patelhetal2232
    @patelhetal2232 ปีที่แล้ว

    Very nicely explained 😊

  • @Lambdaphile
    @Lambdaphile ปีที่แล้ว

    Subscribed!

  • @sebastienbruno5565
    @sebastienbruno5565 ปีที่แล้ว

    Excellent content, thank you.

  • @yaregobrozek3725
    @yaregobrozek3725 ปีที่แล้ว

    Nice video!!!

  • @attiliop.8639
    @attiliop.8639 ปีที่แล้ว

    Bravissimo! Grazie.

  • @SP-db6sh
    @SP-db6sh ปีที่แล้ว

    Try Flet, much simple