62 lines
1.6 KiB
JavaScript
62 lines
1.6 KiB
JavaScript
window.onload = main;
|
|
var d = document;
|
|
var container;
|
|
var button;
|
|
|
|
function main() {
|
|
console.log("JS loaded!");
|
|
container = d.getElementById("container");
|
|
addListeners(d.body, 'click', createbutton);
|
|
}
|
|
|
|
function addListeners(e, a, f) {
|
|
e.addEventListener(a, f);
|
|
}
|
|
|
|
class Button {
|
|
constructor(f) {
|
|
this.element = d.createElement("div");
|
|
this.element.id = "Button";
|
|
this.element.innerHTML = "<p>Button</p>";
|
|
container.appendChild(this.element);
|
|
addListeners(this.element, 'mouseover', HoverButton.applyShadow);
|
|
addListeners(this.element, 'mouseout', HoverButton.applyUnshadow);
|
|
addListeners(this.element, 'mouseout', HoverButton.applyUnpush);
|
|
addListeners(this.element, 'mousedown', PushButton.applyPush);
|
|
addListeners(this.element, 'mouseup', PushButton.applyUnpush);
|
|
}
|
|
}
|
|
|
|
class HoverButton extends Button {
|
|
constructor() {
|
|
super();
|
|
}
|
|
static applyShadow() {
|
|
button.element.style.boxShadow = "5px 5px 5px #6C5B7B";
|
|
}
|
|
static applyUnshadow() {
|
|
button.element.style.boxShadow = "none";
|
|
}
|
|
}
|
|
|
|
class PushButton extends Button {
|
|
constructor() {
|
|
super();
|
|
}
|
|
static applyPush(elem) {
|
|
button.element.style.backgroundColor = "#C06C84";
|
|
}
|
|
static applyUnpush(elem) {
|
|
button.element.style.backgroundColor = "#F67280";
|
|
}
|
|
}
|
|
|
|
function createbutton() {
|
|
console.log(container.children);
|
|
if(container.children.length == 0) {
|
|
button = new Button();
|
|
console.log("button created!");
|
|
}
|
|
d.body.removeEventListener("click", createbutton);
|
|
}
|