Skip to content
Snippets Groups Projects
Commit f69ff267 authored by D4T3's avatar D4T3
Browse files

start of showcase website

parent 337159d3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
extra/pizza.html 0 → 100644
+ 0
− 0
View file @ f69ff267
u10/a3.html 0 → 100644
+ 224
− 0
View file @ f69ff267
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
word-wrap: break-word;
}
html {
height: 100%;
background-color: rgb(150, 214, 152);
}
header {
background-color: rgb(150, 214, 152);
text-align: center;
font-size: x-large;
height: 6rem;
width: 100%;
}
.menubutton {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 8px;
}
.left {
background-color: rgb(150, 214, 152);
height: 60rem;
width: 20%;
}
article {
background-color: white;
height: 60rem;
width: 60%;
}
.right {
background-color: rgb(150, 214, 152);
height: 60rem;
width: 20%;
}
body {
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 600px) {
aside.right {
width: 100%;
height: 5rem;
}
header {
height: 10rem;
}
article {
width: 80%;
}
}
@media screen and (max-width: 300px) {
* {
border: 0;
}
article {
width: 100%;
}
aside.left,
aside.right {
width: 50%;
height: 5rem;
}
article {
order: 1;
}
aside.left {
order: 2;
}
aside.right {
order: 3;
}
}
</style>
</head>
<body>
<header id="header">WWW-Navigator<br>
<menubutton v-for="item in text" v-bind:url="item.url" v-bind:name="item.name"></menubutton>
</header>
<aside class="left" id="left">
<menubutton v-for="item in text" v-bind:url="item.url" v-bind:name="item.name"></menubutton>
</aside>
<article id="article"></article>
<aside class="right" id="right"></aside>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
fetchJSON("menus.json").then(function (text) {loadMenu(text)});
window.onhashchange = function() {
updateMenu();
}
new Vue({
el: '#header',
data: fetchJSON("menus.json").then(function (text) {return Object.keys(text)})
});
new Vue({
el: '#left',
data: fetchJSON("menus.json").then(function (text) {
var mainKeys = Object.keys(text);
let subKeys = [];
for(var i=0; i<mainKeys.length; i++){
let key = mainKeys[i];
for(subKey in text[key]){
subKeys.push(subKey);
}
}
return subKeys;
})
});
Vue.component('menubutton',{
props: ["name","url"],
template: `
<a class="menubutton" v-bind:href="url">{{name}}</a>
`
});
async function fetchJSON(url) {
try {
let request = await fetch(url);
let text = await request.text();
return JSON.parse(text);
}
catch (error) {
console.log("ERROR:", error);
}
}
function changeMenu(){
console.log("changeMenu("+this.hash+") called");
window.open("#"+this.hash,"_self");
let keyValues = this.hash.split("/");
//load text
if(keyValues.length >= 2){
document.getElementById("article").textContent = document.getElementById(keyValues[1]).content;
}
//document.getElementById("article").innerHTML = text[keyValues[0]][keyValues[1]];
updateMenu();
}
function updateMenu(){
if(window.location.hash) {
var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
let keyValues = hash.split("/");
let buttons = document.getElementsByTagName("a");
//loop through all buttons and disable the ones we do not need while showing the other ones
for(var i=0; i<buttons.length;i++){
let address = buttons[i].hash.split("/");
//is sub menu button
if(address.length >= 2){
if(address[0] != keyValues[0]){
buttons[i].style.display = "none";
} else {
buttons[i].style.display = "inline";
if(address[1] == keyValues[1]){
buttons[i].style.background="#000000";
document.getElementById("article").innerHTML = buttons[i].content;
} else {
buttons[i].style.background="#4CAF50";
}
}
} else {
if(address[0] == keyValues[0]){
buttons[i].style.background="#000000";
document.getElementById("article").innerHTML = buttons[i].content;
} else {
buttons[i].style.background="#4CAF50";
}
}
}
} else {
// No hash found
}
}
</script>
</body>
</html>
\ No newline at end of file
u2/a1.txt deleted 100644 → 0
+ 0
− 12
View file @ 337159d3
Mit welchen fachlichen Argumenten wurde das WWW-Proposal von TBL abgelehnt?
- "broken links" wurden zugelassen
- http benutzt Text ohne klare Semantik und keine Objekte
Was sind die fachlichen Argumente, warum das WWW dennoch ein Erfolg wurde?
- frei zugänglich
- einfach zu lernen
- unabhängig und dezentral weiter entwickelbar
Was wäre der Preis für die garantierte Verhinderung von “broken links”?
Eine zentrale Kontrolle mit Datenbank
u2/a2.txt deleted 100644 → 0
+ 0
− 29
View file @ 337159d3
Was ist HTML?
HTML ist eine markup language die dafür benutzt wird um Text sowie Daten zu formatieren und zu gliedern, womit es dann möglich ist eine Webseiten zu erstellen
Wie kann man eine geschachtelte geordnete Liste der Schachtelungstiefe 3 erzeugen?
<ul>
<li>Tiefe 1</li>
<ul>
<li>Tiefe 2</li>
<ul>
<li>Tiefe 3</li>
</ul>
</ul>
</ul>
Wie ist eine HTML-Tabelle aufgebaut?
Man definiert die Tabelle mit dem <table> tag und für jede Zeile in dieser Tabelle wird mit <tr> definiert. Table Header können im Zeilen Tag mit <th> definiert werden und standardmäßige Einträge mit <td>. Table Header werden hierbei fett und mittig angezeigt. Mit dem "colspan" Attribut kann die Spaltengröße der Einträge verändert werden.
Welche Konventionen sollte man bei Pfaden und Dateinamen beachten?
Die URL Konventionen.
Dateinamen sollten außerdem im Idealfall keine Leerzeichen enthalten.
Wie baut man in HTML ein Menü?
Durch erstellen eines div und Veränderung des "class" Attributes lässt sich ein Menü definieren. Einzelne Einträge werden mit dem <a> Tag definiert, wobei mit dem "href" Attribut Verlinkungen auf andere Seiten/Dokumente möglich sind.
Welche Attribute sollte man bei Bildern wie verwenden?
src="bild.jpg": URL des Anzuzeigenden Bildes
alt="Das Bild": Text der angezeigt wird falls das Bild nicht geladen werden konnte
style="width:128px;height:128px;": Veränderung von width und height
width="128" height="128": Breite bzw. Höhe des Bildes skalieren
u4/a1.html
+ 11
− 53
View file @ f69ff267
......@@ -20,14 +20,14 @@
return x;
}
}
//console.log(identity_function("test"));
console.log(identity_function("test"));
function addf(a) {
return function (b) {
return a + b;
}
}
//console.log("addf: " + addf(4)(3));
console.log("addf: " + addf(4)(3));
function applyf(f) {
return function (a) {
......@@ -36,27 +36,27 @@
}
}
}
//console.log("applyf: " + applyf(add)(3)(4));
console.log("applyf: " + applyf(add)(3)(4));
function curry(f, a) {
return function (b) {
return f(a, b);
}
}
//var add3 = curry(add,4);
//console.log("curry: " + add3(4));
var add3 = curry(add, 4);
console.log("curry: " + add3(4));
var inc = applyf(addf)(1)(null);
//console.log(inc)
//console.log("inc: " + inc(1));
console.log(inc)
console.log("inc: " + inc(1));
function methodize(f) {
return function (b) {
return f(this, b);
}
}
//Number.prototype.myMethod = methodize(add);
//console.log((4).myMethod(6));
Number.prototype.myMethod = methodize(add);
console.log((4).myMethod(6));
//does not work without more context
function demethodize(p) {
......@@ -64,7 +64,7 @@
return (a).p(b);
}
}
console.log("demethodize", demethodize(Number.prototype.myMethod)(5, 6));
//console.log("demethodize", demethodize(Number.prototype.myMethod)(5, 6));
function twice(f) {
return function (a) {
......@@ -111,11 +111,9 @@
}
counter = counterf(10);
/*
console.log("counter", counter.inc());
console.log("counter", counter.inc());
console.log("counter", counter.dec());
*/
function revocable(func) {
var isRevoked = false;
......@@ -161,50 +159,10 @@
Array.prototype.append.apply(this, arguments);
};
function Fifo() {
this.data = [];
}
Fifo.prototype.add = function (record) {
this.data.unshift(record);
}
Fifo.prototype.remove = function () {
this.data.pop();
}
Fifo.prototype.first = function () {
return this.data[0];
}
Fifo.prototype.size = function () {
return this.data.length;
}
function Menge() {
this.data = [];
}
Menge.prototype.add = function (record) {
this.data.unshift(record);
}
Menge.prototype.remove = function () {
this.data.pop();
}
Menge.prototype.first = function () {
return this.data[0];
}
Menge.prototype.size = function () {
return this.data.length;
}
</script>
<body>
In die Konsole gucken
</body>
</html>
\ No newline at end of file
u4/a2.html
+ 57
− 1
View file @ f69ff267
<!DOCTYPE html>
<html>
<head>
<title>u4 a2</title>
<meta charset="UTF-8">
</head>
<script>
function Fifo() {
this.data = [];
}
Fifo.prototype.add = function (record) {
this.data.unshift(record);
}
Fifo.prototype.remove = function () {
this.data.pop();
}
Fifo.prototype.first = function () {
return this.data[0];
}
Fifo.prototype.size = function () {
return this.data.length;
}
function Menge() {
this.data = [];
}
Menge.prototype.add = function (record) {
this.data.unshift(record);
}
Menge.prototype.remove = function () {
this.data.pop();
}
Menge.prototype.first = function () {
return this.data[0];
}
Menge.prototype.size = function () {
return this.data.length;
}
</script>
<body>
In die Konsole gucken
</body>
</html>
\ No newline at end of file
website/elements.js
+ 125
− 51
View file @ f69ff267
import { LitElement, html, css } from 'https://unpkg.com/lit-element?module';;
class MyElement extends LitElement {
class MenuNavbar extends LitElement {
static get properties() {
return {
menuData: { type: Array }
};
}
static get properties() {
return {
menuData: { type: Array }
};
}
constructor() {
// Always call super() first
super();
constructor() {
// Always call super() first
super();
this.menuData = [];
this.fetchJSON('menu.json');
this.menuData = [];
this.fetchJSON('menu.json');
}
}
render() {
if (this.menuData.length > 0) {
return html`
render() {
if (this.menuData.length > 0) {
return html`
<div class="navbar">
${this.menuData.map(topic =>
html`
html`
<div class="dropdown">
<button class="dropbtn">${topic.name}</button>
<div class="dropdown-content">
${topic.links.map(link =>
html`
html`
<a href="#${link.hash}">${link.name}</a>
`)}
</div>
</div>
`)}
</div>
`;
} else {
return html`
} else {
return html`
<p>Menu not found</p>
`;
}
}
/*
return html`
<div class="navbar">
<a href="#home">Home</a>
<div class="dropdown">
<button class="dropbtn">Aufgabe 2
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
</div>
</div>
`;*/
}
async fetchJSON(url) {
try {
let request = await fetch(url);
let jsonObj = await request.json();
this.menuData = jsonObj.sites;
}
catch (error) {
console.log("ERROR:", error);
}
async fetchJSON(url) {
try {
let request = await fetch(url);
let jsonObj = await request.json();
this.menuData = jsonObj.sites;
}
catch (error) {
console.log("ERROR:", error);
}
}
static get styles() {
return css`
static get styles() {
return css`
/* Based on https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp */
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
color: white;
}
/* Links inside the navbar */
......@@ -107,9 +94,9 @@ class MyElement extends LitElement {
margin: 0; /* Important for vertical align on mobile phones */
}
/* Add a red background color to navbar links on hover */
/* Add a background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
background-color: orange;
}
/* Dropdown content (hidden by default) */
......@@ -142,10 +129,97 @@ class MyElement extends LitElement {
display: block;
}
`;
}
}
}
class ToggleButton extends LitElement {
static get properties() {
return {
activated: { type: Boolean }
};
}
constructor() {
// Always call super() first
super();
this.activated = false;
}
render() {
return html`
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
`;
}
customElements.define('my-element', MyElement);
static get styles() {
return css`
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: orange;
}
input:focus + .slider {
box-shadow: 0 0 1px orange;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
`;
}
}
customElements.define('menu-navbar', MenuNavbar);
customElements.define('toggle-button', ToggleButton);
website/index.html
+ 2
− 4
View file @ f69ff267
......@@ -10,12 +10,10 @@
<body>
<header>
<my-element></my-element>
<menu-navbar></menu-navbar>
Load dynamically: <toggle-button></toggle-button>
</header>
<aside class="left"></aside>
<article id="content"></article>
<aside class="right">Test
</aside>
</body>
......
website/mainStyle.css
+ 6
− 33
View file @ f69ff267
......@@ -8,19 +8,11 @@ header {
width: 100%;
}
.left {
/*background-color: green;*/
width: 20%;
}
article {
height: 1080px;
width: 60%;
}
.right {
/*background-color: purple;*/
width: 20%;
width: 90%;
margin-left: auto;
margin-right: auto;
}
body {
......@@ -39,13 +31,11 @@ body {
overflow:scroll;
}
aside.right {
width: 100%;
height: 5rem;
}
article {
width: 80%;
width: 90%;
margin-left: auto;
margin-right: auto;
}
}
......@@ -59,26 +49,9 @@ body {
width: 100%;
}
aside.left,
aside.right {
width: 50%;
height: 5rem;
}
.loadedContent {
overflow: scroll;
}
article {
order: 1;
}
aside.left {
order: 2;
}
aside.right {
order: 3;
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment