I am wanting to create a browser based Game which will have multiple buttons. I am also beginning to learn encapsulation by to creating a class which when called with the method show()
will create 3 different elements(maybe with a loop?). I come with experience in React.js and I'm not sure if my example is correct but:
class Button {
constructor() {
this.text = "a button";
this.colour = "blue";
}
show() {
// some logic to show the button
}
}
and I am thinking of using it in another class such as Game maybe which is initialised on load.
class Game {
constructor() {
const button = new Button();
showButtons();
}
showButtons() {
// I want 3 different button elements here which can be different colours/text
button.show();
}
}
I am also doing this for extensibility, so that when someone needs a fourth button, they can just re-use the button class and change the text, or colour?
<div class="buttons"></div>
the first step in building this game is just to render 3 button elements in the above div. This is my question. How can I achieve this and is it the correct way? and I want to do this in vanilla JS
Please help and thanks in advance :-)