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

Browse Source
This commit is contained in:
Philippe Torrel
2026-10-06 10:32:07 +02:00
parent 7e1d20d0ec
commit e8c2fc145f
14 changed files with 798 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files
03_js-dom/unterricht/tag21/03_website-gulp-js/assets/css/main.css
+605 -361
View File
File diff suppressed because it is too large Load Diff
03_js-dom/unterricht/tag21/03_website-gulp-js/contact.html
+11 -11
View File
@@ -6,15 +6,15 @@
<title>Webseite mit HTML & CSS (SCSS)</title>
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
<link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
<link rel="shortcut icon" href="/favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
<link rel="icon" type="image/png" href="./favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="./favicon/favicon.svg" />
<link rel="shortcut icon" href="./favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="JS Course" />
<link rel="manifest" href="/favicon/site.webmanifest" />
<link rel="manifest" href="./favicon/site.webmanifest" />
<link rel="stylesheet" href="/assets/css/main.css" />
<script src="/assets/js/build.js" defer></script>
<link rel="stylesheet" href="./assets/css/main.css" />
<script src="./assets/js/build.js" defer></script>
</head>
<body>
@@ -31,18 +31,18 @@
<!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link $} -->
<nav class="menu-main">
<ul class="list">
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="./">Home</a></li>
<li><a href="./about.html">About</a></li>
<li>
<a href="#dropdown">Projects</a>
<!-- ul.sublist>li*3>a[href="#"]{Project $} -->
<ul class="sublist">
<li><a href="/projects/01_jokes.html">01 Chuck Norris Jokes</a></li>
<li><a href="./projects/01_jokes.html">01 Chuck Norris Jokes</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</li>
<li><a href="/contact.html">Contact</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</nav>
03_js-dom/unterricht/tag21/03_website-gulp-js/dev/html/includes/head.html
+7 -7
View File
@@ -4,13 +4,13 @@
<title>Webseite mit HTML & CSS (SCSS)</title>
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
<link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
<link rel="shortcut icon" href="/favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
<link rel="icon" type="image/png" href="@@webRoot/favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="@@webRoot/favicon/favicon.svg" />
<link rel="shortcut icon" href="@@webRoot/favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="@@webRoot/favicon/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="JS Course" />
<link rel="manifest" href="/favicon/site.webmanifest" />
<link rel="manifest" href="@@webRoot/favicon/site.webmanifest" />
<link rel="stylesheet" href="/assets/css/main.css" />
<script src="/assets/js/build.js" defer></script>
<link rel="stylesheet" href="@@webRoot/assets/css/main.css" />
<script src="@@webRoot/assets/js/build.js" defer></script>
</head>
03_js-dom/unterricht/tag21/03_website-gulp-js/dev/html/includes/menu-main.html
+4 -4
View File
@@ -1,16 +1,16 @@
<nav class="menu-main">
<ul class="list">
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="@@webRoot/">Home</a></li>
<li><a href="@@webRoot/about.html">About</a></li>
<li>
<a href="#dropdown">Projects</a>
<!-- ul.sublist>li*3>a[href="#"]{Project $} -->
<ul class="sublist">
<li><a href="/projects/01_jokes.html">01 Chuck Norris Jokes</a></li>
<li><a href="@@webRoot/projects/01_jokes.html">01 Chuck Norris Jokes</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</li>
<li><a href="/contact.html">Contact</a></li>
<li><a href="@@webRoot/contact.html">Contact</a></li>
</ul>
</nav>
03_js-dom/unterricht/tag21/03_website-gulp-js/gulpfile.js
+3
View File
@@ -154,12 +154,15 @@ import * as dartSass from 'sass';
import gulpSass from 'gulp-sass';
import autoPrefixer from 'gulp-autoprefixer';
// import plumber from 'gulp-plumber';
const sass = gulpSass(dartSass);
task('css', (done) => {
const sourceFile = './dev/scss/main.scss';
const targetFolder = './assets/css';
src(sourceFile, { allowEmpty: true, sourcemaps: true })
// .pipe(plumber()) // Prevent pipe breaking caused by errors from gulp plugins
.pipe(
sass({
outputStyle: 'expanded',
03_js-dom/unterricht/tag21/03_website-gulp-js/index.html
+11 -11
View File
@@ -6,15 +6,15 @@
<title>Webseite mit HTML & CSS (SCSS)</title>
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
<link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
<link rel="shortcut icon" href="/favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
<link rel="icon" type="image/png" href="./favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="./favicon/favicon.svg" />
<link rel="shortcut icon" href="./favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="JS Course" />
<link rel="manifest" href="/favicon/site.webmanifest" />
<link rel="manifest" href="./favicon/site.webmanifest" />
<link rel="stylesheet" href="/assets/css/main.css" />
<script src="/assets/js/build.js" defer></script>
<link rel="stylesheet" href="./assets/css/main.css" />
<script src="./assets/js/build.js" defer></script>
</head>
<body>
@@ -31,18 +31,18 @@
<!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link $} -->
<nav class="menu-main">
<ul class="list">
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="./">Home</a></li>
<li><a href="./about.html">About</a></li>
<li>
<a href="#dropdown">Projects</a>
<!-- ul.sublist>li*3>a[href="#"]{Project $} -->
<ul class="sublist">
<li><a href="/projects/01_jokes.html">01 Chuck Norris Jokes</a></li>
<li><a href="./projects/01_jokes.html">01 Chuck Norris Jokes</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</li>
<li><a href="/contact.html">Contact</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</nav>
03_js-dom/unterricht/tag21/04_event-mouse-pointer/index.html
+1 -1
View File
@@ -95,7 +95,7 @@
});
// MouseEvent - mouseleave - Ereignis wird ausgelöst, wenn der Benutzer ein Element verlässt. (einmalig)
$('img').addEventListener('mouseenter', (e) => {
$('img').addEventListener('mouseleave', (e) => {
console.log('MouseEvent: ', e);
console.log('MOUSE_LEAVE');
});
03_js-dom/unterricht/tag21/05_event-keyboard/index.html
+8
View File
@@ -144,6 +144,14 @@
console.log('FocusEvent: ', e);
console.log('BLUR');
});
const onResize = (e) => {
// console.log(e);
console.log('width: ', window.outerWidth, 'height: ', window.outerHeight);
};
window.addEventListener('resize', onResize);
window.removeEventListener('resize', onResize);
</script>
</body>
</html>
03_js-dom/unterricht/tag21/07_chat-final/assets/js/main.js
+9 -1
View File
@@ -30,7 +30,7 @@
// === FUNCTIONS ========
const highlightListItemsBy = (searchValue = '') => {
DOM.listItems.forEach((el) => {
el.classList.remove('highlighted');
removeClass(el, 'highlighted');
const text = el.textContent.trim().toLowerCase();
if (searchValue != '' && text.includes(searchValue.trim().toLowerCase())) {
// el.classList.add('highlighted');
@@ -48,6 +48,14 @@
}
return el;
};
const removeClass = (el, className) => {
if (Array.isArray(className)) {
el.classList.remove(...className);
} else {
el.classList.remove(className);
}
return el;
};
init();
})();