finalized JS DOM

03_dom/uebungen/u18_cuteycats/README.md

@@ -0,0 +1,22 @@
+# Übung 18: Cuteycat
+
+Der Katzenfreundeverein Cuteycat hat einen Auftrag für dich. Der Verein möchte auf seiner Website einen Wettbewerb ausrichten. Die Seite zeigt eine Reihe von Katzen, aus denen ein Besucher jeweils die drei niedlichsten auswählen soll.
+
+1. Sobald ein Besucher auf eine der Katzen klickt, soll diese auch in der rechten Box (Cutest Cats) erscheinen. Sie darf aber aus der Liste der Katzen (Our Cats) nicht verschwinden!
+
+2. Achte darauf, dass sich die gleiche Katze nicht zweimal auswählen lässt.
+
+3. Es darf nicht mehr als drei niedlichste Katzen geben.
+
+4. Benutzer sollen eine Katze in der Gewinnerbox (Cutest Cats) anklicken können, um sie wieder herauszunehmen.
+
+**Hinweise**
+Versuche die Übung ohne .innerHTML zu lösen!
+
+Unter der URL <http://loremflickr.com/150/150/cute,kitten/all> kannst du weitere zufällige Katzenbilder generieren.
+
+Die Seite <http://fantasynamegenerators.com/cat-names.php> produziert zufällige Katzennamen.
+
+Verwende `.cloneNode(true)` auf den `li`-Elementen, um das Entfernen der Katzen aus Our Cats zu verhindern.
+
+Registriere den Event-Handler auf den `li`-Elementen. Falls der Benutzer aber nicht direkt das `li` anklickt, sondern nur Bild oder Text (Name der Katze), so zeigt event.target auf das angeklickte Element. Mittels event.currentTarget kannst du aber immer noch auf das `li` zugreifen. `currentTarget` enthält immer das Element, auf dem der Handler tatsächlich registriert wurde.

03_dom/uebungen/u18_cuteycats/assets/css/main.css

@@ -0,0 +1,76 @@
+@charset "UTF-8";
+/* Color Theme Swatches in Hex */
+/* Color Theme Swatches in RGBA */
+*,
+html {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  background-color: #f7eedf;
+}
+
+.m-cutey-cat h2 {
+  color: #7aa67a;
+}
+.m-cutey-cat .box-cat-selection {
+  position: fixed;
+}
+.m-cutey-cat ul.list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-family: Georgia, "Times New Roman", Times, serif;
+  font-size: 2rem;
+}
+.m-cutey-cat ul.list li {
+  min-width: 400px;
+  background-color: #feaea5;
+  margin: 0 0 10px;
+  user-select: none;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
+  transition: all 0.4s cubic-bezier(0.52, 0.02, 0.43, 1.39);
+}
+.m-cutey-cat ul.list li:not(.selected):hover {
+  background-color: #fd8173;
+  box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
+  transform: scale(1.1);
+}
+.m-cutey-cat ul.list li:not(.selected):hover img {
+  border-width: 0;
+}
+.m-cutey-cat ul.list li img {
+  width: 120px;
+  border: 10px solid rgba(255, 255, 255, 0.6);
+  transition: all 0.4s;
+}
+.m-cutey-cat ul.list li span {
+  color: white;
+  padding: 0 1rem;
+  letter-spacing: 2px;
+}
+.m-cutey-cat ul.list.list-cat-vote li.selected {
+  background-color: #ffdbd7;
+  opacity: 0.5;
+}
+.m-cutey-cat ul.list.list-cat-selection li {
+  background-color: #b7cfb7;
+}
+.m-cutey-cat ul.list.list-cat-selection li:hover {
+  background-color: #98bb98;
+}
+.m-cutey-cat ul.list.list-cat-selection li:hover::after {
+  position: absolute;
+  top: 30px;
+  right: 1.5rem;
+  content: "";
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  color: white;
+}
+
+/*# sourceMappingURL=main.css.map */

03_dom/uebungen/u18_cuteycats/assets/css/main.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss"],"names":[],"mappings":";AAEA;AAOA;AAWA;AAAA;EAEE;;;AAGF;AAAA;EAEE;EACA,kBAzBa;;;AA+Bb;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA,kBA7CS;EA8CT;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAMA;EACE;EACA;;AAMJ;EACE,kBAxFO;;AAyFP;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"main.css"}

03_dom/uebungen/u18_cuteycats/assets/js/libs/helpers.js

@@ -0,0 +1,17 @@
+const $ = (qs) => document.querySelector(qs);
+const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+const $on = (el, ev, fn) => {
+  Array.isArray(el) ? el.forEach((ae) => $on(ae, ev, fn)) : el.addEventListener(ev, fn);
+  return el;
+};
+
+Node.prototype.on = function (name, fn) {
+  this.addEventListener(name, fn);
+  return this;
+};
+
+Array.prototype.on = Array.prototype.addEventListener = function (name, fn) {
+  this.forEach((elem) => elem.addEventListener(name, fn));
+  return this;
+};

03_dom/uebungen/u18_cuteycats/assets/js/main.js

@@ -0,0 +1,40 @@
+'use strict';
+
+(() => {
+  // === DOM & VARS =======
+  const DOM = {};
+
+  // === INIT =============
+  const init = () => {};
+
+  // === EVENTHANDLER =====
+
+  // === XHR/FETCH ========
+
+  // === FUNCTIONS ========
+
+  init();
+})();
+
+// Übung 18: Cuteycat
+
+// Der Katzenfreundeverein Cuteycat hat einen Auftrag für dich. Der Verein möchte auf seiner Website einen Wettbewerb ausrichten. Die Seite zeigt eine Reihe von Katzen, aus denen ein Besucher jeweils die drei niedlichsten auswählen soll.
+
+// 1. Sobald ein Besucher auf eine der Katzen klickt, soll diese auch in der rechten Box (Cutest Cats) erscheinen. Sie darf aber aus der Liste der Katzen (Our Cats) nicht verschwinden!
+
+// 2. Achte darauf, dass sich die gleiche Katze nicht zweimal auswählen lässt.
+
+// 3. Es darf nicht mehr als drei niedlichste Katzen geben.
+
+// 4. Benutzer sollen eine Katze in der Gewinnerbox (Cutest Cats) anklicken können, um sie wieder herauszunehmen.
+
+// Hinweise
+// Versuche die Übung ohne .innerHTML zu lösen!
+
+// Unter der URL http://loremflickr.com/150/150/cute,kitten/all kannst du weitere zufällige Katzenbilder generieren.
+
+// Die Seite http://fantasynamegenerators.com/cat-names.php produziert zufällige Katzennamen.
+
+// Verwende .cloneNode(true) auf den li-Elementen, um das Entfernen der Katzen aus Our Cats zu verhindern.
+
+// Registriere den Event-Handler auf den li-Elementen. Falls der Benutzer aber nicht direkt das li anklickt, sondern nur Bild oder Text (Name der Katze), so zeigt event.target auf das angeklickte Element. Mittels event.currentTarget kannst du aber immer noch auf das li zugreifen. currentTarget enthält immer das Element, auf dem der Handler tatsächlich registriert wurde.

03_dom/uebungen/u18_cuteycats/assets/scss/main.scss

@@ -0,0 +1,103 @@
+// sass assets/scss/main.scss:assets/css/main.css --style=expanded --watch
+
+/* Color Theme Swatches in Hex */
+$color-theme1: #f7eedf;
+$color-theme2: #b7cfb7;
+$color-theme3: #ffcdb6;
+$color-theme4: #feaea5;
+$color-theme5: #ffc7a2;
+
+$primary-color: #efefef;
+
+// Allgemeine Formatierung =================================
+
+*,
+html {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  background-color: $color-theme1;
+}
+
+// Module cutey cat ======================
+
+.m-cutey-cat {
+  h2 {
+    color: darken($color-theme2, 20);
+  }
+
+  .box-cat-selection {
+    position: fixed;
+  }
+
+  ul.list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    font-size: 2rem;
+
+    li {
+      min-width: 400px;
+      background-color: $color-theme4;
+      margin: 0 0 10px;
+      user-select: none;
+      border-radius: 16px;
+      overflow: hidden;
+      box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
+      transition: all 0.4s cubic-bezier(0.52, 0.02, 0.43, 1.39);
+      &:not(.selected):hover {
+        background-color: darken($color-theme4, 10);
+        box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
+        transform: scale(1.1);
+
+        img {
+          border-width: 0;
+        }
+      }
+
+      img {
+        width: 120px;
+        border: 10px solid rgba(white, 0.6);
+        transition: all 0.4s;
+      }
+
+      span {
+        color: white;
+        padding: 0 1rem;
+        letter-spacing: 2px;
+      }
+    }
+
+    &.list-cat-vote {
+      li {
+        &.selected {
+          background-color: lighten($color-theme4, 10);
+          opacity: 0.5;
+        }
+      }
+    }
+
+    &.list-cat-selection {
+      li {
+        background-color: $color-theme2;
+        &:hover {
+          background-color: darken($color-theme2, 10);
+
+          &::after {
+            position: absolute;
+            top: 30px;
+            right: 1.5rem;
+            content: '\f1f8';
+            font-family: 'Font Awesome 5 Free';
+            font-weight: 900;
+            color: white;
+          }
+        }
+      }
+    }
+  }
+}

03_dom/uebungen/u18_cuteycats/index.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cutey Cats</title>
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css" />
+    <link rel="stylesheet" href="assets/css/main.css" />
+
+    <script src="assets/js/main.js" defer></script>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>Cutey Cats</h1>
+      </div>
+
+      <section class="section-cutey-cat">
+        <div class="m-cutey-cat">
+          <div class="container">
+            <div class="row">
+              <div class="col">
+                <div class="box-cat-vote">
+                  <h2>Our Cats</h2>
+                  <ul class="list list-cat-vote">
+                    <li><img src="assets/img/kittens/1.jpg" alt="cat 1" /><span>Chance</span></li>
+                    <li><img src="assets/img/kittens/2.jpg" alt="cat 2" /><span>MeowMix</span></li>
+                    <li><img src="assets/img/kittens/3.jpg" alt="cat 3" /><span>Stripes</span></li>
+                    <li><img src="assets/img/kittens/4.jpg" alt="cat 4" /><span>Schrodinger</span></li>
+                    <li><img src="assets/img/kittens/5.jpg" alt="cat 5" /><span>Waffles</span></li>
+                    <li><img src="assets/img/kittens/6.jpg" alt="cat 6" /><span>Tazmina</span></li>
+                    <li><img src="assets/img/kittens/7.jpg" alt="cat 7" /><span>Wiggle</span></li>
+                    <li><img src="assets/img/kittens/8.jpg" alt="cat 8" /><span>Gin</span></li>
+                    <li><img src="assets/img/kittens/9.jpg" alt="cat 9" /><span>Paws</span></li>
+                    <li><img src="assets/img/kittens/10.jpg" alt="cat 10" /><span>Marshmallow</span></li>
+                    <li><img src="assets/img/kittens/11.jpg" alt="cat 11" /><span>Caesar</span></li>
+                    <li><img src="assets/img/kittens/12.jpg" alt="cat 12" /><span>Trogdor</span></li>
+                    <li><img src="assets/img/kittens/13.jpg" alt="cat 13" /><span>Sourpuss</span></li>
+                    <li><img src="assets/img/kittens/14.jpg" alt="cat 14" /><span>Stitch</span></li>
+                    <li><img src="assets/img/kittens/15.jpg" alt="cat 15" /><span>Sunshine</span></li>
+                  </ul>
+                </div>
+              </div>
+
+              <div class="col">
+                <div class="box-cat-selection">
+                  <h2>Cutest Cats</h2>
+                  <ul class="list list-cat-selection"></ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>