diff --git a/02_advanced/uebungen/u05_sum-rekursiv/index.html b/02_advanced/uebungen/u05_sum-rekursiv/index.html index be95ad0..c2df425 100644 --- a/02_advanced/uebungen/u05_sum-rekursiv/index.html +++ b/02_advanced/uebungen/u05_sum-rekursiv/index.html @@ -1,10 +1,11 @@ - + Übung 5: Summe einer Zahlenreihe rekursiv berechnen +
@@ -28,10 +29,29 @@ diff --git a/02_advanced/uebungen/u06_binomialkoeffizienten/index.html b/02_advanced/uebungen/u06_binomialkoeffizienten/index.html index b5ce674..3f309bd 100644 --- a/02_advanced/uebungen/u06_binomialkoeffizienten/index.html +++ b/02_advanced/uebungen/u06_binomialkoeffizienten/index.html @@ -1,4 +1,4 @@ - + @@ -36,7 +36,17 @@ ", + "\t", + "" + ], + "description": "Generate HTML with Bootstrap CDN and script-tag" + }, + "$ und $$ helper function": { + "scope": "javascript,typescript", + "prefix": "$$$", + "body": [ + "const $ = (qs) => document.querySelector(qs);", + "const $$ = (qs) => Array.from(document.querySelectorAll(qs));" + ], + "description": "$ and $$ shorthand helper function" + }, + + "JavaScript Dateivorlage": { + "scope": "javascript,typescript", + "prefix": "vjs", + "body": [ + "'use strict';", + "", + "(() => {", + "", + "\t// === DOM & VARS =======", + "\tconst DOM = {};", + "", + "\t// === INIT =============", + "\tconst init = () => {", + "", + "\t}", + "", + "\t// === EVENTHANDLER =====", + "", + "\t// === XHR/FETCH ========", + "", + "\t// === FUNCTIONS ========", + "", + "\tinit();", + "", + "})();" + ], + "description": "JavaScript Dateivorlage" + } +} diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/cuteycat.css b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/cuteycat.css new file mode 100644 index 0000000..9b7d181 --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/cuteycat.css @@ -0,0 +1,55 @@ +h1 { + font-size: 5em; + margin: 0; + padding: 0; +} + +p { + font-size: 2em; + font-style: italic; +} + +.kittenlist { + border: 1px solid black; + width: 700px; + margin: 0; + padding: 0; + height: 80vh; + overflow: auto; +} + +.kittenlist li { + list-style: none; + font-size: 5em; + background-color: #055; + padding: 5px; + margin-bottom: 20px; + height: 150px; +} + +.kittenlist li:hover { + background-color: #755; + outline: 5px solid #700; +} + +.kittenlist li img { + margin-right: 20px; +} + +.kittenlist li span { + display: inline; + top: -0.7em; + position: relative; + color: #099; +} + +#cutest { + height: 520px; + overflow: hidden; +} + +#cutest_section { + position: absolute; + top: 0; + left: 50vw; +} diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/cuteycat.html b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/cuteycat.html new file mode 100644 index 0000000..fe52f13 --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/cuteycat.html @@ -0,0 +1,40 @@ + + + + + Cutycat + + + + + + +
+

Our Cats

+ +

Choose the cutest cats. Pick three winners!

+
+ +
+

Cutest Cats

+ +

Click to remove

+
+ + diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/cuteycat.js b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/cuteycat.js new file mode 100644 index 0000000..d5be2e1 --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/cuteycat.js @@ -0,0 +1,3 @@ +'use strict'; + +// Implement your code here \ No newline at end of file diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/1.jpg b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/1.jpg new file mode 100644 index 0000000..de9ac3e Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/1.jpg differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/10.jpg b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/10.jpg new file mode 100644 index 0000000..705e1b4 Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/10.jpg differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/11.jpg b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/11.jpg new file mode 100644 index 0000000..46149b4 Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/11.jpg differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/12.jpg b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/12.jpg new file mode 100644 index 0000000..f2549ce Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/12.jpg differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/13.jpg b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/13.jpg new file mode 100644 index 0000000..f40d24c Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/13.jpg differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/14.jpg b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/14.jpg new file mode 100644 index 0000000..7fee98b Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/14.jpg differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/15.jpg b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/15.jpg new file mode 100644 index 0000000..72c7126 Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/15.jpg differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/2.jpg b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/2.jpg new file mode 100644 index 0000000..9c03bd1 Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/2.jpg differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/3.jpg b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/3.jpg new file mode 100644 index 0000000..b8406b3 Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/3.jpg differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/4.jpg b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/4.jpg new file mode 100644 index 0000000..a62c936 Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/4.jpg differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/5.jpg b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/5.jpg new file mode 100644 index 0000000..8b14bbd Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/5.jpg differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/6.jpg b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/6.jpg new file mode 100644 index 0000000..da0806a Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/6.jpg differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/7.jpg b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/7.jpg new file mode 100644 index 0000000..1fa7768 Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/7.jpg differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/8.jpg b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/8.jpg new file mode 100644 index 0000000..cb364f4 Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/8.jpg differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/9.jpg b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/9.jpg new file mode 100644 index 0000000..62291b8 Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/kittens/9.jpg differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/2/examples/dom_example.html b/03_dom/MATERIAL/accompanying_files/accompanying-files/2/examples/dom_example.html new file mode 100644 index 0000000..a0b661d --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/2/examples/dom_example.html @@ -0,0 +1,37 @@ + + + + + DOM-Example + + + + +
+ +
+ +
+
+

+

+ +
+
+ + + + diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/2/examples/news.html b/03_dom/MATERIAL/accompanying_files/accompanying-files/2/examples/news.html new file mode 100644 index 0000000..6ba342b --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/2/examples/news.html @@ -0,0 +1,21 @@ + + + + + Headlines + + + + +

Lorem ipsum dolor sit amet.

+

Quod eligendi saepe voluptates eveniet.

+

Architecto reiciendis magnam modi inventore.

+

Modi ipsum, velit rem ipsam.

+

Provident, officia quisquam aliquam deserunt!

+ + diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/2/examples/selector_testing.html b/03_dom/MATERIAL/accompanying_files/accompanying-files/2/examples/selector_testing.html new file mode 100644 index 0000000..5953cd0 --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/2/examples/selector_testing.html @@ -0,0 +1,23 @@ + + + + + Selector Testing + + + + + + + diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/2/exercises/010010000100111101010100.html b/03_dom/MATERIAL/accompanying_files/accompanying-files/2/exercises/010010000100111101010100.html new file mode 100644 index 0000000..6d656a7 --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/2/exercises/010010000100111101010100.html @@ -0,0 +1,121 @@ + + + + + + 010010000100111101010100 + + + + + + + +
+ +
+

+ Hot Binary Heat Changing Mug + "010010000100111101010100" +

+ + Hot Binary Heat Changing Mug + +

Description

+ +

+ Numbers make up + everything 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: + 0 and 1. + Off and On. 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 + Hot Binary Heat Changing Mug, there's a mug + that tells us which state our mug is in. In binary! +

+ +

+ See, the + Hot Binary Heat Changing Mug + 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: + 010010000100111101010100. That's + in binary. Of course, your + Hot Binary Heat Changing Mug + could just be paying you a compliment. Cheeky, mug. +

+ +

+ 010010000100111101010100 +

+ +

Product Specifications

+ + + +

You wanna buy it?

+ +

+ If you like to buy this brilliant mug, just do the following steps: +

+ +
    +
  1. Select how many items do you want.
  2. +
  3. Press "buy".
  4. +
+ +
+ + +
+
+ + + + diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/2/exercises/quotes.html b/03_dom/MATERIAL/accompanying_files/accompanying-files/2/exercises/quotes.html new file mode 100644 index 0000000..0d6350a --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/2/exercises/quotes.html @@ -0,0 +1,30 @@ + + + + + + Famous Quotes + + + + + + +
+ +
+

Famous Quotes

+ +
+
+ + diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/3/examples/chat.html b/03_dom/MATERIAL/accompanying_files/accompanying-files/3/examples/chat.html new file mode 100644 index 0000000..6ab9c1c --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/3/examples/chat.html @@ -0,0 +1,59 @@ + + + + + The Chat + + + + + + +
+ +
+

Chat

+ +
+
+
+

+ Ladislaus: + Anybody there? +

+

+ Friedlinde + Yes, me! +

+
+ +
+ +
+
+ +
    +
  • Heribert
  • +
  • Friedlinde
  • +
  • Tusnelda
  • +
  • Berthold
  • +
  • Oswine
  • +
  • Ladislaus
  • +
+ + +
+
+ + diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/3/examples/chat.js b/03_dom/MATERIAL/accompanying_files/accompanying-files/3/examples/chat.js new file mode 100644 index 0000000..31e65b8 --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/3/examples/chat.js @@ -0,0 +1,3 @@ +'use strict'; + +// Implement your code here diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/3/exercises/article_length/index.html b/03_dom/MATERIAL/accompanying_files/accompanying-files/3/exercises/article_length/index.html new file mode 100644 index 0000000..f21785f --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/3/exercises/article_length/index.html @@ -0,0 +1,125 @@ + + + + + Article Detail Page + + + + +
+

Lorem ipsum

+
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+
+
+ + diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/3/exercises/article_length/script.js b/03_dom/MATERIAL/accompanying_files/accompanying-files/3/exercises/article_length/script.js new file mode 100644 index 0000000..e555549 --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/3/exercises/article_length/script.js @@ -0,0 +1,14 @@ +'use strict'; + +{ + const articleSizeCssClass = (contentLength) => { + if (contentLength <= 3000) return 'coffee_break_article'; + if (contentLength <= 9000) return 'normal_length_article'; + return 'lone_weekend_article'; + }; + + const $ = (qs) => document.querySelector(qs); + const contentLength = () => $('#content').innerHTML.length; + + $('h1').classList.add(articleSizeCssClass(contentLength())); +} diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/3/exercises/article_length/styles.css b/03_dom/MATERIAL/accompanying_files/accompanying-files/3/exercises/article_length/styles.css new file mode 100644 index 0000000..1e34e7e --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/3/exercises/article_length/styles.css @@ -0,0 +1,31 @@ +*, html { + box-sizing: border-box; +} + +html, body { + font-family: 'Helvetica', 'Arial', sans-serif; + color: #444; + font-weight: normal; +} + +h1, h2, h3, h4, h5, h6 { + padding: 0.5em; +} + +.coffee_break_article { + background-color: BurlyWood; +} + +.normal_length_article { + background-color: #cafe69; +} + +.lone_weekend_article { + background-color: DarkTurquoise; +} + +.container { + margin: 0 auto; + padding: 1rem; + max-width: 1140px; +} diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/5/examples/newsboard/images/empty.png b/03_dom/MATERIAL/accompanying_files/accompanying-files/5/examples/newsboard/images/empty.png new file mode 100644 index 0000000..d650b1b Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/5/examples/newsboard/images/empty.png differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/5/examples/newsboard/images/paperclip.png b/03_dom/MATERIAL/accompanying_files/accompanying-files/5/examples/newsboard/images/paperclip.png new file mode 100644 index 0000000..7f24721 Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/5/examples/newsboard/images/paperclip.png differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/5/examples/newsboard/images/sheets.png b/03_dom/MATERIAL/accompanying_files/accompanying-files/5/examples/newsboard/images/sheets.png new file mode 100644 index 0000000..14680cb Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/5/examples/newsboard/images/sheets.png differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/5/examples/newsboard/newsboard.css b/03_dom/MATERIAL/accompanying_files/accompanying-files/5/examples/newsboard/newsboard.css new file mode 100644 index 0000000..dcc7a97 --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/5/examples/newsboard/newsboard.css @@ -0,0 +1,227 @@ +* { + margin: 0; +} +html { + font-size: 100%; + padding: 0; + background-attachment: fixed; + background-image: -webkit-linear-gradient(top, #eef0f2, #d3d5d9); + background-image: -moz-linear-gradient(top, #eef0f2, #d3d5d9); + background-image: linear-gradient(to bottom, #eef0f2, #d3d5d9); +} +body { + color: #333; + font-size: 1em; + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + text-align: left; + margin: 1em; + padding: 0; +} +p, +h1, +h2, +h3, +h4, +h5, +h6 { + margin-bottom: 1rem; +} +p { + line-height: 1.5em; + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; +} +p:last-child { + margin-bottom: 0; +} +a { + color: #2f83e8; + text-decoration: none; +} +a:hover { + text-decoration: underline; +} +strong, +b { + font-weight: bold; +} +em, +i { + font-style: italic; +} +.float_left { + float: left; +} +.float_right { + float: right; +} +.disabled { + opacity: 0.4; + cursor: default; +} +.message_number { + color: #fff; + font-size: 0.8em; + font-weight: bold; + text-align: center; + line-height: 1em; + position: absolute; + top: -0.5em; + left: -0.5em; + display: block; + padding-top: 0.3em; + min-width: 2em; + height: 2em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + cursor: default; + background-color: #ea2314; + background-image: -webkit-linear-gradient(top, #f78f91, #c50404); + background-image: -moz-linear-gradient(top, #f78f91, #c50404); + background-image: linear-gradient(to bottom, #f78f91, #c50404); + border: 2px solid #fff; + -webkit-border-radius: 1em; + -moz-border-radius: 1em; + border-radius: 1em; + -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); +} +.newsboard_wrapper { + margin: 0 auto 2em auto; + padding: 13px 0 0 17px; + max-width: 550px; + position: relative; + background: url(images/sheets.png) no-repeat; +} +.newsboard_wrapper:before { + content: url(images/paperclip.png); + position: absolute; + top: 5px; + right: 35px; + z-index: 1; +} +.newsboard_wrapper .newsboard { + padding: 29px 1.25rem 4rem 1.25rem; + min-height: 20em; + position: relative; + border: 1px solid #ccc; + background-color: #fff; + background-image: -webkit-linear-gradient(#dddddd, #ffffff 1px); + background-image: -moz-linear-gradient(#dddddd, #ffffff 1px); + background-image: linear-gradient(#dddddd, #ffffff 1px); + background-position: 0 1.3em; + -webkit-background-size: 100% 1.5em; + -moz-background-size: 100% 1.5em; + background-size: 100% 1.5em; + -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3); +} +.newsboard_wrapper .newsboard .close_button { + color: #777; + font-size: 1.2em; + text-decoration: none; + line-height: 1em; + position: absolute; + top: 10px; + right: 14px; + display: block; +} +.newsboard_wrapper .newsboard .close_button:hover { + color: #444; +} +.newsboard_wrapper .newsboard .newsboard_footer { + color: #999; + font-size: 0.8em; +} +.newsboard_wrapper .newsboard .paging_bar { + font-size: 1.8em; + padding: 0 1.25rem; + position: absolute; + left: 0; + right: 0; + bottom: 1rem; + white-space: nowrap; +} +.newsboard_wrapper .newsboard .paging_bar .float_left a, +.newsboard_wrapper .newsboard .paging_bar .float_right a { + color: #777; + text-decoration: none; +} +.newsboard_wrapper .newsboard .paging_bar .float_left a { + margin-right: 0.3em; +} +.newsboard_wrapper .newsboard .paging_bar .float_right a { + margin-left: 0.3em; +} +.newsboard_wrapper .newsboard .paging_bar .progressbar { + display: block; + width: 40%; + margin: 0 auto; +} +.newsboard_wrapper .newsboard .paging_bar progress { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + vertical-align: 0; + line-height: normal; + color: #2f83e8; + width: 100%; + height: 0.6rem; + border-style: none; + padding: 0; + background-color: #eee; + -webkit-border-radius: 0.3rem; + -moz-border-radius: 0.3rem; + border-radius: 0.3rem; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); +} +.newsboard_wrapper .newsboard .paging_bar progress::-webkit-progress-bar { + padding: 0; + border-style: none; + background-color: transparent; +} +.newsboard_wrapper .newsboard .paging_bar progress::-webkit-progress-value { + -webkit-border-radius: 0.3rem; + border-radius: 0.3rem; + background-color: #2f83e8; + background-image: -webkit-linear-gradient(top, #8bbaf2, #176acd); + background-image: linear-gradient(to bottom, #8bbaf2, #176acd); +} +.newsboard_wrapper .newsboard .paging_bar progress::-moz-progress-bar { + -moz-border-radius: 0.3rem; + border-radius: 0.3rem; + background-color: #2f83e8; + background-image: -moz-linear-gradient(top, #8bbaf2, #176acd); + background-image: linear-gradient(to bottom, #8bbaf2, #176acd); +} +.newsboard_wrapper .newsboard .newsboard_content h1, +.newsboard_wrapper .newsboard .newsboard_content h2 { + font-weight: normal; + font-family: 'Helvetica Neue Light', 'HelveticaNeue-Light', 'Helvetica Light', 'Helvetica-Light', Helvetica, Arial, + sans-serif; + letter-spacing: 0.03em; +} +.newsboard_wrapper .newsboard .newsboard_content h1 { + font-size: 1.75em; +} +.newsboard_wrapper .newsboard .newsboard_content h2 { + color: #2f83e8; + font-size: 1.2em; + line-height: 1.4em; +} +.newsboard_wrapper .newsboard .newsboard_content:empty { + color: #999; + font-size: 1.15em; + text-align: center; + padding-top: 10.5rem; + background: url(images/empty.png) no-repeat center 3.75rem; +} +.newsboard_wrapper .newsboard .newsboard_content:empty:after { + content: 'Keine neuen Mitteilungen.'; +} diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/5/examples/newsboard/newsboard.html b/03_dom/MATERIAL/accompanying_files/accompanying-files/5/examples/newsboard/newsboard.html new file mode 100644 index 0000000..e845a33 --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/5/examples/newsboard/newsboard.html @@ -0,0 +1,45 @@ + + + + + + Newsboard + + + + + + + +
+
+ 3 + + × + +
+ +
+ + « + + + + + + » + + + + + +
+
+
+ + diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/5/examples/newsboard/newsboard.js b/03_dom/MATERIAL/accompanying_files/accompanying-files/5/examples/newsboard/newsboard.js new file mode 100644 index 0000000..44539f9 --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/5/examples/newsboard/newsboard.js @@ -0,0 +1,21 @@ +'use strict'; + +{ + const messages = [ + `

Tutors are on a strike!!!

+

All assignmnent are automatically graded with 0 points

+

Duis pretium ornare odio nec cursus. Nulla quis dolor vitae nulla condimentum maximus nec vitae purus. Curabitur ut mi non nulla molestie porta. Curabitur dignissim lacinia condimentum. In hac habitasse platea dictumst. Mauris ut urna magna. Mauris venenatis eu quam nec posuere. Nulla facilisi. Donec convallis sodales massa, et consequat nunc vehicula malesuada.

+ `, + + `

Madness!

+

How to earn a fortune, with a complete stupid idea

+

Ut molestie elementum risus, eget rutrum dui tristique id. Duis ac elit a mi convallis lacinia. Sed at ultricies magna. Pellentesque nisl est, mattis eget porta eu, rhoncus in urna. Integer faucibus lectus nec malesuada tempus. Duis consectetur sollicitudin ultricies. Cras massa nulla, aliquet vitae interdum quis, venenatis at quam.

+ `, + + `

I did something, and you will never guess what happened next...

+

Donec tristique, leo at suscipit pellentesque, mauris neque congue leo!

+

Aenean egestas mauris at neque egestas hendrerit id ut erat. Donec iaculis ornare gravida. Vestibulum condimentum, tortor nec eleifend consectetur, justo lacus dignissim ante, eget commodo enim urna sollicitudin arcu. Odio eu leo pulvinar rutrum sed a turpis. Nunc dui tortor, rutrum vitae gravida quis, hendrerit a massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas

+

Integer non venenatis tellus. Phasellus tellus leo, suscipit ac vulputate non, varius nec eros. Etiam scelerisque nisi arcu, interdum tempus dui volutpat vel. Donec eget posuere nulla. Etiam ornare dapibus tortor, ac sollicitudin nisi porta a. Donec tristique, leo at suscipit pellentesque, mauris neque congue leo, sed tempor massa justo a ligula. Curabitur vitae rhoncus lacus, quis varius felis. Ut tincidunt sit amet nisl finibus tempus. Curabitur mollis sit amet leo a sagittis.

+ `, + ]; +} diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/6/exercises/buy_button/buy_button.html b/03_dom/MATERIAL/accompanying_files/accompanying-files/6/exercises/buy_button/buy_button.html new file mode 100644 index 0000000..103edc8 --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/6/exercises/buy_button/buy_button.html @@ -0,0 +1,13 @@ + + + + + Progressbar + + + + + + + + diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/6/exercises/buy_button/buy_button.js b/03_dom/MATERIAL/accompanying_files/accompanying-files/6/exercises/buy_button/buy_button.js new file mode 100644 index 0000000..d5be2e1 --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/6/exercises/buy_button/buy_button.js @@ -0,0 +1,3 @@ +'use strict'; + +// Implement your code here \ No newline at end of file diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/6/exercises/running_light/light_off.png b/03_dom/MATERIAL/accompanying_files/accompanying-files/6/exercises/running_light/light_off.png new file mode 100644 index 0000000..4043472 Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/6/exercises/running_light/light_off.png differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/6/exercises/running_light/light_on.png b/03_dom/MATERIAL/accompanying_files/accompanying-files/6/exercises/running_light/light_on.png new file mode 100644 index 0000000..0230d78 Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/6/exercises/running_light/light_on.png differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/6/exercises/running_light/running_light.html b/03_dom/MATERIAL/accompanying_files/accompanying-files/6/exercises/running_light/running_light.html new file mode 100644 index 0000000..cf73dee --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/6/exercises/running_light/running_light.html @@ -0,0 +1,22 @@ + + + + Running light + + + + + + + lightbulb + lightbulb + lightbulb + lightbulb + lightbulb + lightbulb + lightbulb + lightbulb + lightbulb + lightbulb + + diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/6/exercises/running_light/running_light.js b/03_dom/MATERIAL/accompanying_files/accompanying-files/6/exercises/running_light/running_light.js new file mode 100644 index 0000000..d5be2e1 --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/6/exercises/running_light/running_light.js @@ -0,0 +1,3 @@ +'use strict'; + +// Implement your code here \ No newline at end of file diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/7/examples/font_size_big_small/font_size.html b/03_dom/MATERIAL/accompanying_files/accompanying-files/7/examples/font_size_big_small/font_size.html new file mode 100644 index 0000000..7ca6853 --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/7/examples/font_size_big_small/font_size.html @@ -0,0 +1,20 @@ + + + + + Font Size + + + + + + + + + +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, error. Possimus in reiciendis quo numquam + assumenda, deleniti doloremque, facere alias odio animi est aliquam delectus corrupti ducimus fugiat ea commodi. +

+ + diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/7/examples/font_size_big_small/font_size.js b/03_dom/MATERIAL/accompanying_files/accompanying-files/7/examples/font_size_big_small/font_size.js new file mode 100644 index 0000000..31e65b8 --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/7/examples/font_size_big_small/font_size.js @@ -0,0 +1,3 @@ +'use strict'; + +// Implement your code here diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/7/examples/tooltips/tooltips.css b/03_dom/MATERIAL/accompanying_files/accompanying-files/7/examples/tooltips/tooltips.css new file mode 100644 index 0000000..0880e5a --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/7/examples/tooltips/tooltips.css @@ -0,0 +1,19 @@ +p { + font-size: 1.5em; +} + +.keyword { + font-weight: bolder; + color: #225; +} + +#tooltip { + width: 250px; + border: 2px solid #339; + padding: 5px; + background-color: #eef; + opacity: 0.9; + + font-size: 1em; + text-align: justify; +} diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/7/examples/tooltips/tooltips.html b/03_dom/MATERIAL/accompanying_files/accompanying-files/7/examples/tooltips/tooltips.html new file mode 100644 index 0000000..58559df --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/7/examples/tooltips/tooltips.html @@ -0,0 +1,37 @@ + + + + + Tooltips + + + + + + + + +

Quantum Entanglement Mugs

+

DRINK IN SYNC.

+ +

+ In the realm of quantum mechanics, particles + can be entangled in such a way that the state + of one instantly influences the state of another, no matter the distance. + This phenomenon fascinates physicists and challenges our understanding of + reality. Imagine sipping your coffee from a mug that celebrates this + quantum wonder. Just like entangled + particles, you and a friend can share a connection over any distance with + these mugs. Introducing the Quantum + Entanglement Mugs. +

+ +

+ Each set of Quantum Entanglement Mugs + includes two ceramic mugs designed to reflect the concept of entanglement. + Share one with a friend, and no matter how far apart you are, you'll feel + connected. Use them at your next physics meetup, and your colleagues will + appreciate your thoughtful nod to quantum theory. Enjoy your coffee! +

+ + diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/7/examples/tooltips/tooltips.js b/03_dom/MATERIAL/accompanying_files/accompanying-files/7/examples/tooltips/tooltips.js new file mode 100644 index 0000000..31e65b8 --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/7/examples/tooltips/tooltips.js @@ -0,0 +1,3 @@ +'use strict'; + +// Implement your code here diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/7/exercises/color_change/color_change.html b/03_dom/MATERIAL/accompanying_files/accompanying-files/7/exercises/color_change/color_change.html new file mode 100644 index 0000000..6d99cd5 --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/7/exercises/color_change/color_change.html @@ -0,0 +1,15 @@ + + + + + Document + + + + + + + + + + diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/7/exercises/color_change/color_change.js b/03_dom/MATERIAL/accompanying_files/accompanying-files/7/exercises/color_change/color_change.js new file mode 100644 index 0000000..31e65b8 --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/7/exercises/color_change/color_change.js @@ -0,0 +1,3 @@ +'use strict'; + +// Implement your code here diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/7/exercises/tabbed_navigation/tabs.css b/03_dom/MATERIAL/accompanying_files/accompanying-files/7/exercises/tabbed_navigation/tabs.css new file mode 100644 index 0000000..6b97fdd --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/7/exercises/tabbed_navigation/tabs.css @@ -0,0 +1,34 @@ +.tabs > nav ul { + margin: 0; + padding: 8px 0 0 5px; + list-style-type: none; + list-style: none; + height: 30px; + border: 1px solid #999999; + background-color: #b0b0b0; +} +.tabs > nav ul li { + display: block; + float: left; + padding: 0 10px; + margin: 0 2px 0 0; + height: 29px; + white-space: nowrap; + line-height: 30px; + border-color: #999999; + border-width: 1px; + border-style: solid solid none solid; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + background-color: #d8d8d8; + background-image: linear-gradient(to bottom, #f9f9f9, #d8d8d8); +} +.tabs > nav ul li:hover { + background-color: #cacaca; + background-image: linear-gradient(to bottom, #eeeeee, #cacaca); +} +.tabs > nav ul li.active { + border-bottom: 2px solid #f9f9f9; + background-image: none; + background-color: #f9f9f9; +} diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/7/exercises/tabbed_navigation/tabs.html b/03_dom/MATERIAL/accompanying_files/accompanying-files/7/exercises/tabbed_navigation/tabs.html new file mode 100644 index 0000000..8ff71b7 --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/7/exercises/tabbed_navigation/tabs.html @@ -0,0 +1,45 @@ + + + + + + SEO Seminar: 2-tägige Schulung Suchmaschinenoptimierung + + + + + + + +
+ + +
+

2-day SEO intensive seminar: with search engine optimization (SEO) to success on the web!

+

+
+ +
+

Topics

+

+
+ +
+

Learning Objectives

+

+
+ +
+

Date

+

+
+
+ + diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/7/exercises/tabbed_navigation/tabs.js b/03_dom/MATERIAL/accompanying_files/accompanying-files/7/exercises/tabbed_navigation/tabs.js new file mode 100644 index 0000000..31e65b8 --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/7/exercises/tabbed_navigation/tabs.js @@ -0,0 +1,3 @@ +'use strict'; + +// Implement your code here diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/awesome_tours.css b/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/awesome_tours.css new file mode 100644 index 0000000..594772a --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/awesome_tours.css @@ -0,0 +1,34 @@ +#info { + position: absolute; + left: 20px; + top: 410px; + width: 639px; + border: 2px solid #000077; + padding: 4px; +} + +#info h3 { + margin-top: 2px; +} + +#pois { + position: absolute; + left: 20px; +} + +#pois img { + position: absolute; +} + +#fr { + top: 0px; + left: 0px; +} +#uk { + top: 0px; + left: 312px; +} +#it { + top: 201px; + left: 312px; +} diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/awesome_tours.html b/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/awesome_tours.html new file mode 100644 index 0000000..c26621a --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/awesome_tours.html @@ -0,0 +1,45 @@ + + + + + Awesome Tours + + + + + + +
+ Eiffel Tower + + Tower Bride + + Colosseum +
+ +
+

Move your mouse pointer over the images to read the descriptions here!

+
+ + diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/awesome_tours.js b/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/awesome_tours.js new file mode 100644 index 0000000..31e65b8 --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/awesome_tours.js @@ -0,0 +1,3 @@ +'use strict'; + +// Implement your code here diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/colosseum.jpg b/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/colosseum.jpg new file mode 100644 index 0000000..1ed563e Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/colosseum.jpg differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/eiffelturm.jpg b/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/eiffelturm.jpg new file mode 100644 index 0000000..5a0f7a4 Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/eiffelturm.jpg differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/fr.png b/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/fr.png new file mode 100644 index 0000000..01ecb01 Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/fr.png differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/it.png b/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/it.png new file mode 100644 index 0000000..dfdd76a Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/it.png differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/tower_bridge.jpg b/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/tower_bridge.jpg new file mode 100644 index 0000000..e81a030 Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/tower_bridge.jpg differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/uk.png b/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/uk.png new file mode 100644 index 0000000..b4555e5 Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/uk.png differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/9/examples/product_manager/product_list.js b/03_dom/MATERIAL/accompanying_files/accompanying-files/9/examples/product_manager/product_list.js new file mode 100644 index 0000000..f582ff8 --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/9/examples/product_manager/product_list.js @@ -0,0 +1,7 @@ +'use strict'; + +const PRODUCTS = [ + { name: '3Doodler 3D Printing Pen', price: 29.99 }, + { name: 'Powerstation 5- E. Maximus Chargus', price: 44.95 }, + { name: '8-Bit Legendary Hero Heat-Change Mug', price: 6.99 }, +]; diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/9/examples/product_manager/product_manager.html b/03_dom/MATERIAL/accompanying_files/accompanying-files/9/examples/product_manager/product_manager.html new file mode 100644 index 0000000..1b5a6f4 --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/9/examples/product_manager/product_manager.html @@ -0,0 +1,43 @@ + + + + + Product Management + + + + + + +

Products

+ + + + + + + + + + + + + + + + + + + + + +
NamePrice in €
3Doodler 3D Printing Pen29.99
Powerstation 5- E. Maximus Chargus44.95
8-Bit Legendary Hero Heat-Change Mug6.99
+ +

+ + € + + +

+ + diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/9/examples/product_manager/product_manager.js b/03_dom/MATERIAL/accompanying_files/accompanying-files/9/examples/product_manager/product_manager.js new file mode 100644 index 0000000..2d665e3 --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/9/examples/product_manager/product_manager.js @@ -0,0 +1,3 @@ +'use strict' + +// Implement your code here diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/9/examples/product_manager/products.css b/03_dom/MATERIAL/accompanying_files/accompanying-files/9/examples/product_manager/products.css new file mode 100644 index 0000000..a79e7b2 --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/9/examples/product_manager/products.css @@ -0,0 +1,31 @@ +.price { + width: 4em; +} + +#products td { + border: 1px solid black; +} + +#products { + border-collapse: collapse; +} + +#products th, +#products td { + padding: 5px; + border: 1px solid black; +} + +#products th { + background-color: #aaa; +} + +#products td > button { + margin-right: 5px; + font-size: 120%; + width: 40px; +} + +.remove_product { + color: red; +} diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/css/styles.css b/03_dom/MATERIAL/accompanying_files/accompanying-files/css/styles.css new file mode 100644 index 0000000..d904e6a --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/css/styles.css @@ -0,0 +1,368 @@ +/* -------------------------------------------- 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 { + 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; +} diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/img/favicon.icon b/03_dom/MATERIAL/accompanying_files/accompanying-files/img/favicon.icon new file mode 100644 index 0000000..bd2cd28 Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/img/favicon.icon differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/img/js_header.png b/03_dom/MATERIAL/accompanying_files/accompanying-files/img/js_header.png new file mode 100644 index 0000000..4d14ceb Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/img/js_header.png differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/img/logo.png b/03_dom/MATERIAL/accompanying_files/accompanying-files/img/logo.png new file mode 100644 index 0000000..bbd9fcc Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/img/logo.png differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/img/newsboard_empty.png b/03_dom/MATERIAL/accompanying_files/accompanying-files/img/newsboard_empty.png new file mode 100644 index 0000000..d650b1b Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/img/newsboard_empty.png differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/img/newsboard_paperclip.png b/03_dom/MATERIAL/accompanying_files/accompanying-files/img/newsboard_paperclip.png new file mode 100644 index 0000000..7f24721 Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/img/newsboard_paperclip.png differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/img/newsboard_sheets.png b/03_dom/MATERIAL/accompanying_files/accompanying-files/img/newsboard_sheets.png new file mode 100644 index 0000000..14680cb Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/img/newsboard_sheets.png differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/img/thinkgeek_2024_hot_binary_heat_change_mug.gif b/03_dom/MATERIAL/accompanying_files/accompanying-files/img/thinkgeek_2024_hot_binary_heat_change_mug.gif new file mode 100644 index 0000000..3a9c8ad Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/img/thinkgeek_2024_hot_binary_heat_change_mug.gif differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg b/03_dom/MATERIAL/accompanying_files/accompanying-files/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg new file mode 100644 index 0000000..4399460 Binary files /dev/null and b/03_dom/MATERIAL/accompanying_files/accompanying-files/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg differ diff --git a/03_dom/MATERIAL/accompanying_files/accompanying-files/lib/dom_helper.js b/03_dom/MATERIAL/accompanying_files/accompanying-files/lib/dom_helper.js new file mode 100644 index 0000000..53ac95c --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/accompanying-files/lib/dom_helper.js @@ -0,0 +1,4 @@ +'use strict'; + +const $ = (q) => document.querySelector(q); +const $$ = (q) => Array.from(document.querySelectorAll(q)); diff --git a/03_dom/MATERIAL/accompanying_files/template/index.html b/03_dom/MATERIAL/accompanying_files/template/index.html new file mode 100644 index 0000000..b0cee8e --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/template/index.html @@ -0,0 +1,10 @@ + + + + + + Index + + + + diff --git a/03_dom/MATERIAL/accompanying_files/template/script.js b/03_dom/MATERIAL/accompanying_files/template/script.js new file mode 100644 index 0000000..a726efc --- /dev/null +++ b/03_dom/MATERIAL/accompanying_files/template/script.js @@ -0,0 +1 @@ +'use strict'; \ No newline at end of file diff --git a/03_dom/agenda.md b/03_dom/agenda.md new file mode 100644 index 0000000..1ec384d --- /dev/null +++ b/03_dom/agenda.md @@ -0,0 +1,388 @@ +--- +marp: true +theme: default +--- + +## JavaScript Grundlagen Teil 1. + +--- + +#### Tag 01 + +**Inhalt:** + +- Vorstellungsrunde +- Einrichtung der IDE +- Tools für die Webentwicklung (Emmet, Markdown, VS-Code) +- Arbeiten mit VSCode +- Konsolenausgaben mit `console.log()` + +**Übungen:** + +- Übungen Content Factory + +--- + +#### Tag 02 + +**Inhalt:** + +- Dialogfenster in JS `prompt()`, `alert()`, `confirm()` +- Kommentare in JS +- Rechnen in JS +- Datentyp String, Number, Boolean +- literal und typeof +- Prioritätsreihenfolge + +**Übungen:** + +Übung 3 - 6 + +--- + +#### Tag 03 + +**Inhalt:** + +- Variablen und Konstanten in JS +- Zusammengesetzte Zuweisungsoperatoren +- Increment & Decrement +- Strings verketten mit + + +**Übungen:** + +Übung 7 - 12 + +--- + +#### Tag 04 + +**Inhalt:** + +- Escape-Notation +- Implizite und explizite Typkonvertierung +- NaN - Paradoxon +- Math Object +- Number.toFixed() + +**Übungen:** + +Übung 14 - 18 + +--- + +#### Tag 05 + +**Inhalt:** + +- Repetition der Inhalte +- Relationale Operatoren & Vergleichoperatoren +- isNaN +- Lexikographische Vergleiche +- **Exkurs: HTML-Formularfelder** +- 1:1 Meeting + +**Übungen:** + +Übung Kontaktformular mit HTML und BS + +--- + +#### Tag 06 + +**Inhalt:** + +- **Exkurs: HTML Formularfelder mit BS** +- if else Verzweigung und ternärer Operator +- logische Operatoren UND und ODER +- unärer Operator (!) +- String Methoden Part I + +**Übungen:** + +Übung 19 - 26 + +--- + +#### Tag 07 + +**Inhalt:** + +- String Methoden Part II +- Funktionen in JS +- Funktionen mit Übergabeparameter +- Funktionen mit Rückgabewerten + +**Übungen:** + +Übung 26 - 35 + +--- + +#### Tag 08 + +**Inhalt:** + +- Funktionen mit Übergabeparameter +- Funktionen mit Rückgabewerten +- Guards +- Array Part 1 + +**Übungen:** + +Übung 35 - 38 + +--- + +#### Tag 09 + +**Inhalt:** + +- Array Methoden toSorted, toReversed, toSpliced +- toSorted, toReversed +- Array sort mit "compare function" +- Array: Higher Order Funktionen Part (sort map, forEach, reduce, some, every) + +**Übungen:** + +Übung 39 - 48 + +--- + +#### Tag 10 + +**Inhalt:** + +- Array.find und Array.findIndex +- Alle Array Higher Order Funktionen im Überblick +- local scoping +- **Exkurs: Schleifen** + +**Übungen:** + +Übung 46 - 48 + +--- + +## JavaScript für Fortgeschrittene + +--- + +#### Tag 11 + +**Inhalt:** + +- Einführung in JS für Fortgeschrittene +- Objekte in JS + +**Übungen:** + +Projektarbeit +Abschlussquiz - JS Grundlagen + +--- + +#### Tag 12 + +**Inhalt:** + +- Destructuring von Objekten und Arrays +- Rekursion + +**Übungen:** + +Übung 01 - 10 + +--- + +#### Tag 13 + +**Inhalt:** + +- Promises +- Callback-Hell +- Installation von node (npm) und Windows Terminal (für Node) +- **Exkurs: Statische Webseite mit Sass und HTML** +- **Exkurs: Versionierung mit Github Part I** + +**Übungen:** + +--- + +#### Tag 14 + +**Inhalt:** + +- Promise Aufbau +- Promise in Funktionen +- File System von Node +- commonjs vs esm +- async await + +**Übungen:** + +Übung 09 - 11 + +--- + +#### Tag 15 + +**Inhalt:** + +- Wiederholung der Inhalte +- Promise.all() +- **Exkurs: Switch Case Abfragen** +- **Exkurs: Statische Webseite mit Sass und HTML** +- **Exkurs: Versionierung mit Github Part I** +- 1:1 Meeting + +--- + +#### Tag 16 + +**Inhalt:** + +- **Exkurs: Statische Webseite mit Sass und HTML Part II** +- Mehrdimensionale Arrays + +**Übungen:** + +Projektarbeiten +Übungen 11 -13 + +--- + +#### Tag 17 + +**Inhalt:** + +- Chess-Beispiel +- Arbeiten mit Fetch API +- fetch mit Promise und async...await +- Joke API auslesen +- **Exkurs: Versionierung mit Github Part I** + +**Übungen:** + +Übungen 14 - 24 + +--- + +#### Tag 18 + +**Inhalt:** + +- XML-HttpRequest und AJAX mit jQuery +- Node Installation (Wiederholung) +- Node Standardbib + - fs + +**Übungen:** + +Projektarbeit + +--- + +#### Tag 19 + +**Inhalt:** + +- NPM Befehle +- CSV to HTML +- Node Standardbib + - zlib (stream) + - Crypto +- Abschluss von JS für Fortgeschrittene +- Projektvorstellung 1 + 2 + +**Übungen:** + +Übungen 25 - 31 + +--- + +#### Tag 20 + +**Inhalt:** + +- **Einrichtung von Git** +- **Exkurs: Webseite mit Gulp, SASS, HTML/CSS, JS** + +**Übungen:** + +Projektarbeit +Übungen 31 - 32 + +--- + +# JavaScript und das Document Object Model (DOM) + +--- + +#### Tag 21 + +**Inhalt:** + +- Einführung in JS DOM +- DOM Selection (querySelector, querySelectorAll) +- $ & $$ Helper +- CSS Selektoren + +**Übungen:** + +Übungen 01 - 05 + +--- + +#### Tag 22 + +- **Exkurs: Webseite mit Gulp, SASS, HTML/CSS, JS** +- **Wetter API auslesen** + +--- + +#### Tag 23 + +- Defer & Async +- JS Dateien auslagern +- Chat Gestaltung (DOMTokenList Objekt) +- Optimierung von Projektstruktur +- Events in JS MouseEvent, KeyboardEvent + +**Übungen:** + +Übungen 06 - 08 + +--- + +#### Tag 24 + +**Inhalt:** + +- Projekt: Newsboard +- HTML Element Progress +- IDL-Attribut vs. Content-Attribut +- HTML Attribute mit boolescher Zuweisung +- getComputedStyle() und style-Attribute + +**Übungen:** + +Übung 09 - 13 + +--- + +#### Tag 25 + +**Inhalt:** + +- Repetition der Inhalte +- Tooltip: HTML erweitern mit Data-Attribut +- Dataset Attribut + +- **Projektarbeit / Content Factory** + +**Übungen:** + +Übung 14 + +--- diff --git a/03_dom/docs/nodejs-installation.md b/03_dom/docs/nodejs-installation.md new file mode 100644 index 0000000..862e2c3 --- /dev/null +++ b/03_dom/docs/nodejs-installation.md @@ -0,0 +1,114 @@ +## NVM - Node Version Manager + +nvm ist ein Versionsmanager für node.js. Über nvm können mehrere unterschiedliche Node Versionen installiert werden. NVM wird über die Konsole aufgerufen und ist mit verschiedenen Shells kompatibel (sh, dash, ksh, zsh, bash). + +#### Links + +- (Win) +- (Mac OS) + +#### Installation Windows + +1. Lade den NVM-Installer über folgenden Link herunter: +2. Installiere NVM über den [Installer](https://github.com/coreybutler/nvm-windows/releases/download/1.2.2/nvm-setup.zip) +3. Sollte vorher bereits NodeJS global ohne NVM installiert worden sein, wird empfohlen die vorherige NodeJS Version zu [deinstallieren](https://stackoverflow.com/a/55300310). + +### Installation Mac OS + +- Installiere NVM über die Konsole mit: + +```bash +curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash +``` + +- Füge den Pfad zum NVM Ordner zur Shell-Config hinzu. (`~/.bash_profile`, `~/.zshrc`, `~/.profile`, or `~/.bashrc`). + +```bash +export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" +[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm +``` + +- Aktuelle Informationen zur Installation findet man unter folgendem Link: + +#### Erste Schritte + +Sobald NVM erfolgreich installiert wurde kann man über nvm in der Konsole eine neue Node Version mit folgendem Befehl installieren: + +```bash +nvm install [NODE VERSIONSNUMMER] +``` + +> Hinweis: Die aktuellste Versionsnummer von NodeJS findet man am einfachsten auf der [NodeJS-Seite](https://nodejs.org/en/) + +Installierte Node Versionen auflisten + +```bash +nvm list +``` + +Node Version verwenden/wechseln + +```bash +nvm use [NODE VERSIONSNUMMER] +``` + +Node Version als Standard einrichten + +```bash +nvm alias default [NODE VERSIONSNUMMER] +``` + +## Node.js + +### Definition + +Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. + +## Neues Projekt erstellen + +- Über die Konsole in den Projektordner gehen. + +Projektordner wechsel über "change directory" (cd) + +```bash +cd [projektpfad] +``` + +- Eigene Package.json Datei generieren (nur einmalig bei einem neuen Projekt notwendig.) + +```bash +npm init +``` + +- Module installieren, die nur für die Entwicklung benötigt werden. (devDependicies) + +| Befehl | Zweck | +| ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | +| `npm install Modul@Version` | installiere Modul in der Version Version (semantic versioning) | +| `npm install Modul@Version --save`
`npm install Modul@Version -S` | Modul wird in der Datei `package.json` unter dependencies hinzugefügt (Mittlerweile default) | +| `npm install Modul@Version --save-dev`
`npm install Modul@Version -D` | Modul wird in der Datei `package.json` unter devdependencies hinzugefügt | +| `npm install Modul@Version --global`
`npm install Modul@Version -g` | Modul wird global installiert. (Von jedem Ordner aus anwendbar) | +| `npm uninstall Modul@Version` | entfernt Modul aus `node_modules` | +| `npm uninstall Modul@Version --save` | entfernt Modul aus `node_modules` und aus der dependencies- Eigenschaft in der `package.json`. | +| `npm update Modul` | Aktualisiert Modul auf die neueste Version | +| `npm update Modul --save` |  Aktualisiert Modul auf die neueste Version und auch die Versionsnummer der dependencies- Eigenschaft in der `package.json`. | +| `npm init` | erstellt eine package.json-Datei (der Befehl fragt die Eigenschaften ab) | +| `npm init --yes` | erstellt eine package.json-Datei (der Befehl setzt Default-Werte ein) | +| `npm list` | listet alle installierten Module auf. | +| `npm search` | Suchbegriff sucht Module, deren Namen den Suchbegriff enthält | + +# Globale Module + +## SASS + +### Definition + +> Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. + +Sass ist eine CSS-Preprocessor Sprache. + +```bash +npm install sass -g +``` + +## Liste von verwendeten Modulen diff --git a/03_dom/docs/nodejs-installation.pdf b/03_dom/docs/nodejs-installation.pdf new file mode 100644 index 0000000..c12907f Binary files /dev/null and b/03_dom/docs/nodejs-installation.pdf differ diff --git a/02_advanced/linksammlung.md b/03_dom/linksammlung.md similarity index 92% rename from 02_advanced/linksammlung.md rename to 03_dom/linksammlung.md index 92b7903..2ba04e1 100644 --- a/02_advanced/linksammlung.md +++ b/03_dom/linksammlung.md @@ -29,6 +29,15 @@ - [NVM - Node Version Manager](https://github.com/coreybutler/nvm-windows/releases/download/1.2.2/nvm-setup.zip) - [Git - SCM](https://git-scm.com/) +## Passwordmanager + +- [Enpass](https://www.enpass.io/pricing/) +- [1password](https://1password.com/de/pricing/password-manager) +- [KeepassXC](https://keepassxc.org/) +- [Safe in cloud](https://safe-in-cloud.com/) +- [BitWarden](https://bitwarden.com/de-de/) + + ## JS Tuts - [JS CheatSheet](https://dev.to/devsmitra/28-javascript-array-hacks-a-cheat-sheet-for-developer-5769)