Simple Component Framework

Let's make a simple HTML game! This time, we’ll play Mastermind on a webpage, which will give us cool features for buttons and feedback. We’ll learn about some new tools too, like DOM elements (the pieces of a web page) and DOM events (what happens when you click or type). To keep things simple, we'll use an approach called Simple Component Framework to organize our code.

Here's how it works:

Components: Think of each part of the page as a component—a piece of our app. Each component is created with a Js Class. The whole app is under App Component which is Class App.
Grouping Similar Parts: Each component can contain smaller child Components if needed. For example, a game board component could have pieces or buttons inside it, the button can be another Component..
Communication: Components need to work together, like a team. They can connect to the main app or to each other to share info. We inject the App instance and parent Component as instances to child Component.
Event Listeners: Each component listens for actions, like a button click, and knows what to do when that happens. They have to be wrapped in a Component.
Actions: When something happens (like a user clicks "Guess"). If we want to change the DOM, that is an action, it has to be wrapped into a Class method called by itself or oursiders like App. We never change the DOM directly.

Using this setup, we can focus on the fun of building the game, without getting lost in too much HTML code. Let’s jump to the action in the next session! 🎮