From 187ddf96836a9ba052c4afbbe12f3bdb725865cf Mon Sep 17 00:00:00 2001 From: Jonas Leder Date: Sun, 30 Jan 2022 11:18:16 +0100 Subject: [PATCH] implement red and green button on 404 page --- js/customElements/404Buttons.js | 66 +++++++++++++++++++++++++++++++++ js/script.js | 3 +- public/404.html | 8 +--- 3 files changed, 70 insertions(+), 7 deletions(-) create mode 100644 js/customElements/404Buttons.js diff --git a/js/customElements/404Buttons.js b/js/customElements/404Buttons.js new file mode 100644 index 0000000..e3ce348 --- /dev/null +++ b/js/customElements/404Buttons.js @@ -0,0 +1,66 @@ +class notFoundButtons extends HTMLElement { + constructor() { + super(); + + this.windowResized = false; + + const redButton = document.createElement("div"); + redButton.classList.add("button"); + redButton.classList.add("red"); + this.appendChild(redButton); + + const yellowButton = document.createElement("div"); + yellowButton.classList.add("button"); + yellowButton.classList.add("yellow"); + this.appendChild(yellowButton); + + const greenButton = document.createElement("div"); + greenButton.classList.add("button"); + greenButton.classList.add("green"); + this.appendChild(greenButton); + + greenButton.onclick + + greenButton.onclick = () => { + const terminal = document.querySelector(".terminal-window"); + if (!this.windowResized) { + terminal.style.width = "95%"; + terminal.style.height = "95%"; + terminal.style.top = "2%"; + this.windowResized = true; + } else { + terminal.style.width = "37.5rem"; + terminal.style.height = "22.5rem"; + terminal.style.top = "10.5rem"; + } + } + + redButton.onclick = () => { + location.href = "https://jonasled.de"; + } + + + } + + getWidth() { + return Math.max( + document.body.scrollWidth, + document.documentElement.scrollWidth, + document.body.offsetWidth, + document.documentElement.offsetWidth, + document.documentElement.clientWidth + ); + } + + getHeight() { + return Math.max( + document.body.scrollHeight, + document.documentElement.scrollHeight, + document.body.offsetHeight, + document.documentElement.offsetHeight, + document.documentElement.clientHeight + ); + } +} + +customElements.define("jl-404_buttons", notFoundButtons); \ No newline at end of file diff --git a/js/script.js b/js/script.js index 0eb3ebf..fa9464a 100644 --- a/js/script.js +++ b/js/script.js @@ -20,4 +20,5 @@ require("./customElements/ebkBanner"); require("./customElements/sellingTable"); require("./customElements/skills"); require("./customElements/pwgen"); -require("./customElements/inline-code"); \ No newline at end of file +require("./customElements/inline-code"); +require("./customElements/404Buttons"); \ No newline at end of file diff --git a/public/404.html b/public/404.html index 7d5e931..9dba6f7 100644 --- a/public/404.html +++ b/public/404.html @@ -5,14 +5,10 @@ 404 - Page not found - - -
+
-
-
-
+