Andrea Gaertner
4 years ago
8 changed files with 141 additions and 0 deletions
+ 1
- 0
code/exercise04/README.txt
View File
| Hier entsteht die Lösung zu Praktikum 04 |
+ 14
- 0
code/exercise04/app/css/style.css
View File
| 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
| <!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
| | |||||
| 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
| 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…