How to Create Reusable Buttons - HTML, CSS & JavaScript Tutorial

In today's video, I'll show you how to build a function in JavaScript that you can reuse to build as many buttons as you need for your application. Once built, you can append these buttons to existing containers or other HTML elements.
Google Material Symbols 👇
fonts.google.com/icons
🏫 My Udemy Courses - www.udemy.com/user/domenic-co...
🎨 Download my VS Code theme - marketplace.visualstudio.com/...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #javascript #webdevelopment

Пікірлер: 15

  • @iqronegoro1538
    @iqronegoro15386 ай бұрын

    you deserve more views and subscribes in this 3 years...

  • @aidanbenbow6682
    @aidanbenbow66826 ай бұрын

    This is like making your own react!

  • @montebont
    @montebont6 ай бұрын

    Nice one Dom! An excellent example of "Separation of Concerns". I use the same approach myself to generate (see below) complex forms with loads of input and output fields, custom dropdowns etc. but a learned some useful things from your video. I agree that JSDoc is very helpful in this case because you get type hints in VS Code in vanilla JS. If you take this one step further you can use a (simple) generator to create complex forms. My "source" is an Excel sheet with all the elements and their attributes (including _dynamic_ type checking). I convert the Excel sheet to a JS object which is included in the app bootstrap and starts the form generator (html template based) which typically takes about 250 ms. I admit it is a bit of an DYI approach but I find it very useful for complex forms (50+ elements) that need frequent updates. All the best, Ed

  • @johnlabuci96
    @johnlabuci966 ай бұрын

    nice tutorial..

  • @bennybrouwer
    @bennybrouwer6 ай бұрын

    Hi Dom, Love your approach and trying to extend it to checkboxes, radio(group)s, etc. However, with a lot of questions . . , some examples . . - jQuery, React, (Underscore) do similar things but became too complicated for a simple (frontend) website. - "CSS / JS - Only" KZread Channels have become more and more popular compared to the above mentioned. - But, but . . you are thinking of expanding this way of programming. --:) that might mean thousands (I'm an optimist) of personal libraries with web-components that will never be re-used. So ... - Can you please make / propose some guidelines or preferences as part of your series? Thanks, Benny

  • @mariajegan2409
    @mariajegan24096 ай бұрын

    Bro wondert idea 🎉🎉🎉

  • @user-oz3hc6lj2e
    @user-oz3hc6lj2e4 ай бұрын

    will this work with tailwind css?

  • @user-mr2kv3nn1n
    @user-mr2kv3nn1n6 ай бұрын

    Hello Dom, Could you do other videos for other components ? It would be great to have a lightweight js framework 😅

  • @dcode-software

    @dcode-software

    6 ай бұрын

    Hey. Yeah I've got some more web components videos lined up

  • @Dexter101x
    @Dexter101x6 ай бұрын

    Can you do a tutorial on JSDoc please?

  • @bmehder

    @bmehder

    6 ай бұрын

    Yeah, since it is an option for typing in Svelte (as an alternative to TypeScript), it would be great to see how it works. Documentation for typing with JSDoc is a bit lacking, to say the least.

  • @dcode-software

    @dcode-software

    6 ай бұрын

    I've got a video on JSDoc here: kzread.info/dash/bejne/gKWqmLekhLW1kc4.htmlsi=6-MgXop25yI4ywYO

  • @bmehder

    @bmehder

    6 ай бұрын

    @@dcode-software Asked and answered. Thank you!

  • @Robdunnhill
    @Robdunnhill6 ай бұрын

    Will it work without the js doc or typescript?

  • @dcode-software

    @dcode-software

    6 ай бұрын

    Yeah, it'll still work. JS Doc only helps during development. If you can use TypeScript it's better though