Andrea Gaertner
3 years ago
8 changed files with 141 additions and 0 deletions
+ 1
- 0
code/exercise04/README.txt
View File
| @@ -0,0 +1 @@ | |||
| Hier entsteht die Lösung zu Praktikum 04 | |||
+ 14
- 0
code/exercise04/app/css/style.css
View File
| @@ -0,0 +1,14 @@ | |||
| body { | |||
| background-color: lightblue; | |||
| text-align: center; | |||
| } | |||
| div { | |||
| padding-top: 20px; | |||
| border-style: groove; | |||
| border-color: black; | |||
| background-image: url("../img/schriftrolle.png"); | |||
| background-repeat: no-repeat; | |||
| background-position: center top; | |||
| margin-left: 300px; | |||
| margin-right: 300px; | |||
| } | |||
+ 22
- 0
code/exercise04/app/einkaufsliste.html
View File
| @@ -0,0 +1,22 @@ | |||
| <!DOCTYPE html> | |||
| <html> | |||
| <head> | |||
| <meta charset="utf-8" /> | |||
| <title>Einkaufsliste</title> | |||
| <link rel="icon" href="img/ohm.ico"> | |||
| <link rel="stylesheet" href="css/style.css"> | |||
| </head> | |||
| <body> | |||
| <h2> | |||
| Einkaufsliste | |||
| <img src="img/kisspng-shopping-bag-grocery-store-shopping-cart-vegetable-bag2-myspeedyx-5cb7cce50fbf87.6493526215555494130645.png" id="einkaufstüte" width="50" height="50"/> | |||
| </h2> | |||
| <div id="liste"> | |||
| </div> | |||
| <input type="text" id="element" ondblclick="onClick()" /> | |||
| <input type="button" id="button" value="Hinzufügen" onclick="onClick()" /> | |||
| <script src="scripts/einkaufsliste.js"></script> | |||
| </body> | |||
| </html> | |||
BIN
code/exercise04/app/img/kisspng-shopping-bag-grocery-store-shopping-cart-vegetable-bag2-myspeedyx-5cb7cce50fbf87.6493526215555494130645.png
View File
BIN
code/exercise04/app/img/ohm.ico
View File
BIN
code/exercise04/app/img/schriftrolle.png
View File
+ 25
- 0
code/exercise04/app/scripts/einkaufsliste.js
View File
| @@ -0,0 +1,25 @@ | |||
| | |||
| var counter = 0; | |||
| function onClick() { | |||
| var element = document.getElementById("element"); | |||
| console.log(element.value); | |||
| add(element.value); | |||
| } | |||
| function add(input) { | |||
| counter++; | |||
| var liste = document.getElementById("liste"); | |||
| var checkbox = document.createElement("input"); | |||
| checkbox.setAttribute("type", "checkbox"); | |||
| checkbox.setAttribute("id", "cb" + counter); | |||
| var label = document.createElement("label"); | |||
| label.innerHTML = input; | |||
| label.setAttribute("for", "cb" + counter); | |||
| liste.appendChild(checkbox); | |||
| liste.appendChild(label); | |||
| liste.appendChild(document.createElement("br")); | |||
| } | |||
+ 79
- 0
gulpfile.js
View File
| @@ -0,0 +1,79 @@ | |||
| const gulp = require('gulp'); | |||
| const imagemin = require('gulp-imagemin'); | |||
| const uglify = require('gulp-uglify'); | |||
| const uglifycss = require('gulp-uglifycss'); | |||
| const sass = require('gulp-sass'); | |||
| const concat = require('gulp-concat'); | |||
| /* | |||
| * Toplevelfunction | |||
| * gulp.task | |||
| * gulp.src | |||
| * gulp.dest | |||
| * gulp.watch | |||
| */ | |||
| // Logs Message | |||
| gulp.task('message', async function () { | |||
| return console.log('Gulp is running...'); | |||
| }); | |||
| // Copy All HTML files | |||
| gulp.task('copyHtml', async function () { | |||
| gulp.src('app/*.html') | |||
| .pipe(gulp.dest('dist')); | |||
| }); | |||
| // Optimize Images | |||
| gulp.task('imageMin', async function () { | |||
| gulp.src('app/img/*') | |||
| .pipe(imagemin()) | |||
| .pipe(gulp.dest('dist/images')) | |||
| }); | |||
| // Minify JS | |||
| gulp.task('minify', async function () { | |||
| gulp.src('app/scripts/*.js') | |||
| .pipe(uglify()) | |||
| .pipe(gulp.dest('dist/js')); | |||
| }); | |||
| // Compile Sass | |||
| gulp.task('sass', async function () { | |||
| gulp.src('app/sass/*.scss') | |||
| .pipe(sass().on('error', sass.logError)) | |||
| .pipe(gulp.dest('app/css')); | |||
| }); | |||
| // Minify CSS | |||
| gulp.task('css', async function () { | |||
| gulp.src('app/css/*.css') | |||
| .pipe(uglifycss({ | |||
| "maxLineLen": 80, | |||
| "uglyComments": true | |||
| })) | |||
| .pipe(gulp.dest('./dist/css')); | |||
| }); | |||
| // Scripts | |||
| gulp.task('scripts', async function () { | |||
| gulp.src('app/scripts/*.js') | |||
| .pipe(concat('landung.js')) | |||
| .pipe(uglify()) | |||
| .pipe(gulp.dest('dist/js')); | |||
| }); | |||
| gulp.task('run', function(done) { // <--- Insert `done` as a parameter here... | |||
| gulp.series('message','sass', 'css', 'copyHtml', 'imageMin', 'scripts') | |||
| done(); // <--- ...and call it here. | |||
| }) | |||
| /* | |||
| gulp.task('default', ['message', 'copyHtml', 'imageMin', 'sass', 'scripts']); | |||
| */ | |||
| gulp.task('watch', async function () { | |||
| gulp.watch('app/scripts/*.js', gulp.series('scripts')); | |||
| gulp.watch('app/img/*', gulp.series('imageMin')); | |||
| gulp.watch('app/sass/*.scss', gulp.series('sass')); | |||
| gulp.watch('app/css/*.css', gulp.series('css')); | |||
| gulp.watch('app/*.html', gulp.series('copyHtml')); | |||
| }); | |||
Loading…