ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: init produt-manager

Browse Source
This commit is contained in:
Philippe Torrel
2026-07-17 10:55:56 +02:00
parent 145dee58e6
commit 748fbb6b8d
14 changed files with 331 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
03_dom/uebungen/u11_tasse-01001/index.html
View File

@@ -93,15 +93,35 @@
<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.
// === DOM & VARS =======
const DOM = {
pEls: $$('p'),
h1Els: $$('h1'),
};
// Weise allen p-Elementen mithilfe des Style-Objektes die Farbe blue zu. Du kannst dafür direkt die JavaScript-Konsole verwenden.
}
// === INIT =============
const init = () => {
DOM.pEls.forEach((p) => {
p.style.color = 'blue';
});
DOM.h1Els.forEach((h1) => {
h1.style.color = 'red';
});
};
init();
})();
// Ü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>

20
03_dom/uebungen/u12_button-bg-color/index.html
View File

@@ -27,18 +27,34 @@
</div>
</main>
<script>
'use strict';
'use strict';
(() => {
const $ = (qs) => document.querySelector(qs);
const $$ = (qs) => Array.from(document.querySelectorAll(qs));
// === DOM & VARS =======
const DOM = {};
const DOM = {
btnsColor: $$('button[data-color]'),
body: $('body'),
};
// === INIT =============
const init = () => {};
const init = () => {
DOM.btnsColor.forEach((button) => {
button.addEventListener('click', changeColor);
});
};
// === EVENTHANDLER =====
const changeColor = (e) => {
const newColor = e.currentTarget.dataset.color;
DOM.body.style.backgroundColor = newColor;
//window.document.body.style.backgroundColor = newColor;
};
init();
// Übung 12: Farbe wechsle dich

44
03_dom/uebungen/u13_range-bg-color/index.html
View File

@@ -57,8 +57,8 @@
</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>
<span class="current-color">rgb(255, 255, 255)</span>
<span class="current-hex-color">#FFFFFF</span>
</div>
</div>
</div>
@@ -71,16 +71,52 @@
const $ = (qs) => document.querySelector(qs);
const $$ = (qs) => Array.from(document.querySelectorAll(qs));
const DOM = {};
const module = $('.range-colors');
const DOM = {
inputRanges: Array.from(module.querySelectorAll('input[type="range"]')),
inputRed: module.querySelector('.input-red'),
inputGreen: module.querySelector('.input-green'),
inputBlue: module.querySelector('.input-blue'),
currentColor: module.querySelector('.current-color'),
currentHexColor: module.querySelector('.current-hex-color'),
};
// === INIT =============
const init = () => {};
const init = () => {
updateBackgroundColor(DOM.inputRed.value, DOM.inputGreen.value, DOM.inputBlue.value);
updateColorInfo();
DOM.inputRanges.forEach((el) => {
el.addEventListener('input', changeBackgroundColor);
});
};
// === EVENTHANDLER =====
const changeBackgroundColor = (e) => {
updateBackgroundColor(DOM.inputRed.value, DOM.inputGreen.value, DOM.inputBlue.value);
updateColorInfo();
};
// === XHR/FETCH ========
// === FUNCTIONS ========
const updateBackgroundColor = (r, g, b) => {
document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
};
const updateColorInfo = () => {
const r = DOM.inputRed.value;
const g = DOM.inputGreen.value;
const b = DOM.inputBlue.value;
const hexRed = Number(r).toString(16).padStart(2, '0').toUpperCase();
const hexGreen = Number(g).toString(16).padStart(2, '0').toUpperCase();
const hexBlue = Number(b).toString(16).padStart(2, '0').toUpperCase();
console.log(hexRed);
DOM.currentColor.textContent = `rgb(${r},${g},${b} )`;
DOM.currentHexColor.textContent = `#${hexRed}${hexGreen}${hexBlue}`;
};
init();
})();

81
03_dom/uebungen/u14_awesome-tours/assets/js/awesome-tours-adel.js Normal file
View File

@@ -0,0 +1,81 @@
'use strict';
(() => {
const $ = (qs) => document.querySelector(qs);
const $$ = (qs) => Array.from(document.querySelectorAll(qs));
// === DOM & VARS =======
const DOM = {
france: $('#fr'),
england: $('#uk'),
italian: $('#it'),
info: $('#info p'),
imgFrance: $('#fr').querySelector('img'),
imgEngland: $('#uk').querySelector('img'),
imgItalien: $('#it').querySelector('img'),
};
console.log(DOM);
// === INIT =============
const init = () => {
DOM.info.dataset.info = DOM.info.textContent;
//bildFrance.addEventListener('mouseenter', onMouseEnterOfFrance);
DOM.imgFrance.addEventListener('mouseenter', onMouseEnter);
DOM.imgFrance.addEventListener('mouseleave', onMouseLeave);
DOM.imgEngland.addEventListener('mouseenter', onMouseEnter);
DOM.imgEngland.addEventListener('mouseleave', onMouseLeave);
DOM.imgItalien.addEventListener('mouseenter', onMouseEnter);
DOM.imgItalien.addEventListener('mouseleave', onMouseLeave);
};
// === EVENTHANDLER =====
// const onMouseEnterOfFrance = (e) => {
// const img = e.currentTarget;
// DOM.info.textContent = img.dataset.description;
// // DOM.info.style.color = 'blue';
// // DOM.info.style.backgroundColor.color = 'green';
// };
const onMouseEnter = (e) => {
console.log('enter');
const img = e.currentTarget;
console.log(img);
DOM.info.textContent = img.dataset.description;
DOM.info.style.color = 'white';
DOM.info.style.backgroundColor = 'green';
};
const onMouseLeave = () => {
DOM.info.textContent = DOM.info.dataset.info;
DOM.info.style.color = 'black';
DOM.info.style.backgroundColor = 'white';
};
init();
})();
// Übung 14: Awesome Tours
// Das Reiseunternehmen Awesome Tours bietet Rundreisen zu verschiedenen Sehenswürdigkeiten in Europa an. Im Zuge eines Rebuilds der Website möchte das Unternehmen die Darstellung der Sehenswürdigkeiten ebenfalls modernisieren. Das Design inklusive HTML- und CSS-Code hat bereits eine Agentur übernommen.
// Die Informationen zu den Sehenswürdigkeiten (Name, Beschreibung, Land usw.) sind dabei bereits im HTML-Code hinterlegt. Deine Aufgabe ist es nun, bei Mouseenter eine Darstellung wie in Abb. 28 zu ermöglichen.
// Dazu gehört folgende Anzeige:
// - Name der Sehenswürdigkeit
// - Beschreibung
// - Landesflagge als Bild
// Das HTML zur Anzeige der Eiffelturm-Infos könnte beispielsweise so aussehen:
// <section id="info">
// <h3>
// <img src="it.png" alt="Italian Flag" title="Italian Flag">
// Colosseum
// </h3>
// <p>
// The Colosseum or Coliseum, also known as the Flavian Amphitheatre or Colosseo, is an oval amphitheatre in...
// </p>
// </section>

54
03_dom/uebungen/u14_awesome-tours/assets/js/awesome-tours.js
View File

@@ -2,12 +2,38 @@
(() => {
// === DOM & VARS =======
const DOM = {};
const module = document.querySelector('.m-tours');
const DOM = {
imgEls: Array.from(module.querySelectorAll('img')),
infoBox: document.querySelector('#info'),
};
console.log(DOM.infoBox);
// === INIT =============
const init = () => {};
const init = () => {
module.dataset.info = DOM.infoBox.innerHTML.trim();
DOM.imgEls.forEach((el) => {
el.addEventListener('mouseenter', onMouseEnterImage);
});
module.addEventListener('mouseleave', onMouseLeave);
};
// === EVENTHANDLER =====
const onMouseEnterImage = (e) => {
const { description, countryCode, flagName } = e.currentTarget.dataset;
const title = e.currentTarget.alt;
console.log(title);
// DOM.infoBox.innerHTML = `${description} ${countryCode} ${alt}`;
DOM.infoBox.innerHTML = `<h3><img src="assets/img/${countryCode}.svg" alt="${flagName}" \> ${title}</h3><p>${description}</p>`;
};
const onMouseLeave = (e) => {
DOM.infoBox.innerHTML = module.dataset.info;
};
// === XHR/FETCH ========
@@ -15,3 +41,27 @@
init();
})();
// Übung 14: Awesome Tours
// Das Reiseunternehmen Awesome Tours bietet Rundreisen zu verschiedenen Sehenswürdigkeiten in Europa an. Im Zuge eines Rebuilds der Website möchte das Unternehmen die Darstellung der Sehenswürdigkeiten ebenfalls modernisieren. Das Design inklusive HTML- und CSS-Code hat bereits eine Agentur übernommen.
// Die Informationen zu den Sehenswürdigkeiten (Name, Beschreibung, Land usw.) sind dabei bereits im HTML-Code hinterlegt. Deine Aufgabe ist es nun, bei Mouseenter eine Darstellung wie in Abb. 28 zu ermöglichen.
// Dazu gehört folgende Anzeige:
// - Name der Sehenswürdigkeit
// - Beschreibung
// - Landesflagge als Bild
// Das HTML zur Anzeige der Eiffelturm-Infos könnte beispielsweise so aussehen:
// <section id="info">
// <h3>
// <img src="it.png" alt="Italian Flag" title="Italian Flag">
// Colosseum
// </h3>
// <p>
// The Colosseum or Coliseum, also known as the Flavian Amphitheatre or Colosseo, is an oval amphitheatre in...
// </p>
// </section>

2
03_dom/uebungen/u14_awesome-tours/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />