Search code examples
javascripthtmlcsssassweb-component

How to create reusable button component with vanilla js and sass?

I have to make a reusable button component with vanilla js and scss, but I haven't done it yet. Can somebody explain how could I do it ? I am new at this so I don't know where to look for it.

Update: Do I have to use javascript or can I use only HTML and SCSS/CSS for it?

Solution

  • There are many solutions to do that. One simple solution is create the styles on css and toogle between the different subclasses , then, create a method o function to return this component with the values.

    var cusButton =  (i_params )  => {
var curButton = document.createElement ('INPUT'), buttonContainer;
curButton.classList.add  (i_params.classname);
curButton.type = 'button';
curButton.value = i_params.valueButton;
//the classname has the properties that you have to create before...
buttonContainer = document.getElementById
(i_params.idButContainer);
buttonContainer.appenChild  (curButton);

}

//Then, create one object for each button and call this function to populate the DOM with the new buttons:

var propButton ={ classname : 'created-class', valueButton : 'Click here to sens', idButContainer : 'id-name-node'};

cusButton  (propButton );