This commit is contained in:
Philippe Torrel
@@ -0,0 +1,41 @@
|
||||
## Optionale Übungsaufgabe 1: Responsive Navigation mit Hamburger-Menü
|
||||
|
||||
### 1. HTML-Struktur & Icon-Vorbereitung
|
||||
|
||||
Erweitere die bestehende Navigationsstruktur im Projet `webseite-gulp` um das notwendige Markup für einen Menü-Toggle.
|
||||
|
||||
1. **Hamburger-Icon-Markup einfügen:** Füge innerhalb Deines `<nav>`-Elements das HTML für den Menü-Toggle ein.
|
||||
- Du kannst hierfür die animierten Icons von [jonsuh.com/hamburgers/](https://jonsuh.com/hamburgers/) verwenden.
|
||||
2. **Zustandsklasse definieren:** Überlege Dir eine **Kontrollklasse** (z.B. `nav-open` oder `is-active`), die Du später per JavaScript auf das `<body>`-Tag oder das `<nav>`-Element setzt, um den **geöffneten Zustand** zu signalisieren.
|
||||
|
||||
### 2. CSS-Styling & Media Query (Mobile First)
|
||||
|
||||
Stelle sicher, dass die Navigation standardmäßig für die mobile Ansicht funktioniert, und passe sie dann für größere Bildschirme an.
|
||||
|
||||
1. **Mobile Standard (bis $575\text{px}$):**
|
||||
|
||||
- Die **Hauptmenüpunkte** müssen standardmäßig **versteckt** sein (`display: none;` oder per `transform` aus dem Sichtfeld geschoben).
|
||||
- Das **Hamburger-Icon** muss in dieser Ansicht **sichtbar** sein.
|
||||
- Definiere die **Darstellung des geöffneten Menüs** (mithilfe Deiner Zustandsklasse, z.B. `.nav-open .menu-list`). Gestalte es als nutzerfreundliches Fullscreen-Overlay oder Sidebar für mobile Geräte.
|
||||
|
||||
2. **Desktop-Übergang (ab $576\text{px}$):**
|
||||
|
||||
- Füge die notwendige **Media Query** hinzu:
|
||||
```css
|
||||
@media (min-width: 576px) {
|
||||
/* ... hier die Desktop-Regeln ... */
|
||||
}
|
||||
```
|
||||
- Innerhalb dieser Media Query:
|
||||
- Mache die **Hauptmenüpunkte dauerhaft sichtbar** und ordne sie im Desktop-Layout an.
|
||||
- Blende das **Hamburger-Icon aus** (`display: none;`).
|
||||
|
||||
---
|
||||
|
||||
### 3. JavaScript-Interaktivität (Menü-Toggle)
|
||||
|
||||
Implementiere die Logik, die das Umschalten des Menüzustands steuert, wenn das Icon geklickt wird.
|
||||
|
||||
1. **Event-Listener:** Füge dem **Hamburger-Icon** einen `click`-Event-Listener hinzu.
|
||||
|
||||
2. **Klasse togglen:** Im Click-Handler **togglet** Du die **Zustandsklasse** (`nav-open` oder `is-active`) auf dem Element (z.B. dem `<body>` oder `<nav>`), das Du im CSS zur Steuerung verwendest. Ein Klick öffnet das Menü, der erneute Klick schließt es. Vergesse dabei nicht dem Menü Icon die passende Klasse zum hinzufügen des Effekts zu vergeben.
|
||||
@@ -0,0 +1,24 @@
|
||||
# Optionale Übungen
|
||||
|
||||
## 1. Tooltip als Modul verwenden
|
||||
|
||||
Intergriere das Plugin [`floating-ui`](https://floating-ui.com/)
|
||||
in die Webseite.
|
||||
|
||||
## 2. Integration eines weiteren Moduls
|
||||
|
||||
- Intergriere ein weiteres Modul deiner Wahl in die Webseite.
|
||||
|
||||
## 3. Formularvalidierung als Modul
|
||||
|
||||
Erstelle ein Modul für die Validierung von einem Formular (`FormValidator`) mit folgenden Feldern
|
||||
|
||||
- Vor- und Nachname
|
||||
- E-Mail
|
||||
- Adresse bestehend aus:
|
||||
- Strasse, Hausnummer
|
||||
- PLZ, Ort
|
||||
- Land
|
||||
- Nachricht
|
||||
|
||||
Die Validierung soll direkt während (`input`) oder nach der Eingabe (`blur`) der Felder stattfinden. Die Verwendung von Validierungsmodulen wie `validator` dürfen dabei verwenden werden.
|
||||
Binary file not shown.
@@ -0,0 +1,4 @@
|
||||
.light-bulbs{
|
||||
padding: 1rem;
|
||||
border: 2px solid #555;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
@@ -0,0 +1,92 @@
|
||||
// Helper DOM Selektion mit $ & $$
|
||||
const $ = (qs) => document.querySelector(qs);
|
||||
const $$ = (qs) => Array.from(document.querySelectorAll(qs));
|
||||
|
||||
Node.prototype.on = function(name, fn) {
|
||||
this.addEventListener(name, fn);
|
||||
return this;
|
||||
};
|
||||
|
||||
// // anstatt
|
||||
// document.querySelector('button').addEventListener('click', (event) => { });
|
||||
// // wird zu:
|
||||
// document.querySelector('button').on('click', (event) => { });
|
||||
|
||||
Array.prototype.on = Array.prototype.addEventListener = function(name, fn) {
|
||||
this.forEach((elem) => elem.on(name, fn));
|
||||
return this;
|
||||
};
|
||||
|
||||
// anstatt
|
||||
// Array.from(document.querySelectorAll('.menu-main li a')).forEach((elem) =>
|
||||
// elem.addEventListener('click', (event) => {
|
||||
// console.log(event);
|
||||
// })
|
||||
// );
|
||||
// // wird zu
|
||||
// Array.from(document.querySelectorAll('.menu-main li a')).on(
|
||||
// 'click',
|
||||
// (event) => {
|
||||
// console.log(event);
|
||||
// }
|
||||
// );
|
||||
|
||||
|
||||
|
||||
// helper
|
||||
const $on = (el, ev, fn) => {
|
||||
Array.isArray(el) ? el.forEach(ae => $on(ae, ev, fn)) :
|
||||
el.addEventListener(ev, fn);
|
||||
return el;
|
||||
};
|
||||
|
||||
// times - funktion
|
||||
function times(n, fn) {
|
||||
const result = Array(n);
|
||||
for (let i = 0; i < n; i++) {
|
||||
result[i] = fn(i);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
// oder von lodash
|
||||
function baseTimes(n, iteratee) {
|
||||
var index = -1,
|
||||
result = Array(n);
|
||||
|
||||
while (++index < n) {
|
||||
result[index] = iteratee(index);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/*
|
||||
* range(zahl bis wohin array befüllt werden soll) : array
|
||||
* - array von 0 bis
|
||||
parameterzahl (nicht inklusive)
|
||||
*
|
||||
* range(anfangswert, endwert) : array
|
||||
* - array von anfangswert bis endwert (nicht inklusive)
|
||||
*
|
||||
* range(nfangswert, endwert, übersprungswert) : : array
|
||||
* - array von anfangswert bis endwert (nicht inklusive), zwischenwerte durch übersprungswert entfallen
|
||||
*/
|
||||
function rangeFromStartToEnd(start, end, step = 1) {
|
||||
const length = Math.max(Math.ceil((end - start) / step), 0);
|
||||
const result = new Array(length);
|
||||
const sign = step / Math.abs(step);
|
||||
|
||||
let index = 0;
|
||||
for (let value = start; value * sign < end * sign; value += step) {
|
||||
result[index++] = value;
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
|
||||
function range(startOrEnd, end, step) {
|
||||
if (end) {
|
||||
return rangeFromStartToEnd(startOrEnd, end, step);
|
||||
} else {
|
||||
return rangeFromStartToEnd(0, startOrEnd);
|
||||
}
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,20 @@
|
||||
'use strict';
|
||||
|
||||
(() => {
|
||||
// === DOM & VARS =======
|
||||
const DOM = {};
|
||||
|
||||
const LIGHT_PATH_ON = 'assets/img/light_on.png';
|
||||
const LIGHT_PATH_OFF = 'assets/img/light_off.png';
|
||||
|
||||
// === INIT =============
|
||||
const init = () => {};
|
||||
|
||||
// === EVENTHANDLER =====
|
||||
|
||||
// === XHR/FETCH ========
|
||||
|
||||
// === FUNCTIONS ========
|
||||
|
||||
init();
|
||||
})();
|
||||
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 10 - Chasing Lights</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="assets/css/main.css" />
|
||||
<script src="assets/js/main.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container py-5">
|
||||
<div class="alert alert-primary">
|
||||
<h2>Übung 10 - Chasing Lights</h2>
|
||||
|
||||
<p>
|
||||
Eine erste Variante sind die chasing Lights. Dabei muss der Anwender das Lauflicht mit der Maus »jagen«. Immer
|
||||
wenn der Mauszeiger sich über einer Glühbirne befindet, schaltet sich die nächste Birne ein und die aktuelle
|
||||
aus. Versucht der Benutzer, mit dem Mauszeiger die leuchtende Glühbirne zu berühren, springt das Licht auf die
|
||||
nächste über. Er »jagt« quasi das Lauflicht. Bei der letzten Lampe beginnt das Spiel wieder von vorn!
|
||||
</p>
|
||||
<p>
|
||||
Programmiere ein weiteres Lauflicht. Diesmal soll das Lauflicht weiterspringen, wenn der Benutzer auf eine der
|
||||
Lampen klickt. Auch hier gilt: Nach der letzten Lampe fängt das Licht wieder von vorn an zu laufen.
|
||||
</p>
|
||||
</div>
|
||||
<div class="light-bulbs">
|
||||
<img src="assets/img/light_on.png" alt="lightbulb" />
|
||||
<img src="assets/img/light_off.png" alt="lightbulb" />
|
||||
<img src="assets/img/light_off.png" alt="lightbulb" />
|
||||
<img src="assets/img/light_off.png" alt="lightbulb" />
|
||||
<img src="assets/img/light_off.png" alt="lightbulb" />
|
||||
<img src="assets/img/light_off.png" alt="lightbulb" />
|
||||
<img src="assets/img/light_on.png" alt="lightbulb" />
|
||||
<img src="assets/img/light_off.png" alt="lightbulb" />
|
||||
<img src="assets/img/light_off.png" alt="lightbulb" />
|
||||
<img src="assets/img/light_off.png" alt="lightbulb" />
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,369 @@
|
||||
/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */
|
||||
|
||||
/* ---------------- CSS-Reset ------------------- */
|
||||
html,
|
||||
body,
|
||||
a,
|
||||
div,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
span,
|
||||
p,
|
||||
img,
|
||||
strong,
|
||||
ul,
|
||||
li,
|
||||
table,
|
||||
th,
|
||||
td,
|
||||
tr {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
border: 0px none;
|
||||
font-weight: normal;
|
||||
font-style: inherit;
|
||||
font-family: inherit;
|
||||
font-variant: inherit;
|
||||
text-decoration: none;
|
||||
table-layout: inherit;
|
||||
}
|
||||
|
||||
/* ---------------- Body / HTML ------------------- */
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
background-color: #fffef7;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 1.2em;
|
||||
font-weight: normal;
|
||||
color: black;
|
||||
margin: 0rem auto 2rem auto;
|
||||
}
|
||||
|
||||
/* ---------------- layout ------------------- */
|
||||
|
||||
header {
|
||||
background: url(../img/js_header.png) left top no-repeat transparent;
|
||||
background-size: cover;
|
||||
height: 250px;
|
||||
min-width: 850px;
|
||||
}
|
||||
|
||||
header:after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
height: 250px;
|
||||
background: rgba(255, 254, 247, 0);
|
||||
background: -moz-linear-gradient(
|
||||
top,
|
||||
rgba(255, 254, 247, 0) 0%,
|
||||
rgba(255, 254, 247, 0.55) 22%,
|
||||
rgba(255, 254, 247, 0.7) 42%,
|
||||
rgba(255, 254, 247, 0.71) 43%,
|
||||
rgba(255, 254, 247, 0.78) 61%,
|
||||
rgba(255, 254, 247, 0.92) 75%,
|
||||
rgba(255, 254, 247, 1) 87%,
|
||||
rgba(255, 254, 247, 1) 100%
|
||||
);
|
||||
background: -webkit-gradient(
|
||||
left top,
|
||||
left bottom,
|
||||
color-stop(0%, rgba(255, 254, 247, 0)),
|
||||
color-stop(22%, rgba(255, 254, 247, 0.55)),
|
||||
color-stop(42%, rgba(255, 254, 247, 0.7)),
|
||||
color-stop(43%, rgba(255, 254, 247, 0.71)),
|
||||
color-stop(61%, rgba(255, 254, 247, 0.78)),
|
||||
color-stop(75%, rgba(255, 254, 247, 0.92)),
|
||||
color-stop(87%, rgba(255, 254, 247, 1)),
|
||||
color-stop(100%, rgba(255, 254, 247, 1))
|
||||
);
|
||||
background: -webkit-linear-gradient(
|
||||
top,
|
||||
rgba(255, 254, 247, 0) 0%,
|
||||
rgba(255, 254, 247, 0.55) 22%,
|
||||
rgba(255, 254, 247, 0.7) 42%,
|
||||
rgba(255, 254, 247, 0.71) 43%,
|
||||
rgba(255, 254, 247, 0.78) 61%,
|
||||
rgba(255, 254, 247, 0.92) 75%,
|
||||
rgba(255, 254, 247, 1) 87%,
|
||||
rgba(255, 254, 247, 1) 100%
|
||||
);
|
||||
background: -o-linear-gradient(
|
||||
top,
|
||||
rgba(255, 254, 247, 0) 0%,
|
||||
rgba(255, 254, 247, 0.55) 22%,
|
||||
rgba(255, 254, 247, 0.7) 42%,
|
||||
rgba(255, 254, 247, 0.71) 43%,
|
||||
rgba(255, 254, 247, 0.78) 61%,
|
||||
rgba(255, 254, 247, 0.92) 75%,
|
||||
rgba(255, 254, 247, 1) 87%,
|
||||
rgba(255, 254, 247, 1) 100%
|
||||
);
|
||||
background: -ms-linear-gradient(
|
||||
top,
|
||||
rgba(255, 254, 247, 0) 0%,
|
||||
rgba(255, 254, 247, 0.55) 22%,
|
||||
rgba(255, 254, 247, 0.7) 42%,
|
||||
rgba(255, 254, 247, 0.71) 43%,
|
||||
rgba(255, 254, 247, 0.78) 61%,
|
||||
rgba(255, 254, 247, 0.92) 75%,
|
||||
rgba(255, 254, 247, 1) 87%,
|
||||
rgba(255, 254, 247, 1) 100%
|
||||
);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 254, 247, 0) 0%,
|
||||
rgba(255, 254, 247, 0.55) 22%,
|
||||
rgba(255, 254, 247, 0.7) 42%,
|
||||
rgba(255, 254, 247, 0.71) 43%,
|
||||
rgba(255, 254, 247, 0.78) 61%,
|
||||
rgba(255, 254, 247, 0.92) 75%,
|
||||
rgba(255, 254, 247, 1) 87%,
|
||||
rgba(255, 254, 247, 1) 100%
|
||||
);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
|
||||
}
|
||||
|
||||
main,
|
||||
footer {
|
||||
width: 70%;
|
||||
margin: 3rem auto;
|
||||
min-width: 850px;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ---------------- Content ------------------- */
|
||||
|
||||
h1 {
|
||||
color: #93412b;
|
||||
font-size: 3em;
|
||||
margin-bottom: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #93412b;
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #93412b;
|
||||
font-size: 2em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 15px;
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.7em;
|
||||
}
|
||||
|
||||
.cited {
|
||||
font-style: italic;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.u {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.b {
|
||||
font-weight: bold;
|
||||
}
|
||||
.i {
|
||||
font-style: italic;
|
||||
}
|
||||
.align_right {
|
||||
text-align: right;
|
||||
}
|
||||
.align_left {
|
||||
text-align: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.align_center {
|
||||
text-align: center;
|
||||
}
|
||||
.float_left {
|
||||
float: left;
|
||||
}
|
||||
.float_right {
|
||||
float: right;
|
||||
}
|
||||
.clear_both {
|
||||
clear: both;
|
||||
}
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
.special {
|
||||
color: #b7595b;
|
||||
font-weight: bold;
|
||||
}
|
||||
.keyword {
|
||||
color: #db6f50;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
.gray,
|
||||
.grey {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
main a:link,
|
||||
main a:visited {
|
||||
color: #eb690b;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
main a:focus,
|
||||
main a:hover,
|
||||
main a:active {
|
||||
color: #eb690b;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-position: outside;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
ol {
|
||||
margin-bottom: 20px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
/* ------- Article ------- */
|
||||
|
||||
h1 {
|
||||
color: #93412b;
|
||||
font-size: 2.7em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#buy_form input[type='button'] {
|
||||
display: inline-block;
|
||||
padding: 1px 20px 3px 20px;
|
||||
background-color: #93412b;
|
||||
color: white;
|
||||
border: 1px solid white;
|
||||
font-size: 1em;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
#buy_form input[type='button']:hover {
|
||||
background-color: white;
|
||||
color: #93412b;
|
||||
border: 1px solid #93412b;
|
||||
}
|
||||
|
||||
#buy_form select {
|
||||
display: inline-block;
|
||||
font-size: 1em;
|
||||
background-color: white;
|
||||
color: #93412b;
|
||||
border: 1px solid #93412b;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
/* ------- Chat ------- */
|
||||
|
||||
#chat {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
border: 1px solid #9c352f;
|
||||
height: 20rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#chat_window {
|
||||
background-color: white;
|
||||
width: 85%;
|
||||
float: left;
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
#chat_history {
|
||||
position: absolute;
|
||||
bottom: 8%;
|
||||
max-height: 92%;
|
||||
padding: 0px 0px 5px 7px;
|
||||
}
|
||||
|
||||
#chat_history p {
|
||||
font-size: 0.6em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#chat_text {
|
||||
height: 8%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
#chat_text input {
|
||||
width: 98%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#chat_members {
|
||||
list-style-type: none;
|
||||
height: 100%;
|
||||
width: 15%;
|
||||
margin-left: 85%;
|
||||
border-left: 1px solid #9c352f;
|
||||
text-align: right;
|
||||
box-sizing: border-box;
|
||||
min-width: 100px;
|
||||
font-size: 0.8em;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
#chat_members li {
|
||||
line-height: 1.2em;
|
||||
padding: 5px 10px 2px 15px;
|
||||
}
|
||||
|
||||
#chat_members .highlighted {
|
||||
background-color: #c14d45;
|
||||
color: white;
|
||||
}
|
||||
.chat_member {
|
||||
font-weight: bold;
|
||||
}
|
||||
.chat_member1 {
|
||||
color: #3626c8;
|
||||
}
|
||||
.chat_member2 {
|
||||
color: #e38d0b;
|
||||
}
|
||||
|
||||
#member_search {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 15%;
|
||||
height: 8%;
|
||||
}
|
||||
|
||||
#member_search input {
|
||||
width: 88%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
text-align: right;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 316 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
@@ -0,0 +1,107 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<title>010010000100111101010100</title>
|
||||
<meta name="description" content="JavaScript. HTML mühelos manipuliert" />
|
||||
|
||||
<link rel="stylesheet" href="assets/css/styles.css" type="text/css" media="screen" />
|
||||
<link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header></header>
|
||||
|
||||
<main>
|
||||
<h1 class="article">
|
||||
Hot Binary Heat Changing Mug
|
||||
<span class="keyword">"010010000100111101010100"</span>
|
||||
</h1>
|
||||
|
||||
<img
|
||||
alt="Hot Binary Heat Changing Mug"
|
||||
src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif"
|
||||
class="float_left"
|
||||
id="product_img" />
|
||||
|
||||
<h2>Description</h2>
|
||||
|
||||
<p>
|
||||
Numbers make up
|
||||
<span class="special">everything</span> in our digital world. They flow around us, invisible like the Force or
|
||||
the Matrix, controlling all our many computer-y devices. Two numbers, in particular:
|
||||
<span class="special">0 and 1</span>. <span class="b i">Off and On</span>. Well, we can tell you this: when
|
||||
there's no coffee in our cup, we're completely OFF our game. But when our mug is full of hot coffee, we're
|
||||
totally ON. And now, with the <span class="keyword">Hot Binary Heat Changing Mug</span>, there's a mug that
|
||||
tells us which state our mug is in. In binary!
|
||||
</p>
|
||||
|
||||
<p>
|
||||
See, the
|
||||
<span class="keyword">Hot Binary Heat Changing Mug</span>
|
||||
looks like just a dark mug with binary numbers all over it. That's its OFF or cold state. Add hot coffee (or any
|
||||
liquid) and a series of digits will turn white. Read them continuously from left to right, and you'll read:
|
||||
<span class="keyword">010010000100111101010100</span>. That's <span class="special">in binary</span>. Of course,
|
||||
your
|
||||
<span class="keyword">Hot Binary Heat Changing Mug</span>
|
||||
could just be paying you a compliment. Cheeky, mug.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<img alt="010010000100111101010100" src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg" />
|
||||
</p>
|
||||
|
||||
<h2>Product Specifications</h2>
|
||||
|
||||
<ul id="product_specification">
|
||||
<li class="keyword">Hot Binary Heat Changing Mug</li>
|
||||
<li>
|
||||
As you add hot liquids, the binary for "HOT" appears (read from left to right in one line, not two:
|
||||
010010000100111101010100)
|
||||
</li>
|
||||
<li>A <span class="keyword">ThinkGeek</span> creation and exclusive!</li>
|
||||
<li>
|
||||
Care Instructions:
|
||||
<span class="i b">Hand wash only. Not microwave or dishwasher safe.</span>
|
||||
</li>
|
||||
<li>Materials: Ceramic</li>
|
||||
<li>Dimensions: approx. 3.15" diameter x 3.75" tall</li>
|
||||
</ul>
|
||||
|
||||
<h3>You wanna buy it?</h3>
|
||||
|
||||
<p class="buy_info_text">If you like to buy this brilliant mug, just do the following steps:</p>
|
||||
|
||||
<ol class="model" data-model="LDV73C-X3">
|
||||
<li>Select how many items do you want.</li>
|
||||
<li>Press "buy".</li>
|
||||
</ol>
|
||||
|
||||
<form id="buy_form">
|
||||
<select>
|
||||
<option>1 item</option>
|
||||
<option>2 items</option>
|
||||
<option>3 items</option>
|
||||
<option>4 items</option>
|
||||
</select>
|
||||
<input type="button" value="buy" />
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<footer>(C) by ThinkGeek – Produkttext mit freundlicher Genehmigung von ThinkGeek Inc.</footer>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
{
|
||||
const $ = (qs) => document.querySelector(qs);
|
||||
const $$ = (qs) => Array.from(document.querySelectorAll(qs));
|
||||
|
||||
// Übung 11: — Teil 6
|
||||
// Der neue Wunsch besteht darin, den Text blau (blue) zu färben. Dieses Mal darfst du keine CSS-Klassen verwenden.
|
||||
|
||||
// Weise allen p-Elementen mithilfe des Style-Objektes die Farbe blue zu. Du kannst dafür direkt die JavaScript-Konsole verwenden.
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,49 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 12: Farbe Wechsel Dich</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
|
||||
<style>
|
||||
button[data-color] {
|
||||
border: 5px solid #efefef;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>Übung 12: Farbe Wechsel Dich</h1>
|
||||
|
||||
<div class="buttons">
|
||||
<button class="btn btn-danger button-red" data-color="#c00"><i class="fa-solid fa-droplet"></i>Red</button>
|
||||
<button class="btn btn-success button-green" data-color="#080">
|
||||
<i class="fa-solid fa-droplet"></i>Green
|
||||
</button>
|
||||
<button class="btn btn-primary button-blue" data-color="#00F"><i class="fa-solid fa-droplet"></i>Blue</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
(() => {
|
||||
const $ = (qs) => document.querySelector(qs);
|
||||
const $$ = (qs) => Array.from(document.querySelectorAll(qs));
|
||||
// === DOM & VARS =======
|
||||
const DOM = {};
|
||||
|
||||
// === INIT =============
|
||||
const init = () => {};
|
||||
|
||||
// === EVENTHANDLER =====
|
||||
|
||||
init();
|
||||
|
||||
// Übung 12: Farbe wechsle dich
|
||||
// Platziere drei Buttons (button-Tag) auf einer Seite mit den Texten »Red«, »Green« und »Blue«. Bei Betätigung eines Buttons soll sich der Hintergrund der Seite entsprechend färben.
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 13: Farbe Wechsel Dich — Teil 2</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<style>
|
||||
.range-colors > div {
|
||||
background-color: rgba(200, 200, 200, 0.6);
|
||||
padding: 2rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>Übung 13: Farbe Wechsel Dich — Teil 2</h1>
|
||||
|
||||
<div class="range-colors">
|
||||
<div class="mb-3">
|
||||
<label for="input-red" class="form-label">Rot</label>
|
||||
<input
|
||||
type="range"
|
||||
class="form-range input-red"
|
||||
name="red"
|
||||
id="input-red"
|
||||
min="0"
|
||||
max="255"
|
||||
step="1"
|
||||
value="255" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="input-green" class="form-label">Grün</label>
|
||||
<input
|
||||
type="range"
|
||||
class="form-range input-green"
|
||||
name="green"
|
||||
id="input-green"
|
||||
min="0"
|
||||
max="255"
|
||||
step="1"
|
||||
value="255" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="input-blue" class="form-label">Blau</label>
|
||||
<input
|
||||
type="range"
|
||||
class="form-range input-blue"
|
||||
name="blue"
|
||||
id="input-blue"
|
||||
min="0"
|
||||
max="255"
|
||||
step="1"
|
||||
value="255" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<strong>Aktuelle Farbe:</strong>
|
||||
<span id="current-color">rgb(255, 255, 255)</span>
|
||||
<span id="current-hex-color">#FFFFFF</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
(() => {
|
||||
// === DOM & VARS =======
|
||||
const $ = (qs) => document.querySelector(qs);
|
||||
const $$ = (qs) => Array.from(document.querySelectorAll(qs));
|
||||
|
||||
const DOM = {};
|
||||
|
||||
// === INIT =============
|
||||
const init = () => {};
|
||||
|
||||
// === EVENTHANDLER =====
|
||||
|
||||
// === XHR/FETCH ========
|
||||
|
||||
// === FUNCTIONS ========
|
||||
|
||||
init();
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,86 @@
|
||||
.main-wrapper {
|
||||
margin: 5rem auto;
|
||||
width: 650px;
|
||||
padding: 1rem;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.tours-grid {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 200px 200px 0.5fr;
|
||||
gap: 1rem;
|
||||
grid-template-areas:
|
||||
'item1 item2'
|
||||
'item1 item3'
|
||||
'item4 item4';
|
||||
}
|
||||
|
||||
#fr {
|
||||
grid-area: item1;
|
||||
}
|
||||
|
||||
#uk {
|
||||
grid-area: item2;
|
||||
}
|
||||
|
||||
#it {
|
||||
grid-area: item3;
|
||||
}
|
||||
|
||||
#info {
|
||||
grid-area: item4;
|
||||
|
||||
border: 2px solid #000077;
|
||||
padding: 0.5rem;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.tours {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.m-tours #info img {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.flag {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.french-flag::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
background: red url('../img/fr.png') no-repeat;
|
||||
background-size: cover;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.union-jack::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
background: red url('../img/uk.png') no-repeat;
|
||||
background-size: cover;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.italian-flag::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
background: red url('../img/it.png') no-repeat;
|
||||
background-size: cover;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 165 B |
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-fr" viewBox="0 0 640 480">
|
||||
<path fill="#fff" d="M0 0h640v480H0z"/>
|
||||
<path fill="#000091" d="M0 0h213.3v480H0z"/>
|
||||
<path fill="#e1000f" d="M426.7 0H640v480H426.7z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 231 B |
Binary file not shown.
|
After Width: | Height: | Size: 168 B |
@@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-it" viewBox="0 0 640 480">
|
||||
<g fill-rule="evenodd" stroke-width="1pt">
|
||||
<path fill="#fff" d="M0 0h640v480H0z"/>
|
||||
<path fill="#009246" d="M0 0h213.3v480H0z"/>
|
||||
<path fill="#ce2b37" d="M426.7 0H640v480H426.7z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 289 B |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 986 B |
@@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-gb" viewBox="0 0 640 480">
|
||||
<path fill="#012169" d="M0 0h640v480H0z"/>
|
||||
<path fill="#FFF" d="m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z"/>
|
||||
<path fill="#C8102E" d="m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z"/>
|
||||
<path fill="#FFF" d="M241 0v480h160V0zM0 160v160h640V160z"/>
|
||||
<path fill="#C8102E" d="M0 193v96h640v-96zM273 0v480h96V0z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 504 B |
@@ -0,0 +1,17 @@
|
||||
'use strict';
|
||||
|
||||
(() => {
|
||||
// === DOM & VARS =======
|
||||
const DOM = {};
|
||||
|
||||
// === INIT =============
|
||||
const init = () => {};
|
||||
|
||||
// === EVENTHANDLER =====
|
||||
|
||||
// === XHR/FETCH ========
|
||||
|
||||
// === FUNCTIONS ========
|
||||
|
||||
init();
|
||||
})();
|
||||
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 14: awesome tours</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="assets/css/awesome-tours.css" />
|
||||
<script src="assets/js/awesome-tours.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="main-wrapper">
|
||||
<h1>Übung 14: awesome tours</h1>
|
||||
|
||||
<div class="m-tours tours-grid">
|
||||
<div id="fr">
|
||||
<img
|
||||
src="assets/img/eiffelturm.jpg"
|
||||
alt="Eiffel Tower"
|
||||
data-description="The Eiffel Tower (/ˈaɪfəl ˈtaʊər/ eye-fəl towr; French: Tour Eiffel French pronunciation: [tuʁ‿ɛfɛl] About this sound listen) is a wrought iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower..."
|
||||
data-country-code="fr"
|
||||
data-flag-name="French-Flag" />
|
||||
</div>
|
||||
|
||||
<div id="uk">
|
||||
<img
|
||||
src="assets/img/tower_bridge.jpg"
|
||||
alt="Tower Bride"
|
||||
data-description="Tower Bridge (built 1886–1894) is a combined bascule and suspension bridge in London. The bridge crosses the River Thames close to the Tower of London and has become an iconic symbol of London. Tower Bridge is one of five London bridges now owned..."
|
||||
data-country-code="uk"
|
||||
data-flag-name="Union-Jack" />
|
||||
</div>
|
||||
|
||||
<div id="it">
|
||||
<img
|
||||
src="assets/img/colosseum.jpg"
|
||||
alt="Colosseum"
|
||||
data-description="The Colosseum or Coliseum (/kɒləˈsiːəm/ kol-ə-see-əm), also known as the Flavian Amphitheatre (Latin: Amphitheatrum Flavium; Italian: Anfiteatro Flavio [amfiteˈaːtro ˈflaːvjo] or Colosseo [kolosˈsɛːo]), is an oval amphitheatre in the centre of the city of Rome, Italy. Built of concrete and sand,[1] it is the largest amphitheatre ever built. The Colosseum is situated just east of the Roman Forum. Construction began..."
|
||||
data-country-code="it"
|
||||
data-flag-name="Italian-Flag" />
|
||||
</div>
|
||||
<section id="info">
|
||||
<p>Move your mouse pointer over the images to read the descriptions here!</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Reference in New Issue
Block a user