[S4L3] Components 1

Question 1

Warum benutzt man Components?

Answer 1

• Da große Projekte oft wiederholende Codeteile besitzen
• Weniger Komplexität/Fehler/Wartung
• Man entspricht dem DRY-Prinzip besser

Question 2

Was ist eine Component?

Answer 2

-Ein wiederverwendbares Stück Software, welches ein Teile eines großen ganzen sein kann

Question 3

Wie schreibt man Components in CSS?

Answer 3

@import custom-btn.less
.custom-btn {
  // custom styles here
}

Question 4

Wie schreibt man Components in Javascript?

Answer 4

const buttons = document. querySelectorAll('.button');
class Button {
  constructor(element){
    this. element = element;
    this. element.addEventListener('click', () => { this. buttonClick() });
  }
  button Click(event){
    console. log('button clicked!');
  } 
}

Question 5

Wie erschafft man Components im Javascript DOM?

RETURN!

Answer 5

//Schritt3: Build out the Panel base class
class Panel {
  constructor(panel) {
    this.panel = panel:
    this.panelButtons = this.panel.querySelector('.oanel-buttons');
    this.panelBtnOpen = this.panel .querySelector('.oanel-btn-open');
    this.panelBtnClose = this.panel .querySelector('.oanel-btn-close');
this.panelContent = this.panel .querySelector('.oanel-content');

this.panelButtons.addEventListeners(‘click’, this.togglePanel.bind(this));

//BESSER! , this not bound to the arrow so the compiler looks it up under the constructor
this.panelButtons.addEventListeners('click', () => this.togglePanel());

}
togglePanel() {
this.panelBTnOpen.classList.toggle(‘hide-btn’);
this.panelBTnClose.classList.toggle(‘hide-btn’);
this.panelBTnOpen.classList.toggle(‘hide-btn’);
this.paneContent.classList.toggle(‘toggle-on’);
}
}

//Schritt1: Get the original DOM elements
const panels = document. querySelectorAll('.panel');

//Schritt2: Return a newly constructed DOM element
panels. forEach(function(panel){
return new Panel(panel);
});